Vous voulez comprendre rapidement la pile MEAN? Voici la documentation avec des diagrammes utiles.

Cet article est basé sur ma pierre angulaire pour la City University of Seattle. Le titre de ma recherche est "Documentation logicielle et analyse architecturale du développement Full Stack". Le but de ma recherche était de réduire la courbe d'apprentissage dans la compréhension des projets open source et le développement de la pile complète, et j'ai choisi la pile MEAN.

J'ai créé les schémas suivants, en utilisant Lucidchart, pour une compréhension plus facile. Ces diagrammes UML étaient basés sur le modèle de vue architecturale 4 + 1:

  • Analogie de restaurant
  • Vue de processus à l'aide du diagramme de séquence
  • Scénario utilisant un diagramme de séquence
  • Vue physique à l'aide du diagramme de déploiement
  • Vue de développement à l'aide du diagramme de package
  • Vue logique à l'aide du diagramme de classes

La recherche était davantage axée sur le déploiement et le flux de demandes et de réponses.

Pile MOYENNE

MEAN Stack est une solution open source JavaScript full-stack. Il est composé de MongoDB, Express, Angular et Node.js.

L'idée sous-jacente est de résoudre les problèmes courants liés à la connexion de ces frameworks, de créer un framework robuste pour prendre en charge les besoins de développement quotidiens et d'aider les développeurs à utiliser de meilleures pratiques tout en travaillant avec des composants JavaScript populaires.

Back-end avec Node.js

Node.js est conçu pour gérer les E / S asynchrones, tandis que JavaScript possède une boucle d'événements intégrée côté client. Cela rend Node.js rapide par rapport à d'autres environnements. Cependant, l'approche événementielle / de rappel rend Node.js difficile à apprendre et à déboguer.

Node.js comprend des modules tels que Mongoose, qui est une modélisation d'objet MongoDB, et le cadre d'application Web Express. Grâce aux modules Node, l'abstraction peut être obtenue, ce qui réduit la complexité globale de la pile MEAN.

Back-end avec Express Framework

Express est un cadre d'application minimaliste et sans opinion pour Node.js. C'est une couche au-dessus de Node.js qui est riche en fonctionnalités pour le développement Web et mobile sans masquer aucune fonctionnalité Node.js.

Front-end avec angulaire

Angular est une plate-forme de développement Web intégrée à TypeScript qui fournit aux développeurs des outils robustes pour créer le côté client des applications Web.

Il permet le développement d'applications Web d'une seule page où le contenu change de manière dynamique en fonction du comportement et des préférences de l'utilisateur. Il comporte l'injection de dépendances pour garantir que chaque fois qu'un composant est modifié, les autres composants qui lui sont liés le seront automatiquement.

Base de données avec MongoDB

MongoDB est une base de données NoSQL qui stocke les données dans BJSON (Binary JavaScript Object Notation).

MongoDB est devenu la base de données standard de facto pour les applications Node.js pour remplir le paradigme «JavaScript partout» en utilisant JSON (JavaScript Object Notation) pour transmettre des données à travers différents niveaux (front-end, back-end et la base de données).

Maintenant que nous avons éliminé ces bases, examinons ces schémas.

Analogie de restaurant

Comme je voulais aborder la courbe d'apprentissage abrupte, j'ai choisi une analogie de restaurant pour permettre à l'utilisateur de comprendre et de conserver le processus de demande et de réponse dans une application full stack.

Le client (utilisateur final) demande sa commande via le serveur (contrôleur), et le serveur remet la demande à la personne à la fenêtre de commande (usine de service).

Ces trois composants constituent le serveur frontal. L'usine de service sera celle qui communiquera avec le cuisinier (contrôleur) dans le back-end. Le cuisinier récupérera alors les ingrédients nécessaires (données) dans le réfrigérateur (serveur de base de données).

Le frigo pourra fournir le matériel nécessaire (données) au cuisinier dans le back-end. Le cuisinier peut maintenant traiter ces données et les renvoyer à l'usine de service du front-end.

Le contrôleur (serveur) remettra le repas préparé au client (utilisateur). Le client pourra désormais consommer le repas (données).

Vue de processus à l'aide du diagramme de séquence

Qui l'utilise ou ce qu'il montre:

  • Intégrateurs
  • Performance
  • Évolutivité

Dans la vue processus, je montre d'abord le serveur frontal et le serveur principal séparément, puis je les connecte au serveur de base de données.

Dans le premier exemple, une application Angular a été déployée avec JSON codé en dur dans un service.tsfichier (situé dans Service Factory).

L'application Angular peut communiquer avec des API tierces pour obtenir des données et les afficher à l'utilisateur.

Dans notre back-end, l'exemple d'application Node.js commence par un JSON codé en dur qui peut être traité et utilisé comme réponse.

Ce back-end peut être connecté à des API tierces ou à un serveur de base de données pour obtenir le JSON, le traiter et le renvoyer au demandeur.

Après avoir expliqué les processus du serveur frontal, du serveur principal et du serveur de base de données, je montre la combinaison de ces trois serveurs ci-dessous:

Lorsqu'une requête HTTP est effectuée, le front-end sera déclenché et Angular prendra la requête. La demande sera transmise en interne dans Angular avec Route envoyant une demande pour la vue à View / Template.

View / Template demandera au contrôleur. Le contrôleur créera ensuite une requête HTTP vers un point de terminaison RESTful (Representational state transfer) vers le côté serveur, qui est Express / Node.js. La demande sera ensuite transmise en interne avec Express / Node.js depuis sa route vers le contrôleur / modèle.

Le contrôleur / modèle fera une demande via l'ODM Mongoose pour interagir avec le serveur de base de données qui a MongoDB. MongoDB traitera la demande et répondra au rappel à Express / Node.js.

Express / Node.js envoie une réponse JSON au contrôleur angulaire. Le contrôleur angulaire répondrait alors avec une vue.

Vue de scénario à l'aide du diagramme de séquence

Qui l'utilise ou ce qu'il montre:

  • Décrire les interactions entre objets et entre processus

Le scénario décrit ci-dessus implique un utilisateur accédant à une application de librairie. Lorsque l'utilisateur entre l'URL, JavaScript sera exécuté et atteindra le routeur du serveur frontal, qui est l'AppRoutingModule. L'AppRoutingModule appellera le BooksComponent, qui chargera fetchBooks comme son injection de dépendance.

fetchBooks créera ensuite une requête HTTP vers le serveur principal qui dispose d'un routeur, d'un contrôleur et d'un modèle pour traiter la requête et interroger le serveur de base de données.

Le serveur de base de données traite la requête et, avec le serveur principal en attente, récupère les données et les renvoie au serveur frontal en tant que réponse JSON.

Le front-end aura maintenant les données et la vue de modèle à montrer à l'utilisateur.

Vue physique à l'aide du diagramme de déploiement

Qui l'utilise et ce qu'il montre:

  • Ingénieur système
  • Topologie
  • Les communications

Le diagramme de déploiement montre 3 serveurs: front-end, back-end et base de données. Dans le front-end, nous avons besoin du navigateur car les applications angulaires sont des applications Web basées sur un navigateur.

Le serveur principal héberge notre Node.js avec Express au-dessus de Node.js. Dans Express, nous avons l'application et Mongoose en plus. Express gérera la communication sur le front-end et la base de données. Le serveur de base de données inclut uniquement MongoDB. Il utilise JSON pour communiquer entre les serveurs.

Dans notre première version de MEAN Stack, nous déploierons localement à l'aide de notre machine locale (localhost) pour déployer le serveur frontal, le serveur principal et le serveur de base de données.

Nous utiliserons les ports par défaut suivants: Angular - port 4200, Node.js / Express - port 3000 et MongoDB - port 27017.

Le diagramme ci-dessous montre l'application Web full stack en notation UML.

Pour passer à la production réelle, la chose à migrer vers le cloud est notre base de données. Pour MongoDB, j'ai choisi MongoDB Atlas comme solution cloud.

La dernière étape du déploiement en production consiste à télécharger notre code frontal sur Amazon S3 et à télécharger le back-end dans une instance EC2 avec AWS. Ils communiqueraient tous entre eux avec des points de terminaison HTTP / HTTPS.

Voici un autre diagramme pour montrer notre déploiement de production sans utiliser la notation UML.

Vue de développement à l'aide du diagramme de package

Qui l'utilise et ce qu'il montre:

  • Programmeurs
  • Gestion des logiciels

La vue du package de l'application Angular montre que chaque composant angulaire est importé dans l'AppModule. AppModule et AppRoutingModule dépendent de BooksComponent. Le BooksComponent dépend de BookDetailComponentDialog et ApiService.

La vue du package de l'application Node.js montre que toutes les opérations CRUD (contrôleurs) telles que la récupération de tous les livres, la récupération d'un livre, la mise à jour d'un livre et la suppression d'un livre sont importées par l'application. En outre, toute la logique des opérations CRUD réside dans le livre de modèles.

Vue logique à l'aide du diagramme de classes

Qui l'utilise et ce qu'il montre:

  • Utilisateur final
  • Fonctionnalité

L'application de la librairie ne présentait qu'une seule classe appelée Book. Les membres de la classe sont: titre, isbn, auteur, image et prix. Les méthodes sont: addBook, fetchBooks, fetchBook, updateBook et deleteBook.

La structure du modèle Book au format JSON.

Voici quelques vidéos pour les schémas:

Documentation disponible sur mon GitHub:

clarkngo / cityu_capstone Contribuez au développement de clarkngo / cityu_capstone en créant un compte sur GitHub. clarkngo GitHub

Trouvez-moi sur LinkedIn. =)