Accueil > Divers, Mobile > Sexy, le développement Web Mobile ?

Sexy, le développement Web Mobile ?

Le jeudi 19 Avril 2012, j’ai eu la chance de pouvoir présenter un « quickie » (présentation qui dure environ une quinzaine de minutes) à la première édition de Devoxx France, qui a lieu au Mariott Hotel à Paris.

Je vous propose ci-dessous une synthèse de ma présentation « Sexy, le développement Web mobile ? »

Commençons par un constat :

On estime que la moitié des connexions à l’Internet se feront à travers nos smartphones d’ici 2014. En début d’année, Twitter a déclaré que 30% des tweets se font à travers les smartphones, et 18% uniquement via le site Web Mobile.

Ainsi, il est devenu important, et même vital, d’être visible et présent sur le monde de la mobilité. On ne peut s’y tromper : 70% des entreprises ont soit une application mobile, soit une application en cours de développement ou envisage d’en avoir une.

A l’heure actuelle, les entreprises ont le choix principalement entre

  • le développement d’applications natives (pour iOS, Android, Blackberry),
  • le développement Web Mobile (se basant sur les technologies Web modernes comme HTML5 et CSS3)
  • ou encore le développement Web Mobile hybride (qui fait le pont entre les deux univers précédents, le framework phare étant Cordova, le nouveau nom de PhoneGap).

Il existe d’autres approches, mais elles restent « exotiques ».

Quels sont les avantages du natif ?

Le développement natif permet tout d’abord, l’accès aux couches basses  du smartphone (SMS, répertoire, etc.) ce que ne permettent pas les autres approches.

Chaque plateforme (iOs, Android, …) propose ensuite un ensemble d’outils / environnements de développement propre facilitant la conception et la réalisation d’applications très performantes.

Enfin l’approche native offre la possibilité de publication de son application au travers des « markets » (Apple store, android market) permettant ainsi sa diffusion à large échelle.

Par contre cela implique de développer la même application pour chaque plateforme cible, soit à minima 3 versions différentes (Android, iOs et BBY) afin d’adresser 95% du marché des smartphones et tablettes, ce qui coûte bien évidemment du temps et de l’argent, et amène le problème des ressources.

En effet, pour le monde Android et Blackberry, un profil de développement avec des compétences Java pourra prendre en main rapidement ces environnements, tandis que poir iOS, les compétences restent rares, et la montée en compétence est reconnue comme longue et douloureuse.

            

Le web mobile

Premier avantage : plusieurs plateformes sont ciblées ce qui permet une réduction des coûts. Il y aura cependant des adaptations à faire, notamment en ce qui concerne les IHM et le code. Mais étant donné qu’on est dans le monde du Web, on est habitué à faire des adaptions, pour les différents navigateurs et leurs différentes versions. Ainsi, on peut toujours espérer avoir un code commun à plus de 95%.

Les performances du Web Mobile sont vraiment correctes. Quand j’ai écrit ma première application il y a de cela 2 ans, j’ai été bluffé par la vélocité (je m’attendais à ce que ce soit très lent, car j’avais un très grand nombre de fichiers JavaScipts). Grâce à HTML5 et CSS3, l’interaction avec le smartphone et l’utilisateur est plutôt bonne, avec une IHM professionnelle (je peux citer le site du New York Times, qui est fait en CSS3 et qui est bluffant).

En revanche, il n’est pas possible de créer des applications nécessitant de hautes performances, comme pour la réalité augmentée. On ne peut pas accéder à toutes les couches basses. Et l’ergonomie n’est pas à 100% en adéquation avec la plateforme (ce qui est normal vu que nous faisons une application pivot).

Pourquoi alors je considère que le développement Web Mobile est sexy ? D’une part, on trouve des moteurs Web modernes et performants (pour être plus précis, on trouve Webkit !). Pour rappel, le premier moteur Web HTML5 se trouvait sur un smartphone, et plus précisément sur un iPhone … en 2007 !! Alors qu’il faudra attendre plusieurs mois encore avant de voir en apparaitre un sur Desktop. La compatibilité HTML5 et CSS3 est très bonne. Il faut juste s’assurer que les fonctionnalités ont été activées. Par exemple, WebSocket n’est pas accessible sous Android alors qu’il l’est sur iOS et Blackberry.

Une communauté de plus en plus forte s’est formée ces dernières années, autour de nombreux sites dédiés à ce sujet, comme html5rocks.com, qui fût le premier site à expliquer HTML5 et à donner des tutoriaux. Je regarde régulièrement ce site qui reste pour moi une bible.

Et tout cela s’articule autour de technologies adaptées et en évolution que sont HTML5 et CSS3. Le terme « évolution » est important ici, car si on va voir sur le site du W3C, ces deux technologiess sont encore en état de brouillon. Pour CSS3, c’est quasi-finalisée. Pour HTML5, de nombreuses fonctionnalités sont proposées de mois en mois. Par exemple, courant 2011, une API a été proposée pour accéder à la liste des contacts du téléphone. Début 2012, une autre proposait de faire vibrer le téléphone. Ainsi, le Web Mobile mute de plus en plus afin de pouvoir mieux s’intégrer à nos smartphones.

          

De plus, il est possible de faire du Web Mobile hybride ! Cela consiste à embarquer nos fichiers HTML5, CSS3 et JavaScript au sein d’un wrapper natif. Cela permet non seulement d’être présent sur les markets, mais aussi de faire un pont entre nos pages Web et le natif. On peut imaginer de pouvoir lister nos SMS sur une page Web en communiquant via JSON au natif qui lui va s’occuper de chercher les dits SMS.

Techniquement, que devons-nous utiliser ?

Pour commencer, on aura besoin d’HTML5, de CSS3 et de JavaScript. Mais il ne faut pas perdre de vue que le W3C propose des fondations ! Ainsi, on ne trouvera pas de base des widgets fancy ou sexy. On va donc utiliser des frameworks JavaScripts adaptés, comme jQuery Mobile de « The Filament Group » (que j’utilise massivement) ou encore la solution payante qu’est SenchaTouch de Sencha Labs.

          

Il existe deux frameworks assez récents qui sont prometteurs, et les deux se basant sur jQuery. Le premier est KendoUI (solution payante) qui propose des widgets assez puissant, basé sur HTML5/CSS3, qui rivalisent vraiment avec ceux de jQuery UI. Il s’adapte également pour le Web Mobile, notamment sur le style d’affichage très proche de la plateforme où le site s’affiche. Ensuite, on trouve Bootstrap, par l’équipe de Github, qui propose un framework léger, simple à utiliser et surtout Design Responsive. Un framework vraiment prometteur.

           

Si on souhaite faire du Web Mobile hybride, on va utiliser un framework comme Apache Cordova (anciennement, PhoneGap), qui propose des enveloppes natives pour de nombreuses plateformes (comme iOS, Android, Blackberry, Windows Phone 7, Bada …) et aussi une API JavaScript permettant d’accéder à une partie des couches basses. Cette API va être fortement enrichie dans sa version 2.0, et il est à noter que ce framework propose un système de plugin. Personnellement, j’ai écrit un petit plugin Android pour dialoguer avec l’application native Twitter, et j’ai pu le faire simplement grâce à cela.

     

Néanmoins, il faut faire attention lorsqu’on utilise le Web Mobile. D’une part, il faut se forger une expérience Web Mobile. Il faut évidemment apprendre de nouvelles technos/frameworks, mais également prendre en compte des problèmes qu’on a l’habitude mettre de côté, comme la taille de l’écran, bien plus petite que nos écrans de bureau (la norme maintenant est 1024 par 768, mais on estime que la prochaine norme sera la taille d’une tablette, voire d’un smartphone), ainsi que le débit du réseau (la 3G ne rivalisant pas avec la fibre d’entreprise).

De plus, il faut s’assurer de l’adéquation entre le besoin et la solution. Si votre client souhaite une ergonomie parfaitement en adéquation avec la plateforme, ou de hautes performances, le Web Mobile n’est pas fait pour vous.

Néanmoins, celui-ci peut répondre à plus de 85% des besoins qu’on peut rencontrer. Ainsi, selon moi, il ne faut pas hésiter à sauter le pas car le Web Mobile à mes yeux a un avenir prometteur et va dans le bon sens. Et je n’hésite pas dire que le développement Web Mobile est sexy !

Vous pouvez consulter les slides de ma présentation sur le lien suivant:

  1. Pas encore de commentaire
  1. Pas encore de trackbacks