Publié par

Il y a 7 ans -

Temps de lecture 8 minutes

QCon London – Développement Web mobile, Javascript et HTML5

logo_qcon.png

Avec l’émergence de la mobilité dans notre quotidien, ce sont également de nouveaux besoins informatiques qui sont apparus dans nos SI. Au début, la problématique était simple puisque la plateforme iOS était sans concurrence. L’arrivée de nouveaux challengers a multiplié les nouveaux développements, et la fragmentation des développements est rapidement devenue un problème sérieux à adresser, voire même un véritable enjeu budgétaire: la fragmentation coûte cher et de prime abord ne semble pas toujours rentable à traiter. Certaines entreprises font ainsi le choix de supporter de nombreuses plateformes, tandis que d’autres ne supportent que le strict minimum, c’est à dire iOS et Android, voire même des fois uniquement iOS.

Avec l’avènement d’HTML5 et le bouillonnement actuel du web, des solutions innovantes ont commencé à pointer le bout de leur nez. Sont apparus tout d’abord des toolkits mimiquant l’interface utilisateur d’iOS, puis sont arrivés progressivement des frameworks plus ambitieux ayant pour objectif d’adresser ce problème de fragmentation. Le champion en la matière s’appelle jQueryMobile, il supporte la quasi totalité des plateformes mobiles à ce jour, et ses principaux concurrents sont Sencha Touch et Titanium d’Appcelerator. Même si ces outils sont relativement récents, ils permettent d’ores et déjà de développer des solutions sérieuses basées sur des technos web, et des nouveaux outils innovants fleurissent cette année à un rythme effréné (Rhodes, Jo, Wink, Dojo Mobile, Kendo, M Projecttrigger.io), ce qui montre une furieuse tendance à vouloir trouver des solutions à cette fragmentation via des standards déjà maîtrisés.

Il faut cependant reconnaître que ces idées sont nouvelles, et de nombreux gaps viennent compliquer légèrement les choses. A commencer par le fait que le parc mobile actuel propose des navigateurs plus ou moins matures, dont le support d’HTML5 varie de façon non négligeable selon la version de l’OS et le type de plateforme. Bien que les moteurs de rendu et de JavaScript des navigateurs mobiles évoluent de manière incroyable, tout comme leur matériel d’ailleurs, on est loin des performances natives de ces combinés. Il suffit pour cela de regarder la fluidité d’iOS pour s’en convaincre. Cela est toutefois à mettre dans la balance avec un univers web qui évolue (très) rapidement et qui chaque jour abat des barrières.

Certains projets tels que PhoneGap, proposent d’ailleurs de tenter d’abattre certaines barrières techniques qui démarquaient jusqu’à présent très nettement la limite des applications web par rapport aux applications natives. Pour rappel, PhoneGap est une sorte de coquille adaptée pour chaque plateforme permettant de transformer une application web standard, en une application hybride composée d’une WebView et d’une API JavaScript permettant d’accéder aux fonctionnalités natives du téléphone.

L’avantage de cette solution est non seulement de repousser les frontières entre applications web et application natives, mais également de permettre de proposer des applications sur les markets développées à partir de technologies web. Dans ce registre Titanium se distingue légèrement, puisque cet outil permet de générer des applications complètement natives à partir de solutions web.

Pour un certain nombre de nos lecteurs, ces informations peuvent sembler du dit et redit, c’est pour cela que nous allons passer à certains aspects plus poussés présentés lors de différentes sessions à QCon Londres.

Mobile, HTML5 and the cross-platform promise

Maximiliano Firman, Nokia Developer Champion et auteur de nombreux livres sur la mobilité, dont HTML5 Mobile et jQueryMobile chez O’Reilly, a tout d’abord animé la session: Mobile, HTML5 and the cross-platform promise, dans laquelle il présente une vue d’ensemble sur HTML5 et les plateformes mobiles actuelles. 

Au cour de cette session, Maximiliano nous rappelle qu’HTML5 est avant tout une ombrelle technologique regroupant de nombreuses évolutions, qu’elles soient liées à HTML ou bien à JavaScript, et que son support n’est que partiel même sur les plateformes desktop. Les plateformes mobiles ont cependant l’avantage d’être récentes et de ne pas se traîner de navigateur en total décalage avec le support des technologies les plus innovantes.

Les développements mobiles Web étant encore assez nouveaux, la maturité des outils de développement n’est pas forcement au rendez-vous et la débrouillardise fait souvent partie de la trousse à outil du développeur. Cependant des techniques et des pratiques commencent à émerger. Ainsi, il est conseillé de développer le plus longtemps possible sur les navigateurs desktop de type Webkit, dont les moteurs de rendu sont de la même famille que ceux des navigateurs iOS et Android, pour bénéficier non seulement d’un rendu et d’un comportement proche, mais aussi des outils de développement et de debugging de ces navigateurs desktop (Chrome et Safari en l’occurrence).

Il vous faudra toutefois passer à un moment ou à un autre à du test sur device, pour cela vous avez au choix l’usage des émulateurs/simulateurs, mais leurs capacités restent limitées. Vouspouvez également tester directement sur matériel réel, seulement vous risquerez de vous trouver démuni lorsque vous rencontrerez vos premiers problèmes bloquants, tels qu’un écran blanc au lancement de votre application, et la popup alert() ne vous sera pas d’une grande utilité.

Pour faciliter le debugging, Maximiliano propose d’utiliser iwebinspector, qui est un outil de débuggage pour application Web mobile présenté sous la forme d’une intégration entre le navigateur web et le simulateur iOS. Très pratique, il permet d’accéder à l’arbre DOM, à la console, ainsi qu’à différentes fonctionnalités disponibles habituellement via les debugger Chrome et Safari. Cependant, ce type d’outil ne permet pas de poser de breakpoint, puisque l’inspecteur n’accède pas aux fonctionnalités core du navigateur.

Par la suite, Maximiliano nous présente un outil sorti le jour même de la session : Apache Shadow. Cet outil, une petite merveille technique, permet de coupler des devices mobiles avec son ordinateur et d’effectuer de la navigation synchronisée via Chrome sur différents les devices via l’installation d’un agent sur chacun d’eux. L’outil propose également de l’inspection de ressources distantes comme cela est proposé dans l’outil iwebinspector.

En fin de session, Maximiliano nous renvoit vers le site mobilehtml5.org qui liste l’ensemble des fonctionnalités HTML5 et nous renseigne sur le support de chacune de ces fonctionalités au sein des différents navigateurs mobiles.

Cross-Platform Mobile Apps with HTML, JavaScript and PhoneGap

Plus tard dans la journée de mercredi, Christophe Coenraets, évangéliste Adobe, s’occupant des promouvoir les développements mobiles basés sur les technologies HTML5 & PhoneGap, a proposé également une session ayant pour objectif de faire le point sur les outils disponibles pour aider à développer des applications mobiles avec les technologies Web, et en particulier PhoneGap et jQueryMobile.

Christophe nous rappelle dans un premier temps que la société développant PhoneGap (Nitobi) a été rachetée par Adobe, et que le branding PhoneGap correspond maintenant plus à un set d’outils en ligne, alors que le projet originel a été légué à la fondation Apache et renommé Apache Cordova.

Lors de cette session, Christophe nous présente l’usine de build PhoneGap que vous pouvez retrouver à l’url suivante: build.phonegap.com. Cette usine logiciel a pour particularité d’être disponible au format SaaS et vous propose de builder vos applications mobiles sans avoir à installer et maîtriser les SDK des principales plateformes mobiles telles que iOS, Android ou bien encore BlackBerry. On pourra au passage noter l’absence du support de WindowsPhone qui viendra sûrement avec le temps.

Le principe de la plateforme est simple puisqu’il suffit de pousser son projet PhoneGap dans un repo Git pour que cela déclenche un build qui construira et mettra à disposition les différents livrables via un direct download ou bien un QRCode à flasher. L’usine de build PhoneGap propose différentes tarifications dont certaines sont sans coût d’accès.

Les outils mis à disposition sur le site PhoneGap ne s’arrêtent pas là, puisqu’un debugger très similaire à iwebinspector est disponible à l’adresse: debug.phonegap.com. Il fonctionne avec n’importe quel navigateur et site web à partir du moment où vous ajoutez un JavaScript à votre page web qui se chargera de communiquer avec le backend. Cet outil est basé sur un outil open-source nommé Weinre. Si l’explication avancée est correcte, Weinre est embarqué justement dans l’outil Adobe Shadow fraîchement sorti en version beta.

Pour les plus intéressés, sachez qu’il n’existe pas de norme aboutie de protocole de debuggage distant de page Web, ce qui bien utile dans le cadre de développements mobiles HTML5. Rassurez-vous, le sujet est étudié  de près par différents acteurs. Une norme de protocole natif pourrait bien faire son apparition assez rapidement et permettre ainsi de débugger en remote vos applications Web en ayant la possibilité de poser des breakpoints et d’accéder aux informations du moteur Javascript. Pour l’heure, seule une inspection des pages est possible et cela est fait via des communications Ajax entre la page inspectée et le navigateur distant.

Pour conclure, même s’il est évident que le développement mobile Web n’est pas aujourd’hui complètement mûr et outillé, il est tout à fait possible de développer des applications sérieuses avec les technologies Web, et l’outillage est en train de mûrir à grande vitesse. Il faut s’attendre à voir, les développements hybrides à base de technologies Web et natives évoluer très fortement ces prochaines années, voire même ces prochains mois avec l’objectif d’adresser la fragmentation des plateformes et ainsi réduire les coûts et les risques.

Liens utiles:

Publié par

Publié par Alexis Kinsella

Alexis Kinsella est un consultant Xebia passionné aussi bien par les problématiques frontend (web et mobile) que backend. Après de longues années passées sur les technologies Java, Alexis a fait d'iOS, Node.js et du Cloud ( AWS Certified Solutions Architect - Associate ) ses nouveaux terrains d'expérimentation lui permettant d'explorer les architectures web et mobiles ainsi que leurs problématiques associées.

Commentaire

4 réponses pour " QCon London – Développement Web mobile, Javascript et HTML5 "

  1. Publié par , Il y a 7 ans

    « Il suffit pour cela de regarder la fluidité d’iOS pour s’en convaincre »

    si tu utilises ‘translate3d’ pour les transitions sous iOS tu auras un rendu natif des animations, translate3d est accelere materiellement en utilisant le GPU

  2. Publié par , Il y a 7 ans

    A vrai dire ce commentaire était plus destiné à illustrer les capacités de certains combinés mobiles :)

    Après avoir creusé pas mal des problèmes de performance avec PhoneGap, il s’avère que les WebView ne sont pas forcement optimisées de la même manière que les navigateurs disponibles sur certains téléphones. Ce n’est pas forcement le cas de l’iPhone, mais plutôt des machines Android.

    Les performances du navigateur Android peuvent varier fortement de combiné en combiné, mais pas uniquement à cause du matériel. Entre autre, les roms stock d’Android proposent un navigateur bien moins optimisé que sur certaines roms de constructeurs ou certaines rom custom (Il suffit de tester différentes roms sur un même combiné pour s’en rendre compte).
    Pire que cela, la WebView Android visiblement ne propose pas toutes les optimisations du navigateur par défaut, et pour ne rien arranger, la librairie phoneGap configure elle-même la webview d’une certaines manière (Exemple: La manière dont le background est repeint). Par ailleurs, le service PhoneGap Build ne laisse pas tuner ce genre de détail, et cela peut avoir un impact négatif très fort sur les performances dans certaines conditions.

    En ce qui concerne l’accélération matériel, le navigateur n’en tire parti que partiellement. La gestion des box-shadow CSS est très fortement déconseillée sur Android pour le moment, car très mal optimisée dans le navigateur par défaut Android.

    En résumé, pour les développeurs d’application mobiles Android, pour le moment, il peut être intéressant de désactiver les box-shadow, ainsi que de customiser la configuration PhoneGap. Cette dernière optimisation est structurante puisqu’elle prive le développeur du service phoneGap Build… Mais cela peut s’avérer pour le moment nécessaire si vous voulez avoir un contrôle maximum des performances sur le navigateur.

    Dernier point intéressant, sur un même combiné Android, Opéra se comporte bien mieux au niveau des performances du rendu, donc si vous avez des soucis de perf en tant qu’utilisateur et que vous n’avez pas accès à Google Chrome (Rom pré 4.0), vous pouvez installer Opéra mobile ;) A noter que le rendu n’est pas non plus parfait puisque le résultat visuel n’est pas celui parfois attendu …

  3. Publié par , Il y a 7 ans

    pour resumer tes propos: on est sur la bonne voie, mais la peinture n’est pas encore fraiche :)
    encore 1 annee et on devrait y etre: optimisation des performances des webviews et des navigateurs sur tous les OS, et CPUs plus puissants

    un nouvel exemple recent: le nouvel ipad est moins performant qu’un ipad 1 sur certaines animations css a cause des box-shadow: http://cubiq.org/webkit-weird-box-shadow-bug-with-fix

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.