NDC London 2013 – D2 – Christian weyer – html5,angular and phonegap

Il faut commencer par rappeler l’importance d’une application native: avoir accès aux fonctions natives du téléphone, de meilleures performances, déploiement sur un store…
A l’inverse les applications pures mobiles, sont à priori plus souples mais plus restraintes. Une meilleure approche aujourd’hui semble être une approche hybride.

Si on regarde aujourd’hui html5, il s’agit d’une vrai plateforme complète qui s’enrichi de jours en jours.

Pour cela, on doit décider de ce qu’on veut comme interface. Soit un look and feel identique partout soit une approche native liée au système que l’on targette. On peut aussi choisir de faire quelque chose de dédié complètement différent afin de ne pas avoir à coller à l’une des deux précédentes approches.

Note: s’en suit une prestation rapide de angular, bootstrap que je zappe ici car sans intérêt.

Quelques découvertes sympa au niveau des frameworks css qui s’integrent de mieux en mieux avec angular: chocolatechip-ui, lungo.js avec lungo-angular-bridge ou ionic.js qui s’integrent tous les deux très bien avec angular. L’interet de ça est de garder entièrement le template html et de ne switcher que le css : par ex bootstrap pour le desktop et iconic pour le mobile.

Nous arrivons à phone gap. Démos d’utilisation très simple des commandes de base.

Petit note sur la demo, sur le projet Xcode généré il suffit de faire une petit modification sur le fichier config.xml pour définir la page de démarrage d’une part et la liste des serveurs authorises (que l’on passe à * pour le dev).

Il faut noter aussi qu’il y a aujourd’hui des plugins pour accéder aux fonctions natives sous forme de directives angular afin de profiter simplement du meilleur des deux mondes.

Pour le debug, on note aussi que l’on peu debugger directement le code d’une webview iOS (ce qui portera donc notre code html5 dans l’appli native phonegap) dans safari après avoir connecté le téléphone.

Quelques tops supplémentaires:
- utiliser fastclick.js pour éviter les 300ms de delais normales lies au contexte click touch swippe
- fx pour le multigesture : hammerjs
- tester sur des vrais devices!

Note: Pour ceux qui ont essayé tout cela il y a quelques temps déjà et en avaient été déçus (comme moi :-), les dernières version de phonegap -3.1- fonctionnent vraiment bien et son fiables.

20131205-145202.jpg

 

Tagged with: , , , ,
Posted in Event
One comment on “NDC London 2013 – D2 – Christian weyer – html5,angular and phonegap
  1. Intéressant tout ça, merci pour le partage !

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>