Modern applications are able to adapt their architecture dynamically in order to tackle requirements, correctives and context changes. Such dynamism is often an echo of complexity and is not well supported by traditional client and user software stacks making complex the design, implementation and maintenance of the end user interface. Meanwhile, the web has seen the emergence of user interface technologies (e.g. HTML5, CSS3, JavaScript) widely adopted by developers to create highly flexible user interfaces. However, such clients are intrinsically bound to run on a web browser which is out of the control of the application. In this talk, we present ChameRIA, an application framework where a browser engine is reified as a component within the framework, thus allowing for better control over the rendering engine. We describe how we preserve a clear separation of concerns between the user interface and the application logic while maintaining coherence between them. We discuss how ChameRIA has been successfully used in two projects: a DRM document reader and a valve control application. Jonathan Bardin, Laboratoire d'Informatique de Grenoble

1. ChameRIA
Improving User Experience by Infusing
Web Technologies into Desktops
Alice Murphy, Clément Escoffier Philippe Lalanda, Jonathan Bardin
akquinet AG Université de Grenoble & LIG
Berlin, Germany Grenoble, France

2. ChameRIA
Chameria is a term used today
mostly by Albanians for parts of the
coastal region of Epirus in southern
Albania and northwestern Greece.
http://en.wikipedia.org/wiki/Chameria

3. ChameRIA
OW2 Chameleon
Rich Internet Application
+ =

4. Chame + RIA = ChameRIA
OW2 ameleon Rich Internet Application

5. Chame + RIA
OW2 ameleon Rich Internet Application
Une pile logiciel ?
Service Catalog
Frameworks
Core

6. Chame + RIA
OW2 ameleon Rich Internet Application
Service Catalog
Frameworks
OSGi runtime
Core iPOJO
configuration support

7. Chame + RIA
OW2 ameleon Rich Internet Application
Service Catalog
RoSe
Frameworks VisualVm
OSGi runtime
Core iPOJO
configuration support

8. Chame + RIA
OW2 ameleon Rich Internet Application
JSON,
Service Catalog Syndication,
Chat, Twitter...
RoSe
Frameworks VisualVm
OSGi runtime
Core iPOJO
configuration support

9. Chame + RIA
OW2 ameleon Rich Internet Application
JSON,
Service Catalog Syndication,
Chat, Twitter...
RoSe
Distributions ! Frameworks VisualVm
OSGi runtime
Core iPOJO
configuration support

10. Chame + RIA
OW2 ameleon Rich Internet Application
JavaScript
Service Catalog Desktop Web HTML
apps apps CSS...
RIA
Frameworks
Com
Core protocols

11. Chame + RIA
OW2 ameleon Rich Internet Application
JavaScript
Service Catalog Desktop Web HTML
apps apps CSS...
RIA
Frameworks
Com
Core protocols
JSON-RPC
HTTP/1.1
...

12. Chame + RIA
OW2 ameleon Rich Internet Application
JavaScript
Service Catalog Desktop Web HTML
apps apps CSS...
Flash client RIA
Frameworks Browser
...
Com
Core protocols
JSON-RPC
HTTP/1.1
...

13. Chame + RIA
OW2 ameleon Rich Internet Application
Hubu
JavaScript
Service Catalog Desktop Web HTML
apps apps CSS...
Flash client RIA
Frameworks Browser
...
Com
Core WebKit protocols
JSON-RPC
HTTP/1.1
...

14. Chame + RIA
OW2 ameleon Rich Internet Application
Service Catalog Web
Desktop
+
apps apps
RIA
Frameworks
Com
Core protocols

15. Chame + RIA
OW2 ameleon Rich Internet Application
Service Catalog Web
Desktop
+
apps apps
RIA
Frameworks
Com
Core protocols
Mais pourquoi Ok ... comment

16. Pour quoi faire !
Swing Modularity
Threading
Java UI QT Adaptation

17. Pour quoi faire !
Swing Modularity
Threading
Java UI QT Adaptation
SWT Manual Object Deallocation

18. Pour quoi faire !
Swing Modularity
Threading
Java UI QT Adaptation
SWT Manual Object Deallocation
+
OSGi =

19. Pour quoi faire !
Java UI + OSGi
●
Pas de concept de service
●
Réutilisation
●
Maintenance
●
Connaissance
en OSGi pour faire l'UI

20. Pour quoi faire !

21. Pour quoi faire !
WEB UI + OSGi WEB
●
Concept de service
●
Pas besoin de connaissances OSGi pour l'UI
●
Meilleur séparation des préoccupations
●
Isolation !

22. Pour quoi faire !

23. Pour quoi faire !
WEB UI + OSGi WEB
●
Concept de service
●
Pas besoin de connaissances OSGi pour l'UI
●
Meilleur séparation des préoccupations
●
Isolation !
●
Il faut des dévloppeurs web
●
Il faut un browser
Hors du contrôle de l'application
Manque de fiabilité et de confort pour l'utilisateur

24. ChameRIA
OW2 ameleon Rich Internet Application
Service Catalog Web
Desktop
+
apps apps
RIA
Frameworks
Com
Core protocols
Mais pourquoi Ok ... comment

25. Comment ?
Combiner une passerelle OSGi avec Webkit

26. Comment ?

27. Comment ?
1 Business logic in Java
●
iPOJO components are POJOs

28. Comment ?
1 Business logic in Java
●
iPOJO components are POJOs
2 UI is fully realized in web technologies
●
JavaScript, HTML, CSS …

29. Comment ?
1 Business logic in Java
●
iPOJO components are POJOs
2 UI is fully realized in web technologies
●
JavaScript, HTML, CSS …
3 Follow Service-Oriented Component principles
●
Contract-based communication
●
Service availability can change at runtime
●
...

30. Comment ?

31. Comment ?

32. Comment ?

33. Comment ?
Intégratation du WebKit ?
1 Launcher
● Wrap the WebKit et le framework OSGi

34. Comment ?
Intégratation du WebKit ?
1 Launcher
● Wrap the WebKit et le framework OSGi
2 WebViewFactory composant
● Creer une nouvelle fenètre
● Fournit un BrowserService

35. Comment ?
Web User Interface - hubu
1 Modèle à composant pour JavaScript
● Interaction basé sur des contrats hubu
● Injection des dépendances
● Un composant = un fichier
● Communications synchrone et asynchrone
● Composant sont testables

36. Comment ?
Web User Interface - hubu
creation
hub
hub.registerComponent
hubu
configure hub.bind
hub.start bind
start hub.start
hub.stop
stop

37. Comment ?
<script src =”http://../jquery−latest.js”/>
<script src =” hubu. js”/> hubu
<script src =” backendComponent.js”/>
<script src =” f rontendComponent.js”/>
<!−− The contracts −−>
<script src =” UserServiceContract.js”/>

38. Comment ?
<script src =”http://../jquery−latest.js”/>
<script src =” hubu. js”/> hubu
<script src =” backendComponent.js”/>
<script src =” frontendComponent.js”/>
<!−− The contracts −−>
<script src =” UserServiceContract.js”/>

39. Comment ?
hub
. registerComponent ( backendComponent ( ) , {
component_name : ’ user ’
})
.registerComponent ( frontendComponent ( ) , {
hubu
loginId : ’#login’ ,
logoutId : ’ #logout ’ ,
statusId : ’ #status’ ,
component_name : ’frontend’
})
// Declare a Binding
.bind ({
component : ’user’ ,
to : ’ frontend ’ ,
into : ’ bind ’ ,
contract : UserServiceContract // The Interface
})
//Start the app
.start() ;
}) ;

40. Comment ?
hub
. registerComponent ( backendComponent ( ) , {
component_name : ’ user ’
})
.registerComponent ( frontendComponent ( ) , {
hubu
loginId : ’#login’ ,
logoutId : ’ #logout ’ ,
statusId : ’ #status’ ,
component_name : ’frontend’
})
// Declare a Binding
.bind ({
component : ’user’ ,
to : ’ frontend ’ ,
into : ’ bind ’ ,
contract : UserServiceContract // The Interface
})
//Start the app
.start() ;
}) ;

41. Comment ?
var myComponent = function() {
/** Private part (members and functions) **/
return {
/** Component Interface **/
hubu
getComponentName : function() { },
configure : function(theHub, configuration) { },
start: function() { },
stop: function() { },
// Public Interface //
// Functions...
}
}

42. Comment ?
Intégration des composants WUI !
1 Emballé dans un bundle !
● Et publier comme ressources via HttpService
wui

43. Comment ?
Intégration des composants WUI !
1 Emballé dans un bundle !
● Et publier comme ressources via HttpService
2 WebExposer component !
● Écoute un dossier
● Pas besoin de connaître OSGi !
wui

44. Comment ?
Logique applicative !
1 Bundles !
● Unité de déploiement

45. Comment ?
Logique applicative !
1 Bundles !
● Unité de déploiement
2 iPOJO component !
● Un composant est un POJO !
● Injection des dépendances
● Cycle de vie

46. Comment ?
@Component ( name=” acme.hello.component ” )
@Provides // Provide HelloService
public class MyComponent implements HelloService {
@Requires ( optional=true) // require a LogService
private LogService logger;
public String hello ( String name){
return ” Hello ”+name+”! ” ;
}
@Validate / /on validation callback
private void start () {
logger.log( INFO , ” HelloService started ” ) ;
}
@Invalidate // on invalidation callback
private void stop (){
logger.log ( INFO , ” HelloService stopped” ) ;
}
}

47. Comment ?
Communication entre OSGi et WUI !
1 RoSe !
● Injection de connecteurs
● Séparation des préoccupations
● Déclaratif (configuration)
● Dynamique

48. Comment ?
”machine ” : {
…
”connection” : [
”out” : {
”servicefilter” : ” ( objectClass=acme.HelloService) ” ,
”protocol” : [ ”jsonrpc” ]
}
]

49. Comment ?
...
var jsonrpc = new JSONRpcClient(”/JSON−RPC”);
var greeting = jsonrpc.helloService.hello(”Dave ”);
$(’#greeting’).text(greeting);
...

50. Comment ?
Protocoles/standards supporté
1 JSON-RPC (jabsorb)
2 XML-RPC (Apache XML-RPC)
3 JAX-RS (Jersey – export seulement)
4 JAX-WS (Apache CXF)

51. Comment ?
Protocoles/standards supporté

52. Comment ?
Changements dynamique et couplage !
●
BC: Business Logic component
●
SC: Service contracts
●
WC: WUI component
●
WV: Web view resources

53. Comment ?
Bonne pratiques !
1 All communication between the server and client is
contract-based and done through the use of virtual objects
(e.g. JSON-RPC proxies, REST virtual resources).

54. Comment ?
Bonne pratiques !
1 All communication between the server and client is
contract-based and done through the use of virtual objects
(e.g. JSON-RPC proxies, REST virtual resources).
2 No part of the web client should be evoked, generated or
templated from the server-side. This rules out in-line
conditional HTML in JSP.

55. Comment ?
Bonne pratiques !
1 All communication between the server and client is
contract-based and done through the use of virtual objects
(e.g. JSON-RPC proxies, REST virtual resources).
2 No part of the web client should be evoked, generated or
templated from the server-side. This rules out in-line
conditional HTML in JSP.
3 The server will only implement the business logic.

56. Chame + RIA
OW2 ameleon Rich Internet Application
Service Catalog Web
Desktop
+
apps apps
RIA
Frameworks
Com
Core protocols
Des expériences ?

57. Expérience !
Application de gestion de vannes d'eau

58. Expérience !
Lecteur de document (avec DRM)

59. Conclusion
1 Rhino plutôt que webkit et injection direct des
services dans la VM de Rhino !?

60. Conclusion
1 Rhino plutôt que webkit et injection direct des
services dans la VM de Rhino !?
2 Vers des applications WEB/Cloud ?
1 Attention aux passages à l'échelle !

61. Merci !
ChameRIA & Hubu
●
http://github.com/akquinet
Chameleon & RoSe
●
http://chameleon.ow2.org/
●
http://github.com/barjo/arvensis