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
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Chame RIA
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
+ =
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
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 !
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
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
●
...
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
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
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
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 ?
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 !