Les outils
Librairies/frameworks "HTML5 mobile"
-
Librairies
-
Frameworks
- jQTouch / jQuery Mobile
- Sencha Touch
App "natives"
jQuery Mobile
- Vous connaissez déjà
même philosophie/synthaxe que jQuery
- Bénéficie de toutes les API jQuery (AJAX, Sizzle, etc...)
- Template de CSS pour customiser l'UI
- S'appuie sur le markup existant
ajoute des classes CSS, mais ne créé pas de noeud
- Pauvre en composant d'UI
- Pour version mobile de site web (!= webapp)
Sencha Touch
-
Même philosophie qu'ExtJS
- Orienté application
- Javascript Orienté Objet
- S'appuie sur "Ext platform"
MVC, Accès aux données, Collection, etc...
- Customisable
utilise compass pour générer des thèmes
- Riche en composants d'UI
Panel, List, Carousel, DatePicker, etc...
- Créé le DOM
- Lourd !!!
MVC
app.js => point d'entrée
routes.js => déclaration des routes (deep linking)
views/ => Composant d'UI (Demos Sencha)
models/ => Store / Model
Intégration avec phonegap
Une bonne solution pour s'affranchir des temps de chargement
- Open source
- Fourni une "webview"
- Fourni une API pour accéder au fonction natives
- Perfomance similaire au navigateur (temps de chargement en moins)
Ce qui tue les perfs
- Taille du DOM
- Profondeur du DOM
- Effet CSS 3 (box shadow / gradient)
- Evitez les setTimeout
préférez les "transform" (CSS3)
- Bindez les événements "touch" (non click)
Des aides précieuses
-
Ripple
Plugin Chrome - permet d'afficher l'appli comme sur un device
-
WEIRNE
Remote console / inspecteur de DOM
-
DOM Monster
Statistiques et recommandations d'optimisation des pages HTML
-
Mobitest
Mesure la vitesse de rendition d'une page
Rien ne vaut les vrais devices !
Conclusion
jQuery Mobile => Pour des versions mobiles de sites internet
- Facile à appréhender
- Prometteur
Sencha Touch => Pour des applications
Dans tous les cas => /!\ Performances
