jQuery mobile / PhoneGap : contenus dynamiques client-side

jQuery mobile / PhoneGap

Contenus dynamiques client-side

Nicolas Gans

Formateur Flash / AS3 / AIR / jQuery / jQuery mobile / PhoneGap

www.regart.net

@nicolasgans

Introduction

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 ?

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, jQuery Mobile

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 !

Plate-formes supporté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.

Plate-formes supportées

• Apple iOS (iPhone, iPod touch 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 Kindle et Fire• Les navigateurs de bureau comme Chrome, FF, Safari,

IE et Opera

Pour une liste complète, voir http://jquerymobile.com/gbs/

Qu’est-ce qu’une web app ?

• Une web app est 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.

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.

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’Android Market.

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

Architecture de l'application

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>

</div>

index_01.html

Architecture multipage VS pages séparées

• Multipage : un document HTML unique contient toutes les pages JQM.

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.

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.

Exemple

Chargement JSON et génération d'une listview et de pages

App Paris Culture

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.

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…

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.

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", "pagebeforeshow"…

• Lequel choisir pour injecter notre contenu ?

• Réponse : "pageinit" ! Equivalent du ready() de JQ

JSON est ton ami

• JSON : JavaScript Object Notation. Format de données textuel, générique, dérivé de la notation des objets ECMAScript.

• Deux types d'éléments structurels :

– Ensemble de paires nom/valeur (Object)

– Listes ordonnées de valeurs (Array)

• Facile à utiliser, surtout avec JS et JQ !musees.json

JSON est ton ami

• Chargement JSON avec jQuery :

main.js

• Simple, non ?

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 ?

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 :

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…

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

Méthode ‘refresh’

Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

• Erreur levée si on appelle la méthode refresh() AVANT la diffusion de l’événement ‘pageinit’ (page jamais appelée).

• SOLUTION :

– Attendre le ‘pageinit’.

– Appeler la méthode ‘page()’ sur l’élément page qui va recevoir le contenu > force l’initialisation.

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

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.

Tips et conclusion

TIPS !

• Si app native charge du contenu sur votre serveur : utiliser URLs absolues !

• Chargement AJAX inter-domaine (crossdomain) : Le chargement AJAX sur un serveur distant est interdit. Les solutions existent (JSONP, proxy...).

• PhoneGap : whitelist iOS = domaines autorisés pour l’application.

• Gestion des hash dans la barre d’adresse : voir data-url.

MERCI ;)

www.regart.net

@nicolasgans

Une (toute) dernière chose

PhoneGap build