Principes de dév web d’applications mobileJqueryMobile et GWTMobile

essais et retours d’expérience

Montréal #2

@gtugmontrealhttps://groups.google.com/group/gtug-montreal

Sacha Leprêtre14 Septembre 2011

Stratégies de développements

– Pur natif (sdk android)• Avec SDK

• Avec NDK

– Pur web (dans le navigateur)

– App locale sans navigateur mais web

– Autres:• Combinaisons possibles…, mécanisme d’extensions

• Meta langages…

Possibilités

App natif

App web

Extensions

Webkit ?

– Webkit ?

– HTML5 ?

– Webview ?

ARMDalvikVM

WebkitHTMLJSCSS

Outils de développement

– Eclipse • (svn, androidsdk…)

– Chrome• Inspection de DOM

• Debug js

• WebSQL

• Extension chrome: Window resizer

– Lita (SQLLite client)

– LA TABLETTE ou le smartphone! Pas l’émulateur…

– ADB• Console.log

• SQL

– App: Astro filemanager

Pile technologique présentées

– Application• Webview: Phonegap

– Language• Javascript: (pur, Jquery…) ou Java->Javascript (GWT)

– Layout• HTML,CSS,Javascript: JqueryMobile, GWTMobile

– Stockage• HTML5 websql: persistencejs

• Fichier: Phonegap

Dev dans le navigateur CHROME

Phonegap

Phonegap• Eclipse, Installer Android SDK et Android Eclipse

Plugin• Faire un projet Android• Déposer phonegap.js et librairie phonegap.jar

Parlons de stockage(offline)

Persistence.js

– http://persistencejs.org/

– ORM

– pas d’écriture de SQL !

– Couche d abstraction extensible selon l’évolution de la norme HTML5:

• WEBSQL

• LocalStorage

• IndexedDB

Persistence.js

éfinition des entités:

•ptimiser (index et dénormalization)

•mettre en relation

Persistence.js

Persistence.js

equêtes !

og SQL pour webSQL !

HROME ! Ou FF

Persistence.js

SQLLite client permet d’acceder à la BD de CHROME !

LITA

HTML5 storage !

Parlons de JqueryMobile

JqueryMobile

– http://jquerymobile.com/demos/1.0a4.1/

– Un language visuel pour l’utilisateur

JqueryMobile: Principes

Votre code : Page html-Balise HTML-Balises JQM

Page html enrichie (DOM mémoire)

ProcesseurJquery.js+JQM.js

Parlons de GWTMobile

Intérêts

• GWT• Mobile• Application

• et… architecture

GWT Mobile UI: les widgetsUn langage visuel

• Webkit (Android,IOS,Chrome,Safari…)• Un langage visuel pour l’utilisateur

• Démo: http://www.ambigtion.com/gwtmobileui/

• Approches visuelles similaires :– Jquerymobile.com alpha 4– Dojomobile

• Forces/faiblesses de GWT Mobile UI ?

Code: env

• Env– Eclipse + GWT Eclipse plugin– GWT Mobile UI– Lancement de Kitchensink (palette de

widgets)

Code: Principes et architecture

Code: Principes et architecture• Mécanisme de « Page » ;-) :

– Faire la vue UIbinder de la Page:• MainPage.ui.xml • Rapide avec le GWT dev mode !

Code: Principes et architecture• Mécanisme de « Page »

;-) :– Désigner la logique

associé à la page:• MainPage.java: Étendre

Page• MainPage.java: Définir

logique suivante et routage…goto(…)

• Back géré

Code: Principes et architecture• Mécanisme de « Page »

;-) :– Autres pages…– Page est un concept– Non MVP– Principe d’architecture

simple

GWT Mobile phonegap• Un wrapper javascript de phonegap• Phonegap ?

Quoi d’autre…

• Dev nouveau( jan 2011)• Message de Denis: « Hi GTUG Montreal, GWT Mobile welcomes their

participation in the open source project !»• ROADMAP From Denis:

– 1. Complete the initial release of the gwtmobile-ui project. That includes finishing up a basic set of UI widgets and laying down the fundation for the theming function.

– 2. Upgrade the gwtmobile-phonegap project to support 0.9.4, the current phonegap version.

– 3. Enhance the gwtmobile-persistence project to support GWT Request Factory so that the same domain classes can be used on both the client and the server sides.

– 4. Alternative or in additional to #3, enhance gwtmobile-persistence to work with the resty-gwt project, for people who perfer JSON in communicating with the server.

– 5. Support WP7 later this year when the WP7 mobile browser is upgraded to IE9.– 6. Support tablet form factor. May utilize the GWT MVP Framework for this purpose if

it makes sense to do so.– 7. Make gwtmobile-ui work with the GWT UI Designer in designing UI for mobile

devices. This is actually a long term to-do. I haven't done any research on the feasibility.