In the last years, we developed web applications requiring a large amount of JavaScript code. These web applications present adaptation requirements. In addition to platform-centric adaptation, applications have to dynamically react to external events like connectivity disruptions. Building such applications is complex and we faced sharp maintainability challenges. This paper presents h-ubu, a service-oriented component framework for JavaScript allowing building adaptive applications. h-ubu is used in industrial web applications and mobile applications. h-ubu is available in open source, as part of the OW2 Nanoko project.

1. h-ubu
Service-Orientation in
JavaScript
Clement Escoffier
Philippe Lalanda
Nicolas Rempulski

4. JavaScript coding
=> or explosions ?

5. var foo;
alert(foo == null); // true
alert(foo == undefined); // true
alert(foo === null); // false
alert(foo === undefined); // true

6. a = 1;
(function(){
b=2;
alert(a);
})(); // 1
alert(b); //2 -> b is global

7. alert(1+"10"); // 110
alert(1+”1"+1); // 111

9. What would be
nice ?

11. Components

12. Interfaces
Required
Provided

13. Dependency
Injection

14. Events
Received
Sent

15. Would it be
enough ?

16. Traditional
Component model

17. Variability
Dynamic
Bootstrap
Packaging

18. Platform-based variability

19. Dynamic adaptability

20. Dynamic adaptability
X
X

21. Do we need this
dynamism ?

22. Connectivity
Device
features
Sensors
User actions
Neighbors
Failures

23. Ok, but what is
h-ubu ?

24. h-ubu is a
Service-oriented
Component model

25. components

26. contracts
(i.e. interfaces)

27. dynamic services

28. 1 - Publication
2 – Lookup,
Notifications,
Selection
3 - Binding
dynamic services
Registry

29. Programming
model
Architectural
shift
Issues

30. var
provider
=
{
configure
:
function(hub,
conf)
{
hub.provideService({
component:
this,
contract:
myService
});
},
start
:
function()
{
},
stop
:
function()
{},
doSomething
:
function()
{
…
}
}
1 - Publication
Registry
2 – Lookup,
Notifications,
Selection
3 - Binding

31. var
consumer
=
{
configure
:
function(hub,
conf)
{
hub.requireService({
component:
this,
contract:
myService,
field:
"svc"
});
},
//
…
work
:
function()
{
this.svc.doSomething();
}
}
1 - Publication
Registry
2 – Lookup,
Notifications,
Selection
3 - Binding

32. Easy
adoption

33. Nb of
components
Time

34. JavaEE
Mobile
Mobile
Web
Server
Web
Desktop

35. h bu
h#p://nanoko-­‐project.github.io/h-­‐ubu/snapshot/
Thanks