Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Angular et Node.js
  3. Introduction
Extrait - Angular et Node.js Optimisez le développement de vos applications web avec une architecture MEAN (2e édition)
Extraits du livre
Angular et Node.js Optimisez le développement de vos applications web avec une architecture MEAN (2e édition) Revenir à la page d'achat du livre

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 :

  • Le premier est d’industrialiser, et donc de réutiliser, des briques logicielles éprouvées pour augmenter la productivité (et la sécurité) du développement.

  • Le second est d’optimiser la charge des serveurs qui ne cesse d’augmenter (notamment dans le cas de la gestion des réseaux sociaux ou du commerce en ligne).

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 :

  • De découpler complètement la partie client (le « client-side ») de la partie serveur (le « server-side ») le client invoquant le serveur en sélectionnant des routes dont la syntaxe RESTful orientée données n’exhibe pas les traitements sous-jacents.

  • D’accéder aux données de manière extrêmement réactive grâce à l’efficacité du serveur Node.js et à la souplesse du serveur de base de données NoSQL MongoDB.

  • De créer les pages web de manière modulaire et réutilisable (avec des composants et des modules) grâce au framework applicatif Angular.

  • D’homogénéiser le développement autour du langage JavaScript et de son extension TypeScript permettant une programmation objet avec des classes (il est aussi possible d’utiliser le langage Dart).

1. Le principe des applications monopages (single page applications)

Les applications monopages sont initialement chargées sur le client, les accès au serveur n’étant destinés qu’aux échanges de données.

Les bénéfices d’une telle architecture sont nombreux...

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 :

  • Une base de données MongoDB comprenant trois collections :

  • Une collection Users mémorisant les identifiants des clients.

  • Une collection Products mémorisant les produits en vente.

  • Une collection Carts mémorisant les paniers en cours.

  • Un serveur Node.js gérant les services web échangeant des données entre la base de données MongoDB et l’application Angular.

  • Une application monopage Angular modulaire gérant, outre le module principal, deux modules (susceptibles d’être réutilisés dans d’autres applications) :

  • Un module qui permet de sélectionner des produits en appliquant n’importe quelle combinaison de critères de recherche sur :

  • leurs types ;

  • leurs marques ;

  • leurs prix (via des intervalles de prix) ;

  • leurs popularités.

    ou en effectuant...