h-ubu - an industrial-strength service-oriented component model for javascript applications
DESCRIPTION
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.TRANSCRIPT
![Page 1: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/1.jpg)
h-ubu Service-Orientation in
JavaScript
Clement Escoffier
Philippe Lalanda
Nicolas Rempulski
![Page 2: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/2.jpg)
![Page 3: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/3.jpg)
![Page 4: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/4.jpg)
JavaScript coding => or explosions ?
![Page 5: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/5.jpg)
var foo; alert(foo == null); // true alert(foo == undefined); // true alert(foo === null); // false alert(foo === undefined); // true
![Page 6: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/6.jpg)
a = 1; (function(){ b=2; alert(a); })(); // 1 alert(b); //2 -> b is global
![Page 7: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/7.jpg)
alert(1+"10"); // 110 alert(1+”1"+1); // 111
![Page 8: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/8.jpg)
![Page 9: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/9.jpg)
What would be nice ?
![Page 10: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/10.jpg)
![Page 11: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/11.jpg)
C omponents
![Page 12: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/12.jpg)
Interfaces
Required
Provided
![Page 13: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/13.jpg)
Dependency Injection
![Page 14: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/14.jpg)
Events Received
Sent
![Page 15: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/15.jpg)
Would it be enough ?
![Page 16: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/16.jpg)
Traditional C omponent model
![Page 17: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/17.jpg)
Variability
Dynamic
Bootstrap
Packaging
![Page 18: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/18.jpg)
P latform-based variability
![Page 19: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/19.jpg)
Dynamic adaptability
![Page 20: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/20.jpg)
Dynamic adaptability
X X
![Page 21: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/21.jpg)
Do we need this dynamism ?
![Page 22: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/22.jpg)
C onnectivity
Device features
Sensors
User actions
Neighbors
Failures
![Page 23: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/23.jpg)
Ok, but what is h-ubu ?
![Page 24: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/24.jpg)
h-ubu is a Service-oriented C omponent model
![Page 25: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/25.jpg)
components
![Page 26: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/26.jpg)
contracts (i.e. interfaces)
![Page 27: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/27.jpg)
dynamic services
![Page 28: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/28.jpg)
1 - Publication
2 – Lookup,
Notifications,
Selection
3 - Binding
dynamic services Registry
![Page 29: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/29.jpg)
Programming model
Architectural shift
Issues
![Page 30: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/30.jpg)
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
![Page 31: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/31.jpg)
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
![Page 32: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/32.jpg)
Easy adoption
![Page 33: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/33.jpg)
Nb of components
Time
![Page 34: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/34.jpg)
JavaEE
Mobile
Mobile Web Server
Web Desktop
![Page 35: h-ubu - An industrial-strength service-oriented component model for JavaScript applications](https://reader033.vdocuments.site/reader033/viewer/2022052900/5562fbd1d8b42a62598b4b40/html5/thumbnails/35.jpg)
h bu
h#p://nanoko-‐project.github.io/h-‐ubu/snapshot/
Thanks