Introduction

Introduction

Si le développement des applications web est depuis toujours en constante évolution, il apparaît que deux besoins deviennent de plus en plus prégnants :

L’industrialisation du développement des applications web exige de créer des applications modulaires, les modules implémentant de grandes fonctionnalités, et d’identifier des briques logicielles (en fait des composants) à partir desquelles les modules sont bâtis.

L’optimisation de la charge des serveurs implique de recentrer ceux-ci sur la gestion des flux de données et de les décharger de la tâche de génération des pages web. Dans cette optique, le client (dans la plupart des cas, un navigateur) doit donc accueillir une application complète (ou presque complète, quelques composants pouvant être chargés ultérieurement), assez légère pour être chargée en mémoire centrale et se satisfaisant de l’environnement d’exécution du navigateur....

L’architecture MEAN pour une application web

L’architecture MEAN met en jeu quatre acteurs : le SGBD MongoDB, le framework Express, le framework Angular et un serveur Node.js.

Cette architecture permet :

Angular au centre de l’architecture MEAN

L’application Angular est généralement constituée de différents modules (un module principal et plusieurs (sous-)modules implémentant les grandes fonctionnalités de l’application), les modules regroupant eux-mêmes des composants implémentés par des classes. Chaque composant dont la vue apparaît dans l’interface globale (qui correspond à la page unique de l’application) possède un template. Ce template peut soit être intégré dans le template d’un autre composant via une balise qui représente le composant (cette balise étendant donc le langage HTML), soit être inséré à un moment donné à un emplacement particulier (une outlet) par le routeur qui active temporairement le composant.

La mise en œuvre du routeur permet de créer des vues temporaires et instaure un découplage fort entre une action (exprimée par la sélection d’une route) et un ou plusieurs composants activés en conséquence de cette action.

Des services Angular qui sont des composants « utilitaires » (pouvant être utilisés par plusieurs composants et ne possédant pas de template) gèrent principalement les flux de données en provenance ou en direction du serveur Node.js. Quant à lui...

Présentation du fil rouge : une application d’e-commerce

Pour illustrer notre propos, nous vous proposons de créer pas à pas une maquette d’application d’e-commerce (un marketplace). Ce fil rouge ne présentera que l’ossature minimaliste d’une telle application, que ce soit du côté de l’application cliente Angular ou du serveur (nous mettrons en œuvre une base de données extrêmement simplifiée).

Cette maquette d’une application d’e-commerce sera donc construite via l’architecture MEAN, en mobilisant :