Situer Angular dans le stack technique (back-end, front-end)

Pour bien utiliser Angular, il est essentiel de comprendre où il se situe dans la pile de toutes les technologies utilisées pour faire tourner une application web. Dans cette recette, je passe en revue les technos les plus couramment utilisées, côté front et côté back, et je vous montre comment Angular s’interface avec ces technos et quelles responsabilités il faut lui confier.

Le mélange des technos

Technos multiples d'une appli Angular

Quand on crée une application Angular, le framework Angular est loin d’être la seule technologie utilisée. Par exemple, on utilise souvent une base de données pour stocker les données de l’application, ou un framework CSS pour formater l’interface. Il est donc naturel de se demander quelles fonctionnalités seront implémentées avec Angular, et quelles fonctionnalités seront implémentées avec d’autres technos.

Pour vous aider à répondre à cette question, je vais vous montrer où Angular se situe dans la pile des technologies utilisées pour faire tourner une application web.

Je vais décomposer ma présentation en deux parties : le front-end et le back-end.

Technos front-end d’une application web

Commençons par le front-end, c’est-à-dire pour simplifier, le navigateur de l’utilisateur.

Technos front-end d'une appli Angular

De ce côté, on va trouver :

  • Angular lui-même, qui est responsable de l’interface de l’application. En général, Angular récupère des données du back-end, les affiche à l’utilisateur via une jolie interface contenant des boutons, des formulaires… et ces boutons et ces formulaires permettent de déclencher des modifications côté back-end. On pourrait donc dire qu’Angular fait l’intermédiaire entre l’utilisateur et le back-end.
  • Des “aides visuelles”. Des frameworks CSS, comme Bootstrap, qui contiennent des classes CSS prédéfinies. Des librairies de composants Angular, comme Angular Material ou Ng-Bootstrap, qui fournissent des composants visuels prêts à l’emploi comme des fenêtres modales. Des librairies qui génèrent des éléments d’interface, comme Chart.js qui génère des graphiques de type “camemberts” ou des diagrammes…
  • Des librairies JavaScript. Ça peut être des librairies qui facilitent l’intégration d’APIs tierce-partie dans votre application. Par exemple, le JavaScript SDK de Facebook. Ou bien des librairies qui facilitent le développement en général, comme Lodash qui contient des fonctions utilitaires JavaScript.

Parmi toutes ces technologies, Angular a le rôle de chef d’orchestre. C’est lui qui pilote l’application et qui s’appuie sur les différentes librairies pour effectuer son travail.

Notons aussi qu’Angular utilise des requêtes HTTP pour communiquer avec les technos qui s’exécutent côté serveur. Passons-les en revue maintenant.

Technos back-end d’une application web

Sur le back-end, on trouve les technos qui sont trop complexes ou gourmandes en ressources pour s’exécuter sur le front, ainsi que les données qui ont besoin d’être sécurisées.

Technos back-end d'une appli Angular

Il y a notamment :

  • La base de données. Il peut s’agir d’une base de données classique exposée derrière un web service maison (ex : MySQL + framework Java Spring), ou d’une base de données dans le cloud (ex : Amazon SimpleDB).
  • L’authentification. Là aussi, plusieurs configurations possibles : une solution maison (ex : base de données + Spring Security), une authentification tierce-partie (ex : Google Sign-In permet à vos utilisateurs d’utiliser leur compte Google), une API d’authentification (ex : Auth0)…
  • Les API / web services. Cette catégorie est assez large et dépend vraiment de votre projet. Par exemple, si vous développez une application bancaire, vous pourriez avoir une API de virement bancaire. Là encore, ce type d’API peut être de confection maison ou bien fourni par un éditeur tierce-partie.
  • Angular. Eh oui, Angular peut être exécuté côté serveur, grâce à Angular Universal. L’intérêt est d’améliorer les performances de l’application et d’optimiser le référencement par les moteurs de recherche. Ce n’est pas l’usage le plus répandu d’Angular, mais c’est faisable et parfois nécessaire.

Notons pour terminer que la communication entre le front et le back

Quelles fonctionnalités implémenter avec Angular ?

Maintenant qu’on a passé en revue les différentes technos front et back, on peut se demander quelles fonctionnalités doivent être développées avec Angular spécifiquement.

Pour résumer, Angular est responsable de trois choses :

  1. Générer l’interface de l’application et réagir aux actions de l’utilisateur. C’est la partie qui se passe dans le navigateur de l’utilisateur.
  2. Récupérer et envoyer des données depuis/vers le serveur, sachant que dans la pratique Angular interagit souvent avec plusieurs serveurs. Pour ça, Angular utilise des requêtes HTTP.
  3. Déclencher des actions côté serveur, en passant par des web services (par ex, envoyer un e-mail). Pour ces tâches-là, Angular utilise à nouveau des requêtes HTTP.

Si une fonctionnalité appartient à l’une des catégories ci-dessus, elle doit probablement faire partie de l’appli Angular.

Pour les autres fonctionnalités, posez-vous les questions suivantes :

  • La fonctionnalité doit-elle être sécurisée ? Gardez en tête qu’il n’y a pas de véritable sécurité côté client. Votre code se trouve dans le navigateur de l’utilisateur, il pourrait donc être modifié. Pour garantir la sécurité, il faut se placer côté back-end, où l’accès aux données et l’accès au code peuvent être restreints aux utilisateurs qui sont authentifiés et qui ont les permissions adéquates.
  • La fonctionnalité est-elle trop complexe pour un navigateur web ? Peut-être qu’une fonctionnalité nécessite une puissance de traitement ou l’utilisation d’une librairie qui ne sont pas disponibles dans un navigateur ? Par exemple, la librairie Natural Language Toolkit permet d’interpréter le langage naturel. Comme elle est codée en Python, elle ne peut être utilisée que côté serveur.

Pour conclure, on pourrait dire qu’Angular coordonne toutes les technos utilisées côté front-end et gère toutes les communications avec le back-end.

On pourrait dire aussi que si on arrive à dissocier front-end et back-end dans l’absolu, les deux sont étroitement liés dans la pratique. La plupart du temps, une action sur le front-end (par ex, un clic sur un bouton) déclenchera une action côté back-end (par ex, une écriture dans une base de données). Ou bien, les données fournies par le back-end se retrouvent affichées et modifiées sur le front-end.

En somme, front et back sont les deux faces d’une même pièce.