Présentation d’Angular - Quelles applis “SPA” peut-on coder avec Angular ?

Angular est un framework JavaScript qui permet de créer des single page applications, ou SPA. Qu’est-ce qu’une SPA ? Pour quels types d’applications Angular est-il adapté ou inadapté ?

Angular en quelques mots

Angular en quelques mots
 

Angular est un framework JavaScript qui permet de créer des single page applications, ou SPA.

La toute première version d’Angular, qui s’appelait alors AngularJS, est sortie en 2010. Elle a été créée par Miško Hevery, qui a décidé de publier le code du framework en open source. Peu de temps après, Google a embauché Miško et investi de grosses ressources derrière le framework, dont la popularité a explosé à partir de 2012.

Les applications Angular sont en grande majorité codées en TypeScript, même si d’autres langages sont supportés, comme Dart. Ces langages sont convertis en JavaScript avant l’exécution - le mot officiel est “transpilé” - pour permettre aux applications Angular de s’exécuter dans tous les navigateurs Internet.

Les 3 caractéristiques d’une SPA

Les 3 caractéristiques d'une SPA
 

1) S’exécute côté client

Une SPA consiste essentiellement en du code JavaScript. Lorsque l’utilisateur accède à une application SPA pour la première fois, une page HTML “coquille” et le code JavaScript qui l’accompagne sont renvoyés par le serveur. Ensuite, tout le code s’exécute dans le navigateur de l’utilisateur, qu’on appelle le “client”.

2) Rafraîchissement partiel

Contrairement à un site web classique, où chaque navigation déclenche le chargement d’une toute nouvelle page, une SPA charge une page initiale une bonne fois pour toutes, puis les actions de l’utilisateur déclenchent des rafraîchissements partiels de l’interface. C’est de là que vient le terme “single page” : une seule page est chargée initialement.

3) Accès serveur via HTTP

Une SPA représente en réalité la partie front-end d’une application, c’est à dire essentiellement son interface. Pour certaines tâches, la SPA est obligée de s’appuyer sur un serveur. Par exemple, pour lire ou écrire des données dans une base de données, ou pour réaliser des tâches complexes qui ne sont pas supportées par le client, comme convertir une vidéo dans un autre format. La SPA communique avec le serveur via des requêtes HTTP envoyées à un web service.


Ces trois caractéristiques font qu’Angular est plus adapté pour certains types de projets web que pour d’autres.

Angular est adapté pour…

Angular est particulièrement adapté pour les types de projet suivants.

Les applications web

Application web

C’est le cas d’usage le plus répandu. L’application occupe l’intégralité de la page et elle n’est accessible qu’aux utilisateurs identifiés. Vous avez sûrement déjà utilisé des applis web de ce type : appli de gestion de comptes bancaires, appli de CRM, générateur de formulaire, etc.

Angular est bien adapté à ce cas de figure car il permet de créer une interface complexe et réactive, qui se rapproche d’une application de bureau.

Les mini-sites e-commerce

Mini-site e-commerce

Un mini-site e-commerce est un site web public qui consiste en quelques pages de présentation des produits en vente, un panier, et un mécanisme d’achat en ligne.

Ce genre de site est finalement un type particulier de mini-application web et là encore, l’utilisation d’Angular permet d’avoir une interface très réactive.

Les tableaux de bord

Tableau de bord

Angular peut servir de “glue” dans les applications de type “tableau de bord”, où il faut agréger des données issues de sources différentes et pouvoir déclencher des actions côté backend. L’architecture par composant d’Angular est bien adaptée à ce type d’interface, où l’on imbrique plusieurs widgets dans une page unique.

Angular n’est PAS idéal pour…

Attention, cela dit, Angular n’est pas la solution idéale pour tous les types de projets. Voici quelques exemples où il existe sûrement de meilleures solutions.

Projets NON adaptés à Angular
 

Sites de contenu

Pour les sites de contenu, le référencement est un point essentiel. En anglais, on parle de SEO, ou Search Engine Optimization, pour désigner toutes les techniques qui améliorent le référencement d’un site par les moteurs de recherche.

Comme les sites Angular sont générés en JavaScript, directement dans le navigateur du client, cela a deux impacts très négatifs sur le référencement :

  • Certains moteurs de recherche ne parviennent pas à exécuter les sites générés en JavaScript, et donc ils ne peuvent pas les indexer.
  • Et aussi, quand une page d’un site JavaScript est partagée sur un réseau social comme Twitter ou Facebook, un robot tente de récupérer les informations associés à cette page (son titre, sa description…) pour les inclure dans le partage. Comme ces robots n’exécutent pas le JavaScript, ils récupèrent une page “vide”, ce qui est très pénalisant pour sa diffusion sur les réseaux sociaux.

Widgets dynamiques

Angular a été conçu pour contrôler l’ensemble de la page web, ce qui le rend idéal pour créer des applications “en pleine page”.

En revanche, si vous avez juste besoin de créer une petite zone dynamique dans une page web — on appelle souvent ça un “widget” — Angular est déconseillé, car vous allez devoir charger tout le framework juste pour ce petit widget. De plus, ce petit widget sera complètement isolé du reste de la page ; il ne pourra pas y accéder ni la modifier.

Remarque. Ce point est en train de changer avec les Angular Elements, mais en attendant que ces derniers arrivent à maturité, cet usage d’Angular n’est pas le plus répandu.

Applis mobiles natives

Rappelez-vous qu’une application Angular consiste en du code JavaScript qui s’exécute dans un navigateur web. Vous pouvez donc utiliser Angular pour créer un site web responsive ou une progressive web app (PWA), mais PAS pour créer une véritable application mobile native, qui s’installe et s’exécute directement sur un smartphone. En effet, Angular n’a accès qu’aux APIs du navigateur, et pas aux APIs du smartphone comme l’appareil photo.

Si vous voulez packager une appli Angular comme une appli mobile native ou hybride, que vous pourrez distribuer via l’App Store ou Google Play, vous devez utiliser en plus d’Angular un framework comme Ionic ou NativeScript.