Développer des applications Web mobiles : quand, pourquoi et comment

Il y a 6,8 milliards de personnes sur la planète, dont 5,1 milliards possèdent un téléphone portable. Et aujourd'hui, un pourcentage toujours croissant de ces appareils sont des smartphones. Selon une récente étude du Pew Research Center, le nombre d'utilisateurs accédant à Internet sur leurs smartphones a plus que doublé au cours des 5 dernières années, tout comme le nombre d'utilisateurs téléchargeant et utilisant des applications mobiles. Parmi ceux qui utilisent Internet ou le courrier électronique sur leur téléphone, plus d'un tiers se connectent principalement via leurs appareils portables.

En effet, l'informatique mobile devient de plus en plus omniprésente… et c'est génial.

Sauf, bien sûr, quand ce n'est pas le cas.

En tant qu'utilisateur d'appareil mobile, peu de choses sont aussi frustrantes et difficiles à naviguer qu'une application Web mobile mal conçue, ou même une application native.

Et en tant que développeur d'applications mobiles, peu de choses peuvent être aussi intensément irritantes que de s'efforcer de prendre en charge un éventail aussi large que possible de clients mobiles, chacun ayant son propre ensemble frustrant d'idiosyncrasies. Que vous choisissiez de développer une application Web mobile, native ou hybride, la quête de la prise en charge de plusieurs navigateurs mobiles, d'appareils plus exotiques et de la prise en main de diverses plates-formes peut être une expérience assez déchirante.

Bien sûr, tous les développeurs d'aujourd'hui n'ont pas à se soucier de la prise en charge des clients mobiles. Mais la nature de plus en plus omniprésente des appareils et des applications mobiles suggère fortement que ceux qui n'ont pas besoin de prendre en charge les clients mobiles aujourd'hui auront plus que probablement besoin de le faire dans un avenir pas trop lointain. Donc, si vous ne pensez pas déjà au développement d'applications mobiles, vous devriez probablement le faire.

Application Web mobile vs application native vs application hybride

Comme c'est le cas avec la plupart des sélections de technologies, il n'y a pas de réponse unique lorsqu'il s'agit du type d'application mobile à développer. Il existe de nombreuses meilleures pratiques d'application Web à prendre en compte, qui ne sont pas toutes techniques. Qui est votre public cible? Sont-ils plus susceptibles de préférer un Web mobile ou une application native ? Quelle est la différence entre les applications natives et hybrides ? De quelles ressources de développement disposez-vous et avec quelles technologies mobiles sont-ils les plus familiarisés ? Quel est le modèle de licence et de vente que vous envisagez pour votre produit ?

De manière générale (bien qu'il y ait toujours des exceptions), la route des applications Web mobiles est plus rapide et moins chère que la route des applications mobiles natives, en particulier lorsque l'objectif est de prendre en charge une large gamme d'appareils. A l'inverse, il peut y avoir des capacités natives de l'appareil mobile (comme le capteur de mouvement, etc.) qui sont essentielles à votre application, mais qui ne sont accessibles que via une application native (ce qui rendrait donc le choix de l'application Web mobile non- démarreur pour vous).

Et au-delà de la question des anciennes applications Web par rapport aux applications natives, une application mobile hybride peut être la bonne réponse pour vous, en fonction de vos besoins et de vos contraintes de ressources. Les applications hybrides, comme les applications natives, s'exécutent sur l'appareil lui-même (par opposition à l'intérieur d'un navigateur), mais sont écrites avec des technologies Web (HTML5, CSS et JavaScript) et généralement soutenues par un cadre d'application hybride. Plus précisément, les applications hybrides s'exécutent dans un conteneur natif et exploitent le moteur de navigateur de l'appareil (mais pas le navigateur) pour restituer le code HTML et traiter le JavaScript localement. Une couche d'abstraction Web-to-native permet d'accéder aux fonctionnalités de l'appareil qui ne sont pas accessibles dans les applications Web mobiles, telles que l'accéléromètre, la caméra et le stockage local.

Mais quel que soit votre choix, qu'il s'agisse d'une application Web mobile, d'une application native ou hybride, veillez à bien rechercher et confirmer vos hypothèses. Par exemple, pour les besoins de ce didacticiel de développement d'applications Web mobiles, vous avez peut-être décidé de développer une application mobile native pour le commerce électronique afin de vendre vos produits. Mais, selon Hubspot, 73% des utilisateurs de smartphones déclarent utiliser davantage le web mobile que les applications natives pour faire leurs courses… Alors, dans ce cas, vous avez peut-être misé sur le mauvais cheval.

Et puis, bien sûr, il y a les considérations pratiques de temps et de budget. Comme le dit l'un de mes dictons préférés, "plus vite, mieux, moins cher... choisissez-en deux" . Alors que les contraintes de temps de mise sur le marché et de coût sont d'une importance primordiale dans le développement d'applications Web, il est crucial de ne pas trop compromettre la qualité dans le processus. Il est assez difficile de retrouver la confiance d'un utilisateur qui a eu une mauvaise première expérience.

En effet, les applications Web mobiles, natives et hybrides sont toutes des bêtes radicalement différentes, chacune avec son propre ensemble unique d'avantages et de défis. Ce didacticiel de développement Web mobile se concentre spécifiquement sur les méthodologies et les outils à utiliser, ainsi que sur les pièges à éviter, dans le développement d'applications Web mobiles hautement fonctionnelles, intuitives et faciles à utiliser.

Le développement d'applications Web mobiles nécessite une planification détaillée

L'identification de vos besoins (ou de ceux de vos clients) est l'une des meilleures pratiques les plus essentielles dans le développement d'applications, mobiles ou autres. Recherchez attentivement les fonctionnalités ciblées pour déterminer si elles sont réalisables dans votre application Web mobile. Il est assez frustrant et très improductif de se rendre compte qu'une ou plusieurs de vos fonctions client essentielles ne sont pas prises en charge, alors que vous avez déjà investi du temps et des ressources pour concevoir l'interface Web et l'infrastructure de support.

Un autre piège courant pour les débutants en développement d'applications Web mobiles est de supposer que le code Web pour un navigateur de bureau fonctionnera "tel quel" dans un navigateur mobile. Pas. Il y a très certainement des différences et, si vous n'en êtes pas conscient, elles peuvent certainement vous mordre. La fonctionnalité de lecture automatique de la balise HTML5 <video> , par exemple, ne fonctionne pas sur les navigateurs mobiles. De même, les propriétés de transition et d' opacity CSS ne sont pas prises en charge (ou du moins ne sont pas systématiquement prises en charge) dans la plupart des navigateurs mobiles de nos jours. Vous rencontrerez également des problèmes avec certaines méthodes d'API Web sur une plate-forme mobile, telles que l'API de diffusion de musique SoundCloud qui nécessite Adobe Flash qui n'est pas pris en charge sur la plupart des appareils mobiles.

Un facteur particulièrement compliqué dans le développement d'applications Web mobiles est que la durée de vie des appareils mobiles a tendance à être beaucoup plus courte que celle des écrans de bureau (la durée de vie moyenne d'un téléphone portable aux États-Unis est d'environ 21 mois). Ces durées de vie plus courtes des appareils, accompagnées de lancements constants de nouveaux appareils et technologies mobiles, donnent un paysage en constante évolution des appareils à cibler. Bien que travailler dans un navigateur atténue quelque peu ce problème en vous protégeant d'un certain nombre de problèmes spécifiques à l'appareil, vous devrez toujours concevoir une vue basée sur un navigateur qui prend en charge de nombreuses résolutions d'écran différentes (ainsi qu'un ajustement approprié pour les orientations paysage et portrait ).

Il faut également penser à prendre en charge les écrans Retina d'Apple (écrans à cristaux liquides qui ont une densité de pixels suffisamment élevée pour que l'œil humain ne puisse pas discerner les pixels individuels à une distance de visualisation typique). Plusieurs produits Apple, dont l'iPhone, l'iPod Touch, l'iPad, le MacBook Pro, l'iPad Mini et l'iPad Air, proposent des écrans Retina. Pour une application Web mobile en particulier, il est important de savoir qu'un écran Retina rend les images basse résolution (qui sont généralement diffusées sur les appareils mobiles) floues et qu'une pixellisation peut se produire. La meilleure solution de développement d'applications dans ces cas consiste à faire en sorte que le serveur reconnaisse que la demande provient d'un appareil Retina, puis à fournir une autre image de résolution supérieure au client.

Si vous souhaitez utiliser certaines des fonctionnalités HTML5 intéressantes, n'oubliez pas de vérifier à l'avance que la fonctionnalité que vous recherchez est prise en charge sur l'ensemble des appareils que vos clients sont susceptibles d'utiliser. Par exemple, dans iOS 6 et supérieur, la fonctionnalité getUserMedia du navigateur n'est pas prise en charge, car la caméra n'est accessible que via des applications natives. Caniuse.com et html5test.com sont deux excellentes ressources pour vérifier ce qui est pris en charge sur des appareils et des navigateurs spécifiques.

Les requêtes multimédia CSS3 peuvent également vous aider à fournir un contenu personnalisé pour chaque appareil. Voici un exemple de code pour capturer différentes caractéristiques de l'appareil, telles que la densité de pixels, la résolution de l'écran et l'orientation :

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Optimisation de votre application Web mobile pour les performances

"OMG, cette chose est tellement lente!" En tant que développeur d'applications Web mobiles, ce sont probablement les derniers mots que vous souhaitez entendre de la part de l'un de vos utilisateurs. Vous devez donc bien réfléchir à la façon de réduire et d'optimiser chaque transfert d'octet et de serveur pour réduire le temps d'attente de l'utilisateur. Il n'est pas réaliste de s'attendre à ce que les transferts se fassent toujours via un réseau WiFi, et il faut savoir que 60% des mobinautes disent s'attendre à ce qu'un site se charge sur leur téléphone mobile en 3 secondes ou moins (source). De même, Google a constaté que, pour chaque tranche de cinq secondes supplémentaires de temps de chargement, le trafic diminuait de 20 % (et il convient également de noter que les moteurs de recherche tiennent compte des temps de chargement dans le cadre de leur calcul du score de qualité de la page).

Dans le cadre de ce didacticiel sur le développement d'applications Web mobiles, voici quelques conseils qui peuvent vous aider à optimiser les performances de vos applications Web mobiles et à minimiser la latence :

• Optimisation des images. Le temps de chargement des images est bien connu pour être l'un des plus gros problèmes de performances affectant le chargement des pages sur les appareils mobiles. L'utilisation d'optimiseurs d'images en ligne, tels que smushit.com, peut être utile pour résoudre ce problème.
• Compression de codes. La compression de vos fichiers JavaScript et CSS, selon la quantité de code dont vous disposez, peut potentiellement avoir un impact significatif sur les performances.
• Requêtes de base de données.
  • Certains navigateurs d'appareils mobiles n'acceptent pas autant de cookies que les navigateurs de bureau, ce qui peut entraîner la nécessité d'exécuter encore plus de requêtes que d'habitude. La mise en cache côté serveur est donc particulièrement cruciale lors de la prise en charge des clients d'applications Web mobiles.
  • N'oubliez pas d'utiliser les filtres appropriés pour empêcher l'injection de requêtes SQL qui pourrait autrement compromettre la sécurité de votre site et de votre serveur.
• Réseaux de distribution de contenu (CDN). Si vous prévoyez de fournir beaucoup de vidéos, d'images, de fichiers audio ou d'autres types de médias, l'utilisation d'un CDN est fortement recommandée. Certains des CDN commerciaux les plus courants incluent Amazon S3, Microsoft Windows Azure et MaxCDN. Les avantages d'utiliser un CDN sont nombreux et incluent :
  • Amélioration des performances de téléchargement. L'exploitation des ressources d'un CDN vous permet de répartir la charge, d'économiser de la bande passante et d'améliorer les performances. Les meilleurs CDN offrent une disponibilité plus élevée, une latence réseau plus faible et une perte de paquets plus faible. De plus, de nombreux CDN offrent une sélection de centres de données répartis dans le monde entier, permettant aux téléchargements d'être effectués à partir d'un serveur plus proche de l'emplacement de l'utilisateur (ce qui entraîne moins de sauts de réseau et des téléchargements plus rapides).
  • Plus de téléchargements simultanés. Les navigateurs limitent généralement le nombre de connexions simultanées à un seul domaine, après quoi les téléchargements supplémentaires sont bloqués jusqu'à ce que l'un des téléchargements précédents soit terminé. Vous pouvez souvent voir cette limite en action lors du téléchargement de nombreux fichiers volumineux à partir du même site. Chaque CDN supplémentaire (sur un domaine différent) permet des téléchargements simultanés supplémentaires.
  • Analyses améliorées. De nombreux CDN commerciaux fournissent des rapports d'utilisation qui peuvent compléter vos propres analyses de site Web et qui peuvent offrir une meilleure quantification des vues et des téléchargements de vidéos. GTmetrix, par exemple, dispose d'un excellent outil de création de rapports de site Web pour surveiller et optimiser les sources chargées sur votre site.

Outils de développement d'applications Web mobiles

"Les bons outils pour le bon travail" est un adage séculaire qui s'applique autant au développement de logiciels qu'à tout autre domaine. Ce didacticiel fournit une introduction à certains des outils les plus populaires et les plus largement utilisés pour le développement d'applications Web mobiles, mais gardez à l'esprit qu'il peut très bien y avoir d'autres outils qui sont les "bons" pour développer votre application Web mobile, selon vos besoins et les ressources disponibles.

Choisir le bon framework d'applications Web mobiles JavaScript

Comme le développement d'applications Web mobiles a tendance à créer bon nombre des mêmes défis communs - tels que la compatibilité entre navigateurs et HTML et CSS incohérents dans les navigateurs mobiles - des cadres ont été développés (basés sur HTML5 et CSS3) qui sont spécifiquement conçus pour résoudre ces problèmes et fonctionner aussi parfaitement que possible sur un large éventail de téléphones intelligents et de tablettes. La plupart de ces cadres d'applications Web mobiles sont légers, ce qui facilite la navigation Web mobile rapide sans compromettre l'apparence de votre site.

Élargissant notre vision au-delà du paysage mobile, s'il existe un seul framework JavaScript populaire qui mérite d'être mentionné, c'est bien jQuery. Si vous connaissez la version de bureau, je vous recommande d'essayer jQuery Mobile pour votre application Web mobile. Il dispose d'une bibliothèque de widgets qui convertit le balisage sémantique en un format convivial pour les gestes, ce qui facilite les opérations sur les écrans tactiles. La dernière version consiste en une base de code très légère qui contient de nombreux éléments graphiques qui peuvent vraiment améliorer votre interface utilisateur.

Une autre alternative, Sencha Touch, gagne également rapidement des parts de marché. Il offre d'excellentes performances globales et aide à produire une interface utilisateur Web mobile qui ressemble et se sent largement comme une interface native. Sa bibliothèque de widgets complète est basée sur la bibliothèque JavaScript ExtJS de Sencha.

Voici quelques différences clés à prendre en compte lors de la comparaison de jQuery Mobile et Sencha Touch :

• Regarde et ressent. De manière générale, l'apparence d'une application Sencha Touch est plus nette et supérieure à celle d'une application mobile jQuery, mais il est important de se rappeler que de telles réactions ont tendance à être très subjectives.
• Extensibilité. jQuery Mobile propose de nombreuses extensions tierces et est intrinsèquement conçu pour être hautement extensible, alors que Sencha Touch est actuellement beaucoup plus un framework «fermé».
• Prise en charge de l'appareil. jQuery Mobile cible actuellement un plus grand nombre d'appareils que Sencha Touch.
• HTML "contre." JavaScript. jQuery est largement centré sur HTML (c'est-à-dire étendant et manipulant le code HTML existant dans JavaScript), tandis que le codage Sencha Touch est entièrement basé sur JavaScript. (Il s'agit d'un exemple, soit dit en passant, de l'ensemble de compétences de votre équipe de développement qu'il est important de prendre en compte lors de vos sélections technologiques.)
• Dépendances externes. jQuery mobile nécessite jQuery et jQuery UI pour la manipulation DOM, alors que Sencha Touch n'a pas de dépendances externes.
• Courbe d'apprentissage. La plupart des développeurs trouvent que le temps de montée en puissance avec jQuery est inférieur à celui de Sencha Touch, peut-être alimenté par le pourcentage élevé de développeurs Web qui connaissent déjà les bibliothèques jQuery standard.

Frameworks réactifs et applications Web mobiles

Un nombre croissant de frameworks réactifs ont commencé à apparaître ces dernières années, deux des plus populaires étant actuellement Bootstrap et Foundation. En bref, les cadres réactifs simplifient et rationalisent la conception et la mise en œuvre de l'interface utilisateur réactive basée sur le Web, en encapsulant les dispositions et les paradigmes d'interface utilisateur les plus courants dans un cadre réutilisable et optimisé en termes de performances. Principalement basés sur CSS et JavaScript, bon nombre de ces frameworks sont open-source, téléchargeables gratuitement et facilement personnalisables. À moins que vous n'ayez un ensemble d'exigences très particulières, il est probable que l'utilisation de l'un de ces frameworks réduira le niveau d'effort nécessaire pour concevoir et mettre en œuvre votre application Web mobile.

En examinant les deux principales options, Bootstrap et Foundation, quelques-unes des principales différences à prendre en compte incluent :

• Plateformes ciblées. Bien que Bootstrap prenne en charge les appareils mobiles, les tablettes et les ordinateurs de bureau, il est principalement orienté vers une utilisation sur ordinateur. Foundation, en revanche, est conçu pour pratiquement toutes les tailles et tous les types d'écran.
• Compatibilité du navigateur. Bootstrap est compatible avec IE7 ou supérieur, tandis que Foundation n'est compatible qu'avec IE9 ou supérieur.
• Diversité des mises en page et des composants. Bootstrap a une collection d'éléments d'interface utilisateur beaucoup plus importante que celle proposée par Foundation.
• Redimensionnement automatique. Avec Foundation, la grille se rétrécit et s'étire en fonction de la hauteur et de la largeur actuelles du navigateur, tandis que Bootstrap ne prend en charge qu'un ensemble prédéfini de tailles de grille basé sur un ensemble standard de tailles d'écran.

Débogage et test d'applications Web mobiles

Le débogage d'applications Web mobiles peut être délicat et quelque peu frustrant, en particulier si vous devez chercher différents appareils à tester ou installer des SDK pour une émulation (généralement imparfaite) des plates-formes clientes ciblées.

Dans ce contexte, un avantage évident du développement Web mobile (par rapport au développement d'applications natives) est que vous pouvez utiliser des outils de développement standard basés sur un navigateur pour déboguer votre application. Basé sur ma préférence personnelle pour le débogage à distance, celui que je recommande dans ce tutoriel de développement d'applications est Chrome avec ses DevTools. Les autres options standard incluent Firefox avec Firebug ou les outils Dragonfly d'Opera.

Certaines des raisons pour lesquelles je préfère Chrome avec ses DevTools incluent :

• Émulateur mobile dans les DevTools de Chrome. C'est peut-être une raison suffisante pour sélectionner Chrome pour le débogage des applications Web mobiles. Les fonctionnalités clés incluent l'émulation des événements tactiles, l'usurpation d'agent utilisateur, la limitation de la bande passante du réseau, les remplacements de géolocalisation, les remplacements d'orientation de l'appareil et l'émulation de type de média CSS.
• Éditeur interactif. Possibilité de modifier JavaScript ou CSS à la volée.
• Débogueur JavaScript supérieur. Autorise les points d'arrêt DOM et offre la possibilité de profiler le temps d'exécution de votre code JavaScript.
• Visionneuses JSON et XML intégrées. Évite le besoin de plugins pour inspecter les réponses du serveur.
• Prise en charge du protocole Android Debug Bridge (ADB) directement via USB. Facilite l'instanciation facile d'une session de débogage à distance. (Voici un bon tutoriel de Google sur la façon de démarrer le débogage à distance dans Chrome.)
• Inspection dynamique des ressources. Vous permet d'inspecter les sources de données locales de votre application, y compris les bases de données IndexedDB ou Web SQL, le stockage local et de session, les cookies et les ressources du cache d'application. Vous pouvez également inspecter rapidement les ressources visuelles de votre application, y compris les images, les polices et les feuilles de style.

Pour tester la mise en page et la compatibilité de navigation croisée de votre application Web, vous pouvez également utiliser des outils en ligne utiles, tels que BrowserStack. Entrez simplement l'URL de votre application, sélectionnez le navigateur, la version et le système d'exploitation, et vous obtiendrez la vue émulée (et la vitesse de chargement) de votre site dans cet environnement. Un autre outil utile à ces fins est CrossBrowserTesting.

Emballer

Avec l'expansion rapide et continue du nombre, de la variété et de la sophistication des appareils mobiles sur le marché et utilisés aujourd'hui, le besoin d'applications mobiles efficaces, conviviales et performantes est susceptible d'augmenter considérablement. Pouvoir développer ces applications intelligemment et efficacement restera donc d'une importance primordiale.

De nombreux facteurs doivent être pris en compte lors du choix entre les options d'applications mobiles Web, natives et hybrides pour les appareils mobiles. Chacune a ses propres avantages, mais les applications Web mobiles représenteront souvent votre option de développement (et donc de délai de mise sur le marché) la plus efficace. Si vous choisissez de suivre cette voie, j'espère que ce didacticiel de développement d'applications Web mobiles vous aidera à vous rendre plus directement et avec succès à votre destination.