Construire des applications multiplateformes avec HTML5

Cet article est la traduction d’un article initialement publié en langue anglaise par MUHAMAD ABDUL HAY B le 17/10/2013.  

Qu’est-ce qu’une app multiplateforme ? C’est une application qui atteint vos clients quelque soit leur terminal numérique, quelque soit l’endroit où ils se trouvent : qu’ils utilisent un PC sous Windows* au travail, un iPad* au café du coin ou un téléphone Android* en marchant dans la rue.

Pourquoi HTML5 ? Parce-qu’au lieu d’essayer de devenir un expert dans une multitude de technologies de développement toutes très différentes —C# et les APIs Windows sous Visual Studio*; Objective-C et les APIs iOS* sous Xcode*; Java* et les API Android sous Eclipse*; et ainsi de suite— vous pouvez économiser du temps et de l’énergie grâce au caractère multiplateforme des technologies HTML5 (dans le langage courant, on désigne souvent l’ensemble des langages, APIs et outils du web moderne par le terme HTML5, bien que cela recouvre plus que la norme HTML5). Plutôt que de réaliser du portage de code sans valeur ajoutée, vous pouvez concentrer vos efforts sur les choses qui comptent vraiment : développer les fonctionnalités pertinentes pour votre app et perfectionner l’expérience utilisateur. De plus, parce que votre app HTML5 est écrite en utilisant des normes suivies par l’ensemble des acteurs du marché, votre app fonctionne sur les nouveaux terminaux dès qu’ils entrent sur le marché.

Si vous utilisez déjà HTML5 aujourd’hui pour construire des pages web riches et interactives, vous connaissez déjà les bénéfices d’HTML5 concernant le déploiement sur des navigateurs et systèmes d’exploitation multiples. Les apps multiplateformes avancées construites avec HTML5 sont une extension logique de ce modèle, où le contexte d’exécution n’est plus un navigateur (comme Chrome*, Safari ou Firefox*) mais le composant d'exécution web interne de la plateforme cible (plus communément appelé webview).

Les apps multiplateformes font aujourd’hui face à des opportunités mais aussi des défis. Avec des terminaux dont la diversité des formats s’élargit sans cesse, l’écran d’affichage étant un composant clé de cette diversité, les apps multiplateformes doivent donc aujourd’hui s’adapter à des tailles d’écran, résolutions, apect ratios et orientations variées. Désormais, les terminaux disposent également de nouvelles capacités, comme l’appareil photo, l’accéléromètre et le GPS. Les apps multiplateformes doivent être capables de tirer avantage de ces capacités via du code portable et être à même de fournir une expérience utilisateur riche et contextualisée à travers un large éventail de terminaux.

Les apps HTML5 ne sont pas limitées à des pages web vues dans un navigateur. Vous pouvez aussi packager votre code HTML5 et le déployer comme une application web hybride installée localement. Ceci permet d’utiliser les mêmes canaux de distribution —Comme par exemple l’AppStore, Google Play ou encore le Windows Store— et de monétisation —In-app purchases, In-app billing etc— que les apps natives, aussi bien que de proposer la même expérience utilisateur concernant l’installation et le lancement de l’application. Plutôt que d’être exécutée dans une fenêtre de navigateur isolée, votre app s’éxecute dans une webview plein écran, avec un contrôle complet  sur la surface utile de l’écran et sur les capacités du terminal.

La suite de cet article explique certaines bonnes pratiques pour construire des apps HTML5 multiplateformes dans un monde désormais centré sur les terminaux alternatifs (par opposition à l’ordinateur traditionnel et son navigateur web classique). Ces bonnes pratiques sont les suivantes :

  • Eviter les APIs spécifiques à une plateforme.

  • S’adapter dynamiquement aux paramètres de l’écran.

  • Gérer les "bizarerries".

Eviter les APIs spécifiques à une plateforme.

Votre app HTML5 est multiplateforme seulement si chacune de vos plateformes cibles supporte toutes les APIs utilisées par votre app. C’est en pratique important d’y apporter une attention toute particulière pour deux raisons principales :

  • Premièrement, il ne suffit pas qu’une API soit écrite en JavaScript pour qu’elle soit multiplateforme. En effet JavaScript n’est plus seulement utilisé par des navigateurs basés sur le standard HTML5; c’est un language de programmation de premier ordre supporté par de nombreuses plateformes de développement récentes, incluant Microsoft* Visual Studio*, Appcelerator* Titanium* et Node.js. Les apps qui utilisent une API JavaScript spécifique à une plateforme particulière, comme les JavaScript Windows Runtime APIs de WinJS ou les Chrome* APIs que l’on trouve dans les Google Chrome Extensions, cessent d’être des applications multiplateformes.

  • Deuxièmement, comme ceux d’entre vous venant du monde du web le savent déjà, l’évolution des standards est menée à travers des implémentations expérimentales des moteurs d'exécution. Cela signifie que les moteurs d'exécution HTML5 implémentés sur vos plateformes cibles proposerons toujours des APIs supplémentaires légèrement différentes. Les fonctionnalités populaires et matures convergent au fil du temps à partir de ces nouvelles fonctionnalités qui arrivent  continuellement. Ce processus est formidable pour l’innovation de la plateforme HTML5, mais cela peut dans certains cas être une nuisance pour le développement d’app au quotidien.  Ainsi, les apps HTML5 ont fréquemement besoin d’utiliser des APIs JavaScript multiplateformes pour masquer les différences d’implémentation du moteur d’exécution d’une plateforme à l’autre, et pour combler les fonctionnalités manquantes sur certaines plateformes .

Dans ce contexte, Apache Cordova*1 est une bibliothèque d’API multiplatforme occupant une place importante. Cordova permet d’accéder à toutes les capacités des terminaux—tel que l’appareil photo, l’accéléromètre et la géolocalisation—de la même manière quelque soit la plateforme du terminal. En utilisant Cordova, vous pouvez développer une base de code HTML5 qui s'exécute partout, tirant avantage des capacités du terminal pour proposer une expérience utilisateur riche et contextuelle, même à travers des capacités du terminal qui ne sont pas encore disponibles dans les APIs HTML5 standardisées. Cordova fournit l’accès aux implémentations natives pour chaque plateforme cible, en prenant en charge les détails de l’interfaçage avec le système pour obtenir l’accès aux capacités du terminal désirées.

Les apps qui utilisent Cordova doivent être packagées sous forme d’application hybride (que l’on peut encore appeler web app hybride ou app HTML5 hybride); bien que le code que vous développez soit portable, votre app packagée est spécifique au terminal. Vous pouvez utiliser des outils, tels que Adobe PhoneGap Build* ou le Intel XDK, pour packager pour des plateformes multiples simultanément en quelques clics. De plus, Cordova est implémenté en utilisant les standards web, ainsi il peut constituer une étape dans la migration vers l’ultime standardisation des APIs de terminaux pour les moteurs d’éxecution de la plateforme HTML5.

1Des versions précédentes de l’API et des bibliothèques Cordova étaient connues sous le nom de PhoneGap*. Le nom PhoneGap est désormais utilisé pour la distribution d’Adobe d’Apache Cordova.

S’adapter dynamiquement au paramètres de l’écran

Pour être réellement multiplateforme, votre app devrait aussi fournir une bonne expérience utilisateur à travers une grande variété de taille d’écran, de résolutions, de proportions et d’orientations. Il y a beaucoup de techniques disponibles pour vous aider à adapter votre code HTML5 à des affichages variés.

Mise à l’échelle (scaling)

Au plus simple, vous pouvez mettre à l’échelle vos composants d’interface utilisateur et vos polices en accord avec les dimension de l’écran et, optionnellement, ajuster le remplissage autour des composants de l’interface pour vous adapter au mieux aux proportions variées.  Usuellement, vous allez concevoir l’interface utilisateur d’abord pour le mobile, et ensuite passer à l’échelle supérieure, afin de vous assurez de l’utulisabilité sur les petits écrans.

Rappelez vous aussi que chaque terminal nécessite une conception d’interface pour deux orientations : portrait et paysage. Pour effectuer la mise à l’échelle vous pouvez utiliser les unités relatives des CSS ou vous appuyer sur un framework d’interface utilisateur adaptatif comme jQuery Mobile ou Sencha Touch qui fera le gros du travail pour vous.

Images adaptatives

Les images peuvent nécessiter plus qu’une simple mise à l’échelle, dans la mesure où il se peut que vous vouliez rogner une image à d’autres à un autre format ou charger une image optimisée pour une résolution différente. Prenez le temps de consulter ce guide pour sélectionner la solution d’image adaptative qui correspond le mieux à chacun de vos besoins, et consultez également cet aperçu décrivant quelques propositions de standards web pour le support des images adaptatives.

Mise en page adaptative

Si l’interface utilisateur de votre app est faite de multiple sections, envisagez une mise en page fluide, dans laquelle vous réarrangeriez (et même cacheriez de manière sélective) les sections en vous basant sur la surface utile d’écran disponible. Référez-vous à ces modèles de mise en page adaptative et modèles de navigation adaptative pour vous faire une idée sur la manière de concevoir votre propre interface utilisateur adaptative. Pour obtenir de la fluidité, vous pouvez appliquer les techniques du design web adaptatif, ou utiliser un des nombreux systèmes de grille fluide qui fera le gros du travail pour vous.

Gérer les “bizarreries”

Malgré tous les efforts—APIs multiplateformes et interface utilisateur adapatative— on note souvent des différences de comportement entre les plateformes, ce qui vient compliquer le développement multiplateforme. L’évolution rapide du standard HTML5 ne signifie pas seulement qu’il y a des différences dans le niveau d’implémentation des balises HTML, des attributs CSS et des APIs JavaScript, mais aussi que ces fonctionnalités se comportent quelquefois différemment selon la plateforme.

Par exemple, une plainte courante à propos de la plateforme Android concerne le comportement inconsistant de la lecture audio et vidéo suivant la variété des implémentations des fabricants. Un autre exemple est le comportement du champ de saisie HTML form avec le type=”datetime”, qui déclenche l’utilisation du sélecteur de date natif sur un terminal iOS5 mais fait apparaître un simple clavier virtuel sur Android et sur les versions plus anciennes d’iOS.

Certaines de ces différences peuvent être facilement surmontées par l’usage de bibliothèques d’APIs JavaScript multiplateformes qui masquent les différences d’implémentation, telles que Modernizr. De la même manière, certaines inconsistances CSS peuvent être prises en charge à travers des outils comme Normalize.css ou en utilisant des pré-processeurs CSS comme LESS et SASS. Cependant, certains problèmes doivent être réglés en écrivant du code spécifique à la plateforme, ce qui nécessite dans ce cas de détecter la plateforme sous-jacente. La propriété device.name fournit par Apache Cordova, par exemple, permet de le faire.

Conclusion

Que pouvons-nous attendre dans le futur de la part d’Intel concernant les outils de développement et les ressources liés à HTML5 ? Intel s’engage à apporter la meilleure expérience possible pour développer des applications HTML5 multiplateformes. Nous allons offrir des outils et des ressources pour éduquer, former et assister les développeurs à travers le portail HTML5 de l’Intel Developer Zone.

La technologie HTML5 appliquée à la construction d’applications pour terminaux alternatifs est nouvelle pour de nombreux développeurs. Intel offre l’un des programmes pour développeurs les plus vastes au monde, et en canalisant des ressources à travers notre portail HTML5, nous espérons vous fournir un accès aux ressources dont vous avez besoin pour développer et livrer des applications qui peuvent s'exécuter au delà des frontières entre plateformes. En sa qualité de prescripteur indépendant de tout OS, Intel peut vous offrir d’importantes ressources techniques HTML5 qui vous aiderons à écrire votre code une seul fois pour le déployer sur de multiples plateformes.

Article original de MUHAMAD ABDUL HAY B traduit de l'anglais.

如需更全面地了解编译器优化,请参阅优化注意事项