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 Project, trigger.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:

• Slides des présentations:
• Mobile, HTML5 and the cross-platform promise
• Cross-Platform Mobile Apps with HTML, JavaScript and PhoneGap