Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris. Problématiques abordées : - Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ? - Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?

1. jQuery mobile / PhoneGap
Contenus dynamiques client-side

2. Nicolas Gans
Formateur Flash / AS3 / AIR / jQuery /
jQuery mobile / PhoneGap
www.regart.net
@nicolasgans

3. Introduction

4. Présentation
• Problématique abordée :
• Comment générer du contenu HTML dynamiquement
côté client (sans PHP !) ?
• Quelles sont les techniques disponibles, les bonnes
pratiques, les pièges à éviter ?

5. Présentation de jQuery
• jQuery : une librairie JS = du code JS prêt à l’emploi qui
simplifie un certain nombre d’opérations complexes.
• Utilisé massivement par les développeurs web = devenu
un « standard » de facto.
AVANTAGES :
• Facilité d’usage : syntaxe simplifiée et synthétique
• Compatibilité et « fallback » entre tous les navigateurs
• Grosse communauté : plugins et mise à jour
• Projets annexes : jQuery UI, jQueryMobile

6. jQuery mobile
• jQuery mobile : framework qui s’appuie sur JQ et qui
permet de créer facilement des interfaces pour les sites
ou web apps mobiles. JQM fournit des composants, un
layout, une architecture et des outils pour les designers
et les codeurs.
• Typiquement, les pages peuvent être crées en pur
HTML, JQM appliquera automatiquement les styles
adéquats et les fonctionnalités nécessaires à l’affichage
de l’interface et des pages.
• Mais on peut évidemment utiliser JS/JQ pour ajouter des
effets et fonctionnalités avancées !

7. Plate-formessupportées
• JQM supporte une multitude de plate-formes mobiles.
De plus il gère automatiquement les différences de
fonctionnalités entre navigateurs et plate-forme.
• Notion de « fallback » : sur des navigateurs anciens, le
contenu s’affichera toujours, avec moins de
fonctionnalités que sur des navigateurs « modernes ».
• Notion d’amélioration progressive (« progressive
enhancement ») : JQM commence par générer une
version basique de la page, puis ajoute des effets et des
fonctionnalités en fonction du navigateur.

8. Plate-formes supportées
• Apple iOS (iPhone, iPodtouch and iPad)
• Android
• Symbian, S60 et UIQ (utilisé sur un nb TRES important de
Smartphones)
• Windows Phone 7 et Windows Mobile
• BlackBerry OS
• Palm WebOS
• Amazon Kindleet Fire
• Les navigateurs de bureau comme Chrome, FF, Safari, IE et
Opera
Pour une liste complète, voir http://jquerymobile.com/gbs/

9. Qu’est-ce qu’une web app ?
• Une web appest une app qui s’exécute côté serveur et dans
le navigateur. L’app pourra s’exécuter sur n’importe quel
poste muni d’un navigateur.
• Exemples de web apps : Gmail, Google Docs,ThemeRoller...
AVANTAGES :
• Ecrire une fois le code, l’exécuter partout : les web apps sont
cross-platform.
• Faciles à créer : les langages utilisés
(HTML, JS, CSS, PHP...) sont faciles à maîtriser et très
répandus.
• Faciles à maintenir : le code est centralisé sur le
serveur, donc MAJ simplifiées et transparentes.

10. Qu’est-ce qu’une web app ?
INCONVÉNIENTS :
• Capacités limitées comparé à du natif
• Exécution plus lente
• Besoin d’une connexion internet pour fonctionner (à
nuancer)
NOTE :
• même si JQM a été plutôt pensé pour faire des web
apps, il peut aussi être utilisé pour faire des sites
mobiles.

11. Web app VS native app
• Avec JQM, on peut aussi créer des app natives, qui
s’exécuteront en dehors du navigateur et pourront être
distribuées via l’App Store ou l’AndroidMarket.
• Il faudra alors utiliser des outils comme PhoneGap ou
Titanium pour encapsuler nos apps écrites en
HTML/JS/CSS dans une application mobile native
(Webview ou UIWebview).
• Cette approche permet également d’accéder aux
fonctionnalités natives du device
(accéléromètre, caméra...).

12. Architecture de l'application

13. Page dans JQM
• Page JQM = "écran".
• Page JQM ≠ page HTML
• Page composée de plusieurs sections : header, content
et footer.
• Attribut data-role :
<div data-role="page" id="home">
<div data-role="header">…</div>
<div data-role="content">…</div>
<div data-role="footer">…</div> index_01.html
</div>

14. Architecture multipage VS pages
séparées
• Multipage :
un document HTML
unique contient toutes les
pages JQM.

15. Architecture multipage VS pages
séparées
• Pages séparées : chaque page JQM est placée dans
un document HTML propre.
Les pages sont chargées automatiquement en AJAX par
JQM.

16. Quelle architecture choisir ?
• Multipage :
– Un seul doc HTML = plus facile à maintenir (inclusion JS et
CSS).
– Idéal pour les contenus très dynamiques : squelette vide que l'on
va remplir dynamiquement.
– Complexe pour les contenus statiques et si BEAUCOUP de
pages.
• Pages séparées :
– Plus difficile à maintenir.
– Recommandé pour les contenus statiques.

17. Exemple
Chargement JSON et générationd'unelistview
et de pages

18. App Paris Culture

19. Génération de pages : serveur ou client ?
• On peut utiliser PHP pour générer les pages côté serveur
(index.php, products.php…).
• POUR :
– Adapté pour app / site dans le navigateur.
– Moins gourmand pour le client.
– Contenu adapté en fonction de la plate-forme.

20. Génération de pages : serveur ou client ?
• CONTRE :
– Native apps : pas de serveur apache en local = la page qui lance
l'appli doit être en HTML.
– Native apps : problèmes de crossdomain.
– Offline ? AÏE !
– Bande passante…
– Certains contenus peuvent être en XML (flux RSS) ou JSON…

21. Génération de pages : serveur ou client ?
• Rendu client-side : pour XML/JSON.
• POUR :
– Adapté pour native apps.
– Plus léger en bande passante (données brutes).
– Mise en cache plus simple.
• CONTRE :
– Plus gourmand pour le client.

22. Question de timing :
A quel moment générer ?
• Les pages JQM ont un "cycle de vie" : depuis leur
initialisation jusqu'à leur affichage.
• Nombreux événements liés aux pages :
"pageinit", "pagebeforecreate", "pagecreate", "pagebefor
eshow"…
• Lequel choisir pour injecter notre contenu ?
• Réponse : "pageinit" ! Equivalent du ready() de JQ

23. JSON est ton ami
• JSON : JavaScript Object Notation. Format de
donnéestextuel, générique, dérivé de la notation des
objetsECMAScript.
• Deux types d'élémentsstructurels :
– Ensemble de paires nom/valeur (Object)
– Listesordonnées de valeurs (Array)
musees.json
• Facile àutiliser, surtout avec JS et JQ !

24. JSON est ton ami
• Chargement JSON avec jQuery :
main.js
• Simple, non ?

25. Génération du HTML
• Une fois les data chargées, on génère le HTML attendu
sous forme d'une chaine de caractère :
• Ho wait ? On va devoir concaténer comme ça tout le
temps ?

26. Templating avec Mustache.js
• Mustache.js = librairie de templating qui permet de
simplifier la génération de contenus HTML dynamiques
client-side. Voir http://bit.ly/tPdsgo
• On utilise la double accolade {{propriété}} pour insérer
nos données dans un template :

27. Injection du HTML dans la page
• Partie la plus facile : méthodes append(),appendTo() et
html() de jQuery.
Exemple :
• Problème : le HTML apparaît "brut", il n'a pas été
"amélioré" par JQM…

28. Stylisation du contenu injecté
• Si l’on crée/modifie dynamiquement le contenu
d’éléments de type listviews ou form, JQM ne stylise pas
automatiquement les modifications apportées.
• Pour appliquer une stylisation à un élément modifié, il
faudra faire un « refresh » sur l’élement modifié :
– Listview : element.listview('refresh')
– Select menu (non-actif) : element.selectmenu('refresh')
– Checkbox ou radio button : element.checkboxradio('refresh')
– Slider et flip toggle : element.slider('refresh')
– Button : element.button('refresh')

29. Méthode ‘refresh’
Uncaught cannot call methods on listview prior
to initialization; attempted to call method
'refresh'
• Erreurlevéesi on appelle la méthode refresh() AVANT la
diffusion de l’événement ‘pageinit’ (page jamaisappelée).
• SOLUTION :
– Attendre le ‘pageinit’.
– Appeler la méthode ‘page()’ sur l’élément page qui va recevoir le
contenu > force l’initialisation.

30. Forcer le changement de page
• Interception du click sur un bouton pour gérer soi-même
le changement de page.
• Méthode $.mobile.changePage(page, options);

31. Modifier une page existante
• ‘pageinit’ n’est diffusé qu’une fois à l’appel de la page :
pas utilisable pour des changements récurrents.
• ‘pagebeforeshow’ : diffusé avant chaque affichage de la
page = pratique pour modifier une page en coulisse, puis
l’afficher.

32. Tips et conclusion

33. TIPS !
• Si app native charge du contenusurvotreserveur : utiliser
URLs absolues !
• Chargement AJAX inter-domaine (crossdomain) :
Le chargement AJAX sur un serveur distant estinterdit.
Les solutions existent (JSONP, proxy...).
• PhoneGap : whitelistiOS = domainesautorisés pour
l’application.
• Gestion des hash dans la barred’adresse : voir data-url.

34. MERCI ;)
www.regart.net
@nicolasgans

35. Une (toute) dernière chose

36. PhoneGapbuild