Tirer parti des périphériques mobiles dans une application web : qui a dit qu’il fallait coder plusieurs versions natives ?

  • Published on
    24-May-2015

  • View
    2.298

  • Download
    0

Embed Size (px)

DESCRIPTION

Le web mobile est en train dexploser, dautant que les principaux priphriques proposent dsormais de vrais navigateurs, de liPhone Androd, de Mimo PalmOS, et mme les nouveaux Blackberry. Sil est dj bien dexploiter des feuilles de style mobiles pour adapter lexprience utilisateur, on souhaite souvent accder aux capacits du priphrique (golocalisation, vibreur, acclromtre) et offrir une exprience globale aussi native que possible. Il nest pas pour autant ncessaire de dvelopper des versions natives distinctes ! Des frameworks existent pour un dploiement universel, et cerise sur le gteau : a se passe en JavaScript ! Cet atelier vous fera faire un tour dhorizon des principaux frameworks actifs, exemples et dmonstrations lappui.

Transcript

<ul><li> 1. TIRER PARTI DES PRIPHRI- QUES MOBILES DANS UNE APPLICATION WEBQui a dit quil fallait coder plusieurs versions natives?Christophe Porteneuve @ Paris Web 2010 </li></ul> <p> 2. LE WEB MOBILE En passe de foutre sa claque au web desktop 3. Les applis natives? Pas besoin pour L&amp;Fsimilaire au natif (CSS + JS, les gars! Et iUI, Jo, SenchaTouch) Golocalisation (fournie par le navigateur) Sons (HTML5 pawa) Stockage persistent ct client (localStorage, Web Storage,Web SQL Database, Lawnchair, PersistJS) Notications push avec lappli ouverte (Web Sockets) 4. En revanche, besoin des applisnatives pour Contacts Envoi de SMS/MMS Enregistrement de son/vido Photos (prise, modication et accs bibliothque) Acclromtre/ Magntomtre / Vibreur Notications push avec lappli ferme Dune manire gnrale, les capacits du priphrique 5. 4 Approches Appli 100% web Appli 95% web Appli native base HTML+CSS+JS: hybride Appli native base SDK plate-forme: 100% native 6. Applis 100% web HTML permet la structure quon veut CSSpermet laspect quon veut JS permet le comportement quon veut Ona la golocalisation Ona le son Pourquoichanger? 7. 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 8. Un mot sur CSS Media Queries// http://www.w3.org/TR/css3-mediaqueries/ // La CSS entire : // Fragment dans une CSS :@media screen and (min-device-width: 800px) {} Une vraie dmo concrte quelle est bien En natif sur Saf3+, FF3.5+, Chrome, Opera 7+, IE9+ Utilisablesur Saf2+, FF, Chrome, Opera 7+, IE5+ avechttp://code.google.com/p/css3-mediaqueries-js 9. Web mobile : souvenez-vous JS va moins vite (voire beaucoup moins vite!) La bande passante est plus petite Le cache est trs slectif (limites de taille, etc.) Ya pas de mouseover / mouseout / :hover Mais on a (en gnral) HTML5, CSS3, DOM2, SVG 10. Frameworks JS pour le mobile Onoublie Prototype, jQuery, Dojo, YUI, MooTools, ExtJS XUI ZeptoJS iUI Jo, Wink, Sencha Touch Et en complment, Lawnchair, PersistJS, Socket.IO 11. 100% web: pour/contre Avantages Quedes choses quon aime dj Dveloppementdans ton navigateur! Pas dApp Stores, de validations, de dploiement Inconvnients Pas daccs la majorit des capacits des priphriques 12. Applis 95% web Lorsque les technos web sufsent laspect, mais que lecomportement requiert 1+ fonctions du priphrique Cas les plus frquents: Noticationspush Vibreur Acclromtre 13. 95% web: les outils Les mmes que pour le 100% web plusles SDK natifs ou leur enrobage uni (voirapproche suivante) 14. 95% web: pour/contre Avantages Presque tous ceux du 100% web Accs toutes les capacits des priphriques Inconvnients App Stores, soumission + acceptation, dploiement, etc. Il faut se farcir les diffrentes plates-formes cibles 15. Applis natives basesHTML+CSS+JS: hybrides Le priphrique est cens faire partie intgrante delexprience utilisateur quon recherche Mais ct UI, les technos web sufsent toujours nos besoins. Besoins typiques: Manipulationdimages (prise de photo, accs albums) Prisede son (chat audio, identication de musique) Accs au carnet dadresses 16. Hybrides: les outils Phonegap Titanium Mobile Unify 17. Phonegap APIJavaScript unie, accessible direct dans tes pages Fournit un accs aux capacits locales du priphrique Camera / Contact / Device / Network / Notication / iPhone, Android, webOS, Symbian, Blackberry, WP7(bientt) Fait par Nitobi. Open-source. Sur Github. 18. Titanium Mobile APIJavaScript unie, mais pas dans les pages directement Fournit un accs aux capacits locales du priphrique Camera / Contact / Device / Network / Notication / iPhone, Android Fait par Appcelerator. Mix OSS/commercial. 19. 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 rfrenc encore) 20. Un mot sur les SDK Mais comme cest trop super chiant ! Le simulateur Android met 3 plombes dmarrer Le SDK Blackberry ne tourne que sur Windows (?!) Le SDK webOS ncessite une VM VirtualBox (bon) Et puis simulateur priphrique! 21. mais patience! build.phonegap.com En ligne, gratuit Tules ton www/, ils te sortent ton appli package pour chaque plate-forme prise en charge! Sortie prvue n novembre 2010 apparat.io Mme principe, sortie thorique octobre 2010 (ahem) 22. Hybrides: pour/contre Avantages Sion se dbrouille bien, on code son appli une seule fois, eton la dploie sur lensemble des plates-formes prises encharge! Inconvnients Ilfaut quand mme installer/congurer tous les SDK et outilsassocis 23. Applis 100% natives On utilise le SDK natif de la plate-forme, son langage, son API Ona accs lintgralit des API de la plate-forme, donc onpeut proposer une exprience aussi riche et native quonle souhaite. 24. 100% natives: les outils Bin, les SDKs, quoi (tous gratuits) : iOS= Xcode (excellentes docs) + iPhone DeveloperProgram pour pouvoir dployer sur priph./store ($99/an) Android = Eclipse + Android SDK webOS= SDK/PDK (bas Java + JS) Symbian = Aptana + SDK Blackberry = Eclipse + SDK (mais que Windows !) 25. 100% natives: pour/contre Avantages Onpeut utiliser la totale des fonctions du SDK et dupriphrique On garantit (si on veut) un L&amp;F natif Inconvnients On doit apprendre lAPI (voire un langage), et parfois payerpour avoir le droit de dployer (Apple/iOS, $99/an). 26. En rsum100%95%100%Hybrideweb webnatif browsers + browsers + Dv.browsers EDIEDI/outils EDI/outils browsers + browsers +Testsbrowserssim./priph. sim./priph. sim./priph. duplication Multi-PFuniversel assez facile assez faciledeffortDistrib. App Stores App Stores App Storespas besoin! (mais pas souvent) 27. Il est plus que temps! Laconsultation web sur les mobiles / tablettes / etc. est entrain dexploser celle sur desktop. Utiliserintelligemment les capacits du priphriques permetdes passerelles sympa (ralit augmente, media blogging, geoblogging jusquo sarrteront-ils?) Toutesles technos sont l, utilisables pour la grosse majoritdu march des smartphones! Allez-y, bordel! 28. Merci. @porteneuve @gitattitudetdd@tddsworld.com http://slideshare.net/tdd </p>