ChameRIA

Alice Murphy, Clément Escoffier

akquinet AGBerlin, Germany

Philippe Lalanda, Jonathan Bardin

Université de Grenoble & LIG Grenoble, France

Improving User Experience by InfusingWeb Technologies into Desktops

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

ChameRIA

OW2 ChameleonRich Internet Application

+ =

Rich Internet ApplicationOW2 ameleon

Chame + RIA = ChameRIA

Chame + RIA

OW2 ameleon

Service Catalog

Frameworks

Core

Rich Internet Application

Une pile logiciel ?

Chame + RIA

OW2 ameleon

Service Catalog

Frameworks

Core

Rich Internet Application

OSGi runtimeiPOJOconfiguration support

Chame + RIA

OW2 ameleon

Service Catalog

Frameworks

Core

Rich Internet Application

RoSe VisualVm

OSGi runtimeiPOJOconfiguration support

Chame + RIA

OW2 ameleon

Service Catalog

Frameworks

Core

Rich Internet Application

JSON, Syndication, Chat, Twitter...

RoSe VisualVm

OSGi runtimeiPOJOconfiguration support

Chame + RIA

OW2 ameleon

Service Catalog

Frameworks

Core

Rich Internet Application

JSON, Syndication, Chat, Twitter...

RoSe VisualVm

OSGi runtimeiPOJOconfiguration support

Distributions !

Desktop apps

Chame + RIA

OW2 ameleon

Service Catalog

Frameworks

Core

Web apps

RIARIA

JavaScriptHTMLCSS...

Rich Internet Application

Comprotocols

Chame + RIA

OW2 ameleon

Service Catalog

Frameworks

Core

Web apps

Desktop apps

Comprotocols

RIA

Web apps

RIARIA

JavaScriptHTMLCSS...

JSON-RPCHTTP/1.1

...

Rich Internet Application

Desktop apps

Chame + RIA

Rich Internet ApplicationOW2 ameleon

Service Catalog

Frameworks

Core

Web apps

Desktop apps

RIA

Web apps

RIARIA

JavaScriptHTMLCSS...

Comprotocols

JSON-RPCHTTP/1.1

...

Flash clientBrowser

...

Chame + RIA

Rich Internet ApplicationOW2 ameleon

Service Catalog

Frameworks

Core

Web apps

Desktop apps

RIA

Web apps

RIARIA

JavaScriptHTMLCSS...

Comprotocols

JSON-RPCHTTP/1.1

...

Flash clientBrowser

...WebKit

Hubu

Chame + RIA

Rich Internet Application

Web apps

Desktop apps

RIA

Web apps

RIARIA

Comprotocols

OW2 ameleon

Service Catalog

Frameworks

Core

+

Chame + RIA

Rich Internet Application

Web apps

Desktop apps

RIA

Web apps

RIARIA

Comprotocols

OW2 ameleon

Service Catalog

Frameworks

Core

+

Mais pourquoi Ok ... comment

Pour quoi faire !

Java UI SwingQT

ModularityThreadingAdaptation

Pour quoi faire !

Java UI SwingQT

ModularityThreadingAdaptation

SWT Manual Object Deallocation

Pour quoi faire !

Java UI SwingQT

ModularityThreadingAdaptation

SWT Manual Object Deallocation

+ OSGi =

Pour quoi faire !

Java UI + OSGi

● Pas de concept de service● Réutilisation● Maintenance● Connaissance en OSGi pour faire l'UI

Pour quoi faire !

Pour quoi faire !

WEB UI + OSGi

● Concept de service● Pas besoin de connaissances OSGi pour l'UI● Meilleur séparation des préoccupations● Isolation !

WEB

Pour quoi faire !

Pour quoi faire !

WEB UI + OSGi

● Concept de service● Pas besoin de connaissances OSGi pour l'UI● Meilleur séparation des préoccupations● Isolation !

WEB

● 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

ChameRIA

Rich Internet Application

Web apps

Desktop apps

RIA

Web apps

RIARIA

Comprotocols

OW2 ameleon

Service Catalog

Frameworks

Core

+

Mais pourquoi Ok ... comment

Comment ?

Combiner une passerelle OSGi avec Webkit

Comment ?

Comment ?

1 Business logic in Java● iPOJO components are POJOs

Comment ?

1 Business logic in Java● iPOJO components are POJOs

2 UI is fully realized in web technologies● JavaScript, HTML, CSS …

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● ...

Comment ?

Comment ?

Comment ?

Comment ?

Intégratation du WebKit ?

1 Launcher● Wrap the WebKit et le framework OSGi

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

Comment ?

Web User Interface - hubu

1 Modèle à composant pour JavaScript

● Interaction basé sur des contrats● Injection des dépendances● Un composant = un fichier● Communications synchrone et asynchrone● Composant sont testables

hubu

Comment ?

Web User Interface - hubu

creation

configure

start

bind

stop

hub.registerComponent

hub.bind

hub.start

hub.start

hub.stop

hub

hubu

Comment ?

<script src =”http://../jquery−latest.js”/>

<script src =” hubu. js”/>

<script src =” backendComponent.js”/>

<script src =” f rontendComponent.js”/>

<!−− The contracts −−>

<script src =” UserServiceContract.js”/>

hubu

Comment ?

<script src =”http://../jquery−latest.js”/>

<script src =” hubu. js”/>

<script src =” backendComponent.js”/>

<script src =” frontendComponent.js”/>

<!−− The contracts −−>

<script src =” UserServiceContract.js”/>

hubu

Comment ?

hub . registerComponent ( backendComponent ( ) , { component_name : ’ user ’ }) .registerComponent ( frontendComponent ( ) , { 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() ;}) ;

hubu

Comment ?

hub . registerComponent ( backendComponent ( ) , { component_name : ’ user ’ }) .registerComponent ( frontendComponent ( ) , { 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() ;}) ;

hubu

Comment ?

var myComponent = function() {

/** Private part (members and functions) **/

return {

/** Component Interface **/

getComponentName : function() { },

configure : function(theHub, configuration) { },

start: function() { },

stop: function() { },

// Public Interface //

// Functions...

}

}

hubu

Comment ?

Intégration des composants WUI !

1 Emballé dans un bundle !● Et publier comme ressources via HttpService

wui

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

Comment ?

Logique applicative !

1 Bundles !● Unité de déploiement

Comment ?

Logique applicative !

1 Bundles !● Unité de déploiement

2 iPOJO component !

● Un composant est un POJO !● Injection des dépendances● Cycle de vie

Comment ?@Component ( name=” acme.hello.component ” )@Provides // Provide HelloServicepublic 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” ) ; }}

Comment ?

Communication entre OSGi et WUI !

1 RoSe !● Injection de connecteurs● Séparation des préoccupations● Déclaratif (configuration)● Dynamique

Comment ?

”machine ” : {

…

”connection” : [

”out” : {

”servicefilter” : ” ( objectClass=acme.HelloService) ” ,

”protocol” : [ ”jsonrpc” ]

}

]

Comment ?

...

var jsonrpc = new JSONRpcClient(”/JSON−RPC”);

var greeting = jsonrpc.helloService.hello(”Dave ”);

$(’#greeting’).text(greeting);

...

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)

Comment ?

Protocoles/standards supporté

Comment ?

Changements dynamique et couplage !

● BC: Business Logic component

● SC: Service contracts

● WC: WUI component

● WV: Web view resources

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).

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.

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.

Chame + RIA

Rich Internet Application

Web apps

Desktop apps

RIA

Web apps

RIARIA

Comprotocols

OW2 ameleon

Service Catalog

Frameworks

Core

+

Des expériences ?

Expérience !

Application de gestion de vannes d'eau

Expérience !

Lecteur de document (avec DRM)

Conclusion

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

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 !

Merci !

ChameRIA & Hubu● http://github.com/akquinet

Chameleon & RoSe● http://chameleon.ow2.org/● http://github.com/barjo/arvensis