TIRER PARTI DES PÉRIPHÉRI-QUES MOBILES DANS UNE
APPLICATION WEBQui a dit qu’il fallait coder plusieurs versions natives ?
Christophe Porteneuve @ Paris Web 2010
LE WEB MOBILEEn passe de foutre sa claque au web desktop…
Les applis natives ?Pas besoin pour…
• L&F similaire au natif (CSS + JS, les gars ! Et iUI, Jo, Sencha Touch…)
• Géolocalisation (fournie par le navigateur)
• Sons (HTML5 <audio> pawa)
• Stockage persistent côté client (localStorage, Web Storage, Web SQL Database, Lawnchair, PersistJS…)
• Notifications « push » avec l’appli ouverte (Web Sockets)
En revanche, besoin des applis natives pour…
• Contacts
• Envoi de SMS/MMS
• Enregistrement de son/vidéo
• Photos (prise, modification et accès bibliothèque)
• Accéléromètre / Magnétomètre / Vibreur…
• Notifications « push » avec l’appli fermée
• D’une manière générale, les capacités du périphérique
4 Approches
• Appli 100% web
• Appli « 95% web »
• Appli native basée HTML+CSS+JS : « hybride »
• Appli native basée SDK plate-forme : 100% native
Applis 100% web
• HTML permet la structure qu’on veut
• CSS permet l’aspect qu’on veut
• JS permet le comportement qu’on veut
• On a la géolocalisation
• On a le son
• Pourquoi changer ?
100% web : les outils
• HTML5, CSS3 (dont Transforms, Animations, Transitions), JS
• CSS Media Queries
• XUI, ZeptoJS
• Jo, Wink, Sencha Touch
• Web Storage, Web SQL Database, Lawnchair, PersistJS
• Web Sockets, Socket.IO
Un mot sur CSS Media Queries
• Une vraie démo concrète qu’elle est bien
• En natif sur Saf3+, FF3.5+, Chrome, Opera 7+, IE9+
• Utilisable sur Saf2+, FF, Chrome, Opera 7+, IE5+ avechttp://code.google.com/p/css3-mediaqueries-js
// http://www.w3.org/TR/css3-mediaqueries/
// La CSS entière :<link rel="stylesheet" type="text/css" href="…" media="screen and (min-device-width: 800px)" />
// Fragment dans une CSS :@media screen and (min-device-width: 800px) { …}
Web mobile : souvenez-vous…
• JS va moins vite (voire beaucoup moins vite !)
• La bande passante est plus petite
• Le cache est très sélectif (limites de taille, etc.)
Y’a pas de mouseover / mouseout / :hover
• Mais on a (en général) HTML5, CSS3, DOM2, SVG…
Frameworks JS pour le mobile
• On oublie Prototype, jQuery, Dojo, YUI, MooTools, ExtJS…
• XUI
• ZeptoJS
• iUI
• Jo, Wink, Sencha Touch
• Et en complément, Lawnchair, PersistJS, Socket.IO…
100% web : pour/contre
• Avantages
• Que des choses qu’on aime déjà
• Développement dans ton navigateur !
• Pas d’App Stores, de validations, de déploiement…
• Inconvénients
• Pas d’accès à la majorité des capacités des périphériques
Applis « 95% web »
• Lorsque les technos web suffisent à l’aspect, mais que le comportement requiert 1+ fonctions du périphérique
• Cas les plus fréquents :
• Notifications « push »
• Vibreur
• Accéléromètre
95% web : les outils
• Les mêmes que pour le 100% web…
• …plus les SDK natifs ou leur enrobage « unifié » (voir approche suivante)
95% web : pour/contre
• Avantages
• Presque tous ceux du 100% web
• Accès à toutes les capacités des périphériques
• Inconvénients
• App Stores, soumission + acceptation, déploiement, etc.
• Il faut se farcir les différentes plates-formes ciblées
Applis natives baséesHTML+CSS+JS : « hybrides »
• Le périphérique est censé faire partie intégrante de l’expérience utilisateur qu’on recherche
• Mais côté UI, les technos web suffisent toujours à nos besoins.
• Besoins typiques :
• Manipulation d’images (prise de photo, accès albums…)
• Prise de son (chat audio, identification de musique…)
• Accès au carnet d’adresses
Hybrides : les outils
• Phonegap
• Titanium Mobile
• Unify
Phonegap
• API JavaScript unifiée, accessible direct dans tes pages
• Fournit un accès aux capacités locales du périphérique
• Camera / Contact / Device / Network / Notification / …
• iPhone, Android, webOS, Symbian, Blackberry, WP7 (bientôt)
• Fait par Nitobi. Open-source. Sur Github.
Titanium Mobile
• API JavaScript unifiée, mais pas dans les pages directement…
• Fournit un accès aux capacités locales du périphérique
• Camera / Contact / Device / Network / Notification / …
• iPhone, Android
• Fait par Appcelerator. Mix OSS/commercial.
Unify
• En gros, Phonegap + qooxdoo + SASS
• Maintenu par Deutsche Telekom.
• Open-source depuis JSConf.eu 2010. Sur Github.
• http://unify.github.com/unify/ (pas bien référencé encore…)
Un mot sur les SDK…
• Mais comme c’est trop super chiant !
• Le simulateur Android met 3 plombes à démarrer
• Le SDK Blackberry ne tourne que sur Windows (?!)
• Le SDK webOS nécessite une VM VirtualBox (bon…)
• Et puis simulateur ≠ périphérique !
…mais patience !
• build.phonegap.com
• En ligne, gratuit
• Tu files ton www/, ils te sortent ton appli packagée pour chaque plate-forme prise en charge !
• Sortie prévue fin novembre 2010
• apparat.io
• Même principe, sortie théorique octobre 2010 (ahem…)
Hybrides : pour/contre
• Avantages
• Si on se débrouille bien, on code son appli une seule fois, et on la déploie sur l’ensemble des plates-formes prises en charge !
• Inconvénients
• Il faut quand même installer/configurer tous les SDK et outils associés…
Applis 100% natives
• On utilise le SDK natif de la plate-forme, son langage, son API
• On a accès à l’intégralité des API de la plate-forme, donc on peut proposer une expérience aussi riche et « native » qu’on le souhaite.
100% natives : les outils
• Bin, les SDKs, quoi (tous gratuits) :
• iOS = Xcode (excellentes docs) + iPhone Developer Program pour pouvoir déployer sur périph./store ($99/an)
• Android = Eclipse + Android SDK
• webOS = SDK/PDK (basé Java + JS)
• Symbian = Aptana + SDK
• Blackberry = Eclipse + SDK (mais que Windows !)
100% natives : pour/contre
• Avantages
• On peut utiliser la totale des fonctions du SDK et du périphérique
• On garantit (si on veut) un L&F natif
• Inconvénients
• On doit apprendre l’API (voire un langage), et parfois payer pour avoir le droit de déployer (Apple/iOS, $99/an).
En résumé…
100%web
95%web
Hybride 100% natif
Dév. browsers browsers + EDI/outils
browsers + EDI/outils
EDI
Tests browsers browsers + sim./périph.
browsers + sim./périph.
sim./périph.
Multi-PF universel assez facile assez facile duplication d’effort
Distrib. pas besoin ! App Stores(mais pas souvent)
App Stores App Stores
Il est plus que temps !
• La consultation web sur les mobiles / tablettes / etc. est en train d’exploser celle sur desktop.
• Utiliser intelligemment les capacités du périphériques permet des passerelles sympa (réalité augmentée, media blogging, geo blogging… jusqu’où s’arrêteront-ils ?)
• Toutes les technos sont là, utilisables pour la grosse majorité du marché des smartphones ! Allez-y, bordel !
@porteneuve
@gitattitude
http://slideshare.net/tdd
Merci.
Recommended
