Retour sur les Microsoft Techdays 2014 : développer une SPA

Retour sur les Microsoft Techdays 2014 : Développer une Single Page Application pour tous les devices

Descriptif de la session

Durant cette session, vous verrez comment développer une application HTML 5 complexe à destination des navigateurs, tablettes et autres téléphones. Quels sont les pièges à éviter ? quelle architecture, design pattern ? Quels outils utiliser ? Bonnes pratiques ? Toutes ces questions seront abordées dans cette session. Une démonstration sera le fil rouge.
Plus d’informations

Ce que l’on retiendra

Réutilisation du code
Il est désormais courant qu’une application soit disponible en HTML 5 (Web) ainsi que sur les trois principaux OS mobiles que sont Android, iOS et Windows Phone. Certains outils permettent de faciliter la réutilisation de code entre ces 4 environnements. Pour ce faire, certaines contraintes doivent être respectées. L’usage de bonnes pratiques et de librairies spécialisées sera le bienvenu.

Application Web monopage
Une application Web monopage (en anglais “single-page application” ou SPA) est une application Web accessible via une page Web unique. Le contenu est chargé dynamiquement à l’aide d’une utilisation extensive d’Ajax. Il faut également gérer les états, la persistance et l’historique de navigation. Les technologies utilisées sont donc, côté client, le HTML, le Javascript et le CSS.

Application mobile
Une application mobile peut être réalisée de manière native, en exploitant le SDK fourni par les développeurs du système d’exploitation cible. Comme l’a fait remarquer le présentateur Maxime Luce (Touch IT), les avantages du natif sont principalement les performances et l’uniformité des styles visuels. Ses inconvénients sont qu’il nécessite des équipes formées à ces technologies propriétaires, et qu’il faut maintenir davantage de code en cas de développement multiplateformes. Tous les mobiles peuvent afficher des pages web et du HTML 5, on pourra donc utiliser des librairies existantes pour faciliter la tâche.

Diagramme SPA

Les librairies
Nous avons, les librairies « tout compris » : AngularJS et BackboneJS. D’autres sont spécialisées et se concentrent sur une fonctionnalité : Underscore et KnockoutJS. Et les frameworks : Durandal et SPA Tools. Le détail de ces librairies ne sera pas abordé ici.

Outils et architecture
Il a également été conseillé d’utiliser des outils pour améliorer la productivité du code Javascript, tels que TypeScript ou CoffeeScript, et des CSS avec LESS. L’architecture du projet, quant à elle, devrait être de type MV**, « Convention First » (over Configuration), et modulaire. Tout ceci s’inscrit dans une démarche unique et cohérente pour pouvoir maximiser le code réutilisé, à travers des variables et instructions conditionnelles par exemple.

Yeoman
Yeoman est une compilation de trois outils, disponibles sous le package manager de node.js (npm) :

  • Yo : permet de créer une structure de projet, à partir d’instructions en ligne de commande, ou de fichiers de configuration;
  • Grunt : permet de construire et tester le projet, sur les différentes plateformes gérées;
  • Bower : gère les dépendances.

Ces outils semblent s’avérer réellement pratiques. Par contre, on peut se demander quelles sont les limitations lorsqu’une opération assez « custom » doit être réalisée. On pourra ainsi prévisualiser le rendu de notre projet, sur Windows Phone puis sous Android en quelques commandes, et en ne maintenant qu’une seule base de code.

techdays 2014 SPA 2

En conclusion
Certains outils, à l’instar de ceux présentés dans cet article, sont désormais assez matures pour être utilisés avec des applications complexes. Evidemment, tous les types de projets mobiles ne sont pas adaptés au SPA (NDLR : Single Page Application), et certaines fonctionnalités peuvent nécessiter d’utiliser les API natives. Mais dans la plupart des cas, ces librairies peuvent augmenter considérablement la productivité et l’audience, qui cible ainsi une bonne partie des plateformes mobiles et web.

Merci au présentateur, Maxime LUCE, pour cette session intéressante !

Share
Adrien CONSTANT
Adrien CONSTANT

556

Leave a Reply

Your email address will not be published. Required fields are marked *