Comparaison entre les applications natives et les web apps dans le domaine des Smartphones

Comparaison entre les applications natives et les web apps dans le domaine des Smartphones Chris De Roeck Janvier 2012 Introduction Le smartphone a la cote ces dernières années et les chires concernant la vente de téléphones portables dans le monde entier l'attestent : la tendance est à la hausse. Au troisième trimestre de l'année 2011, la croissance était de 5.6% par rapport aux chires de l'année précédente. Et si l'on se focalise sur les ventes des smartphones, ces téléphones multimédia qui tentent de proposer une alternative aux Iphones, cette augmentation atteindrait plus de 40%. Les smartphones représenteraient quant à eux pas moins de 26% des parts de marché en terme de téléphonie mobile et ce dans le monde entier. 1 Nul ne niera aujourd'hui que les fonctionnalités apportées par cette nouvelle génération de téléphones portables, que l'on en ait une utilité ou non, sont pour le moins révolutionnaires. On peut maintenant passer sa commande Amazon depuis son téléphone portable grâce à une application alors que l'on attend le train ou bien encore consulter la liste des ingrédients nécessaires à la confection d'un plat sur Marmiton directement depuis le supermarché sans avoir à la recopier sur un post-it que l'on risquerait d'égarer facilement entre les rayons. On devient entièrement autonome et de façon permanente si l'on sait où chercher sur la toile. Ces grandes sociétés ont, pour la plupart, le budget susant pour donner à leur entreprise une visibilité optimale dans la jungle des applications. Mais qu'en est-il des plus petits acteurs sur le marché? Comment font-ils pour sortir leur épingle du jeu si le développement d'applications coûte cher? On l'oublie souvent, mais l'apple Store ou l'android Market ne sont pas les deux seules plateformes où l'on peut trouver des applications. Il existe également des applications développées avec des technologies uniquement orientées vers le web qui peuvent rivaliser avec les applications plus "traditionnelles". Dans cet article, je dresserai d'abord un rapide historique des diérentes générations de téléphones portables. Je présenterai et comparerai ensuite, théoriquement d'abord et techniquement ensuite, les deux types d'applications pour 1. Les chires avancés ici proviennent d'une publication du 15 novembre 2011 de la rme spécialisée dans les technologies avancées Gartner Research, Android os rose to account for more than 50 percent of smartphone sales, Novembre 2011, http://www.gartner.com/it/page.jsp?id=1848514. 1

smartphones : les applications natives d'un coté et les web apps de l'autre. Je terminerai en tentant de donner une tendance quant à l'avenir de ces deux technologies. Avant d'entrer dans le vif du sujet et pour éviter toute confusion possible, il est important de dénir ces deux notions qui seront utilisées au cours de cet article. Application native : Il s'agit d'une application pour smartphone qui a été développée pour un système d'exploitation spécique (Android, IOS, Sylmbian, etc), que l'on télécharge habituellement sur une plateforme (Android Market, Apple Store, etc) et qui est destinée à être installée sur l'espace de stockage du téléphone portable. Web application : Il s'agit ici d'une application pour smartphone qui a été développée pour fonctionner à partir de n'importe quel téléphone disposant d'une connexion Internet et d'un navigateur. "For the purposes of this document, the term "Web application" refers to a Web page (XHTML or a variant thereof + CSS) or collection of Web pages delivered over HTTP which use server-side or client-side processing (e.g. JavaScript) to provide an "application-like" experience within a Web browser. Web applications are distinct from simple Web content (the focus of BP1) in that they include locally executable elements of interactivity and persistent state." 2 L'histoire du téléphone portable Depuis les premiers modèles destinés au grand public dans les années 1970, les téléphones portables ont évolué en suivant les tendances et les avancées technologiques. Si non seulement ils se sont anés et allégés, ils ont été dotés d'une incroyable quantité de gadgets et autres fonctionnalités plus ou moins utiles. Parmi cette quantité de téléphones construits jusqu'à ce jour, on pourrait néanmoins subdiviser l'histoire des téléphones portables en quatre grandes époques. Les (trans)portables L'invention du premier téléphone portable est généralement attribuée au Docteur Martin Cooper, directeur du service de recherche chez Motorola en 1973. Ce n'est que dix années plus tard, en 1983, que le premier téléphone portable destiné à être utilisé par le grand public a été construit. Le Motorola DynaTAC 8000X est le premier modèle de cette première vague de téléphones portables qui utilise des signaux analogiques. On désigne souvent cette génération de téléphones comme étant la première. 2. Dénition donnée au terme Mobile Web Application dans la recommandation du W3C, World Wide Web Consortium, Mobile Web Application Best Practices, Décembre 2010, http://www.w3.org/tr/2010/rec-mwabp-20101214. 2

Les GSM Dans les années 1990, la deuxième génération fait peu à peu son apparition. Il s'agit de téléphones utilisant principalement le standard GSM 3. Ces téléphones se distinguent de leurs prédécesseurs par le fait qu'ils utilisent des signaux de transmission numérique et non plus analogiques. Ils embarquent avec eux un nouveau mode de communication qui révolutionnera la planète, le SMS 4. C'est également lors de cette deuxième génération que les cartes prépayées font leur apparition et que le GSM devient populaire. Les Smartphones La troisième génération de téléphones portables qui apparait au début des années 2000 est celle du multimédia. Avec ces nouveaux téléphones, on peut envoyer des photos, des vidéos ou du son par MMS 5 au travers du réseau 3G. On peut aussi se connecter à Internet pour consulter ou rédiger ses e-mails, naviguer sur la toile, prendre, envoyer et recevoir des photos et des vidéos ou encore écouter de la musique. C'est l'apparition des premiers smartphones, qui semblent encore se chercher. La nouvelle génération de Smartphones Finalement la quatrième génération est celle des smartphones qui suivront le premier Iphone commercialisé en 2007. Les téléphones portables n'auront plus la même utilité que leurs prédécesseurs. Ce sont de petits ordinateurs de poche qui permettent à leurs propriétaires d'être en permanence connectés sur la toile et de communiquer par le biais des réseaux sociaux, d'eectuer des payements en ligne, de suivre un itinéraire en temps réel grâce à une antenne GPS 6, etc. On peut aussi télécharger une multitude d'applications plus ou moins utiles sur des plateformes de téléchargement telles que l'apple Store ou l'android Market. C'est principalement avec cette génération de téléphones que les notions d'applications natives et de web apps font leur apparition. 3. GSM : Global System for Mobile Communications 4. SMS : Short Message Service 5. MMS : Multimedia Message Service 6. GPS : Global Positionning System 3

Figure 1 Évolution des téléphones portables Applications natives vs Web apps Développer seulement une web application répond très probablement à la demande d'utilisateurs dans un domaine bien spécique. Mais cette décision pourra ne pas du tout convenir si on l'applique à un autre domaine. Ainsi, avant d'entamer le développement de l'une ou l'autre de ces technologies, il est indispensable de connaitre les avantages et inconvénients de chacune. Avantages et inconvénients 7 On ne développe pas une web app comme on développe une application native. An de faire le tri parmi ces deux types d'applications, je dresserai un tableau comparatif non exhaustif des avantages et inconvénients de chaque. Web app Avantages : Facilité de développement car une connaissance basique de HTML 8, CSS 9 et JavaScript 10 sut. Développement indépendant des plateformes. Accessible via n'importe quel téléphone disposant d'un navigateur Internet. Maintenance et mises à jour plus aisée. 7. Certains points de cette section relatifs aux Avantages et inconvénients sont inspirés de Sarah ALLEN, Pro Smartphone Cross-Platform Development. APress, Berkeley, 2010 8. HTML : Hypertext Markup Language 9. CSS : Cascading Style Sheets 10. Le JavaScript est un langage de scripting orienté objet utilisé à des ns de création et de personnalisation d'applications sur des navigateurs Internet. 4

Inconvénients : L'application ne tourne pas de manière optimale sur tous les téléphones. Ne permet généralement pas d'utiliser des fonctionnalités avancées des téléphones telles que l'appareil photo, le mode oine, la géolocalisation, l'accès au téléphone, etc. Pas de raccourcis sauf dans le cas des marques-pages. Application native Avantages : Facilité de développement sur une seule plateforme. Utilisation optimale de l'appareil en orant la possibilité d'utiliser les fonctionnalités avancées. Installation de raccourcis à la racine du téléphone. Possibilité de les commercialiser. Inconvénients : Développement entièrement dépendant de la plateforme. Développement, testing et maintenance sur diérents appareils très coûteux. Obligation de passer par un tiers pour la vendre (Apple Store, Android Market) et donc de leur reverser une partie des gains. Les critères de sélection 11 Bien entendu, ne connaître que les avantages et les inconvénients liés aux diérents types d'applications pour smartphones ne permet généralement pas de pouvoir se décider sur la direction à prendre. Bien souvent, les développeurs seront confrontés à d'autres facteurs déterminants qui impliquent de connaître les attentes des utilisateurs. Ainsi, une application visant à proposer un condensé des critiques cinématographiques parues au cours du mois dernier n'appellera pas les mêmes fonctionnalités qu'une application permettant de connaitre l'heure d'arrivée du prochain bus ou encore de jouer à un jeu vidéo. Il est donc nécessaire de bien connaître le client et le budget que l'on est prêt à allouer à ce projet. Cependant, on peut généralement dire qu'il est plus intéressant de se lancer dans un projet de type web app sauf dans une multitude de cas que je propose d'analyser ci-après. Commercialisation Dans l'éventualité où vous décideriez de développer une application que vous souhaitez commercialiser, le choix se portera naturellement sur une application native. 11. Les points de cette section relatifs aux critères de sélection des applications natives et des web apps s'inspirent de Brian FLING, Mobile Design and Development, APress, Berkeley, 2010, p146-150. 5

Cependant, il faut faire attention aux diérents obstacles comme le fait que vos clients ne verront souvent pas l'utilité de devoir payer pour une application sur un Smartphone. De plus, les plateformes prendront un pourcentage de vos recettes tout en vous imposant de respecter leurs standards. Création de jeux vidéo Dans le cas où vous souhaitez créer un jeu vidéo, il semble évident qu'il faudra opter pour une application native. Les jeux vidéos sont des applications qui sont extrêmement gourmandes en ressources et il est impératif de pouvoir optimiser l'utilisation de ces dernières. Dans ce genre de développement, il est encore plus important de bien connaitre les plateformes sur lesquelles seront déclinés les jeux an d'optimiser au maximum les ressources de l'appareil. Géolocalisation Dans le cas où vous souhaitez pouvoir accéder aux informations de localisation des utilisateurs via antenne GPS ou par triangulation, il faudra aussi penser en terme d'application native. Depuis peu, la géolocalisation peut être intégrée dans les navigateurs web et donc être utilisée par les web apps. Ce n'est plus une exclusivité réservée aux applications natives. Accès aux ressources du téléphone Pour diérentes raisons, les applications peuvent avoir besoin d'utiliser des fonctionnalités propres au téléphone comme par exemple l'appareil photo, le carnet d'adresses ou encore la bibliothèque musicale. Toutes ces fonctionnalités ne sont actuellement accessibles que si l'on code dans un langage de programmation proche de la machine. Les applications natives sont donc toutes désignées pour eectuer des opérations directement sur les ressources du téléphone... même si à l'heure actuelle, le W3C 12 travaille sur des API 13 qui permettraient ce genre de processus. Utilisation de l'accéléromètre L'accéléromètre 14 est une particularité très populaire que l'on retrouve sur beaucoup de smartphones récents. L'utilisateur peut grâce à lui proter de son téléphone portable de manière plus intuitive et plus pratique car il permet, par exemple, d'eectuer une rotation de l'écran ou d'enregistrer le mouvement de l'appareil dans l'espace. Mode oine, notications et raccourcis Le dernier critère, et non des moindres, qui sera abordé est le mode oine et tous les avantages qu'il confère aux smartphones. La grande majorité des applications natives ont pour énorme avantage le fait de pouvoir être utilisées 12. W3C : World Wide Web Consortium 13. API : Application Programming Interface 14. D'après le dictionnaire Le Petit Larousse Lllustré 1997, Paris, Larousse, 1996. Accéléromètre : Appareil servant à mesurer l'accélération du mouvement. 6

sans la présence de connexion Internet. C'est un avantage indéniable par rapport aux web apps car, par dénition, ces dernières ne pourront jamais être accessibles si l'utilisateur n'est pas connecté sur la toile avec son téléphone. En plus du mode oine, certaines facilités d'utilisations telles que les notications push (une technique permettant d'alerter le propriétaire du smartphone lorsqu'il existe des mises à jour de contenu ou d'autres informations de l'application dont l'utilisateur souhaiterait être tenu au courant) et les raccourcis sur le bureau ne sont pas à négliger. Même s'il est possible de congurer des raccourcis marquespages avec des web apps, la plupart des utilisateurs ne savent pas comment l'utiliser, alors qu'avec une application native, les raccourcis s'installent sans que l'utilisateur ait à s'en soucier. Pour toute autre application ne rentrant pas dans ces critères de sélections, au lieu de passer trop de temps sur le développement d'une application native, je pense qu'il est plus judicieux de le mettre au prot d'une web app. Comme expliqué dans la section avantages/inconvénients, vous économiserez une grande part de votre budget et vous toucherez un plus large public. Étude de cas Dans ce chapitre, je propose de faire un rapide tour d'horizon de l'environnement technique du développement des applications et de comparer la manière dont certaines fonctionnalités sont codées selon qu'elles sont destinées à être utilisées par une web app ou par une application native. Application native An de programmer n'importe quelle application native, il convient d'installer sur notre plateforme de développement le SDK 15. Pour éviter de trop complexier cet article en évoquant les diérents types de SDK, je ne vous parlerai ici que du SDK Android, un SDK open source qui permet de programmer des applications pour les systèmes d'exploitation Android. De plus, l'installation du JDK 16 sera obligatoire car la plupart des applications sont développées à l'aide du langage Java. Lorsque ces kits sont installés et congurés correctement, vous êtes prêts à entamer vos premiers pas en programmation pour Android. Voici comment créer l'application de type "Hello World". 17 Lors de la première étape, il faut créer un chier java dans lequel vous rédigerez les lignes de codes suivantes : 15. Un SDK, pour Software development kit, approprié est un ensemble d'outils nous permettant de développer des applications pour un système d'exploitation particulier 16. A l'instar du SDK, le JDK qui désigne un Java development kit, est un ensemble d'outils permettant de programmer en langage orienté objet Java 17. Les informations relatives au développement des applications natives pour smartphones sous Android proviennent de plusieurs sources dont principalement le livre de Sarah Allen. Pro Smartphone Cross-Platform Development. APress, Berkeley, 2010, p.35-42 ainsi que le site web d'android, http://www.android.com. 7

package hello.world; import android.app.activity; import android.os.bundle; import android.widget.textview; public class HelloWorld extends Activity { @Override public void oncreate(bundle icicle) { super.oncreate(icicle); TextView textview = new TextView(this); textview.settext("hello world!"); setcontentview(textview); Cette application, très basique, achera la chaine de caractères "Hello world!" dès qu'elle sera lancée comme montré sur l'image de la Figure 2. Figure 2 Application HelloWorld lancée depuis l'émulateur sur Eclipse Ici, tout est géré dans le chier HelloWorld.java. La structure et le code sont intégrés au chier de programmation. Comme pour la création de tout programme en informatique, une bonne pratique consiste à sortir tous les paramètres qu'on aurait tendance à hardcoder 18 de la méthode principale, de les 18. En programmation, le terme hardcoder désigne le fait d'assigner à des variables une valeur xe directement dans le code. C'est une pratique qui est fortement déconseillée car elle 8

mettre dans un chier séparé, et d'y faire appel lorsqu'on en a besoin. C'est en passant par un chier de type XML 19 que sortir les paramètres de la méthode principale est possible. Le fonctionnement est similaire au CSS en ce sens qu'on congure dans le chier XML les attributs des éléments à acher dans le programme. Ainsi, les chiers main.xml et strings.xml ont pour objectif principal de gérer l'achage de ces paramètres. Dans l'exemple suivant, je vous propose d'analyser comment écrire une application qui aura le même résultat mais en passant les arguments en paramètre dans les chiers xml. Le chier main.xml doit contenir le code suivant : <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/textview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/hello"/> Quant au chier strings.xml, il doit contenir le code suivant : <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">hello world!</string> </resources> Il ne reste plus qu'à réécrire le programme java de la manière suivante et le tour est joué : package hello.world; import android.app.activity; import android.os.bundle; import android.widget.textview; public class HelloWorld extends Activity { /** Called with the activity is first created. */ @Override public void oncreate(bundle icicle) { super.oncreate(icicle); setcontentview(r.layout.main); La diérence fondamentale avec le premier code java se situe dans la méthode oncreate. Dans celle-ci, on ne hardcode plus le texte que l'on veut acher, mais on ordonne au programme de consulter le layout xml. pose de gros problèmes de maintenance et de exibilité du code source 19. XML : Extensible Markup Language 9

L'application, une fois lancée, va donc consulter le chier main.xml qui dénit notamment l'élément "android :text" renvoyant à l'élément portant le nom de "hello" du chier strings.xml. Ce dernier ayant pour valeur "Hello World!" dénie par la ligne <string name="hello">hello world!</string>. On voit tout de suite avec cet exemple-ci qu'il est impératif d'avoir des notions avancées de programmation si l'on désire se lancer dans une application même basique. Web apps Le cas du développement d'une web app est quant à lui beaucoup plus simple puisque, comme expliqué déjà plus haut, nous pouvons nous contenter de coder uniquement en HTML. Ainsi, si l'on reprend l'exemple précédent, il sut de créer une page HTML helloworld.html dont le code serait le suivant : <html> <head> <title> Hello World </title> </head> <body> Hello World! </body> </html> Dans ce cas-ci, dès que l'on souhaite modier le design, on fera appel aux propriétés oertes par le CSS2 20. Ainsi si l'on modie le code ci-dessus par celui ci-dessous, on obtiendra un résultat diérent (Figure 3) car la mise en page est faite par le chier CSS et qui donnera à la page web un look digne d'une application native pour Iphone 21. <html> <head> <link rel="stylesheet" type="text/css" href="iphone.css" media="screen"/> </head> <body> <div> <div class="button">back</div> <div class="button-bold">+</div> 20. Il existe diérentes variations du CSS pour le développement des web apps, comme le Wireless CSS ou le CSS Mobile Prole, qui permettent l'optimisation de l'achage d'une page web mais dans ce cas-ci, il convient de développer ces pages dans une version modiée du XHTML (Extensible HyperText Markup Language), le XHTML-MP 1.1 comme décrit dans l'excellent livre de Gail FREDERICK, Beginning Smartphone Web Development. APress, Berkeley, 2009, p.51-59. 21. Dans ce cas présent, le look Iphone provient d'images téléchargées sur une bibliothèque d'échantillons disponible sur le site web : http://www.htmlgoodies.com. 10

<h1>hello World!</h1> </div> </body> </html> body { background: url(bg.png); padding: 0px; margin: 0px; color: #4c566c; text-shadow: 0px 1px -1px #fff; text-align: center; font: normal 15px Arial; h1 { background-image: -webkit-gradient(linear, left top, left bottom, from(#b4bfce), color-stop( 50%, #889bb3), color-stop(50%, #7f94b0), to(#6d83a1)); margin: 0px; height: 34px; font-size: 22px; text-shadow: 0px -1px 1px #000; border-bottom: 1px solid black; color: white; padding: 8px 0px 0px 0px; text-align: center;.button{ -webkit-box-shadow: 0px -1px 1px #2f3740, 0px 1px 1px #bfcbdb; background-image: -webkit-gradient(linear, left top, left bottom, from(#8aa1bf), color-stop( 50%, #5877a2), color-stop(50%, #476999), to(#4a6c9b)); -webkit-border-radius: 4px; font: bold 12px Arial; text-align: center; line-height: 28px; color: white; text-shadow: rgba(0,0,0,0.5) 0px -1px 0px; white-space: nowrap; overflow: hidden; -webkit-tap-highlight-color: white; padding: 2px; position: absolute; top: 4px; left: 6px; border: 1px solid #3e444c;.button-bold{ 11

-webkit-box-shadow: 0px -1px 1px #2f3740, 0px 1px 1px #bfcbdb; background-image: -webkit-gradient(linear, left top, left bottom, from(#8aa1bf), color-stop( 50%, #5877a2), color-stop(50%, #476999), to(#4a6c9b)); -webkit-border-radius: 4px; font: bold 32px Arial; width: 27px; text-align: center; line-height: 28px; color: white; text-shadow: rgba(0,0,0,0.5) 0px -1px 0px; white-space: nowrap; overflow: hidden; -webkit-tap-highlight-color: white; padding: 2px; position: absolute; top: 4px; right: 6px; border: 1px solid #3e444c; Figure 3 Web app au look Iphone Bien entendu, si l'on désire proposer une application un peu plus complexe, il conviendra au besoin de combiner le HTML (ou plutôt le XHTML-MP) à un langage plus riche et plus puissant comme le JavaScript qui, même s'il est plus contraignant que le HTML car plus dicile à manier, reste abordable pour des personnes autodidactes ou ayant bénécié de courtes formations dans le 12

domaine des technologies web. De plus, vouloir optimiser les web apps en terme de rapidité et de qualité d'achage pour tout type de navigateur et de téléphone peut relever d'un beau challenge. Mais ceci s'adresse à un développement plus avancé. Conclusion J'ai tenté, tout au long de cet article, de vous présenter succinctement les différences fondamentales entre les applications native et les web apps. Il est évident que, malgré qu'elles soient souvent payantes, les applications natives présentent des avantages indéniables quant à la quantité de services qu'elles orent aux utilisateurs en terme de fonctionnalités et à la facilité d'utilisation. Pouvoir utiliser son application en mode oine, y intégrer des éléments comme l'appareil photo ou le carnet d'adresse, ou encore l'accéléromètre sont assurément des caractéristiques qui séduisent rapidement et ecacement les utilisateurs. La diculté dans ce cas-ci réside principalement dans le développement des applications an de les rendre exploitables sur toutes les plateformes. Il est, de plus, indispensable pour les équipes en charge de ces développement de suivre les étapes classiques du cycle de vie d'un programme informatique en passant par de longues périodes d'analyse, de développement, de testing et de déploiement. Cette diculté tant sur le plan temporel que nancier constitue un désavantage non négligeable qu'il ne sera pas toujours aisé de surpasser. A l'instar de l'application native, la web app s'en sort bien. Bien sûr, elle ore beaucoup moins de possibilités en terme d'interface et d'intégration mais elle comporte l'énorme avantage d'être programmable en langage (X)HTML. N'importe qui pourrait, après avoir suivi une formation dans le domaine des technologies web, se lancer dans l'aventure de la web app et bénécier ainsi d'une visibilité sur le marché des smartphones. C'est donc beaucoup plus abordable tant sur le plan technique que nancier. Évidemment, les web apps ont comme inconvénient majeur de nécessiter l'accès à une connexion web pour pouvoir être utilisées mais je pense que d'ici quelques années, le problème aura disparu. En eet, avec la démocratisation du prix des abonnements data, la prolifération des hot spots dans les grandes villes et le récent lancement du service Fon 22 en Belgique, se connecter à l'internet pour les utilisateurs mobiles sera bientôt de l'histoire ancienne. Dans tous les cas, le choix d'opter pour le développement d'une application web plutot que d'une web app doit faire partie d'une longue réexion qui tient compte du budget, du temps et des attentes des clients. 22. Fon est un service communautaire international qui permet à ses utilisateurs de mettre sa connexion wi à disposition de la communauté et de pouvoir à son tour en bénécier d'une autre ailleurs. 13

Bibliographie [1] Le Petit Larousse Illustre 1997. Larousse, Paris, 1996. [2] Sarah ALLEN. Pro Smartphone Cross-Platform Development. APress, Berkeley, 2010. [3] World Wide Web Consortium. Mobile web application best practices, Décembre 2010. http ://www.w3.org/tr/2010/rec-mwabp-20101214/. [4] Brian FLING. Mobile Design and Development. O'Reilly, Sebastopol, 2009. [5] Gail FREDERICK. Beginning Smartphone Web Development. APress, Berkeley, 2009. [6] Gartner Research. Android os rose to account for more than 50 percent of smartphone sales, Novembre 2011. http ://www.gartner.com/it/page.jsp?id=1848514. 14