Cet article est basé sur ma pierre angulaire pour l’Université de la ville de Seattle. Le titre de ma recherche est « Documentation logicielle et Analyse Architecturale du Développement Full Stack ». Le but de mes recherches était de réduire la courbe d’apprentissage dans la compréhension des projets open source et du développement de pile complète, et je choisis la pile MOYENNE.
J’ai créé les diagrammes 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 à l’aide du diagramme de Séquence
- Vue Physique à l’aide du Diagramme de Déploiement
- Vue de Développement à l’aide du Diagramme de paquets
- Vue Logique à l’aide du Diagramme de classes
La recherche était plus axée sur le Déploiement et le Flux de Demandes et de Réponses.
La pile MOYENNE est une solution open-source JavaScript à pile complète. Il est composé de MongoDB, Express, Angular et Node.js.
L’idée derrière cela est de résoudre les problèmes courants liés à la connexion de ces frameworks, de construire un framework robuste pour répondre aux 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 nœud.nœud js
.js est conçu pour gérer les E / S asynchrones tandis que JavaScript a une boucle d’événements intégrée pour le côté client. Cela rend Node.js rapide par rapport à d’autres environnements. Cependant, l’approche axée sur les événements /rappel rend Node.js difficile à apprendre et à déboguer.
Nœud.js inclut des modules tels que Mongoose, qui est une modélisation d’objets MongoDB, et le framework d’application Web Express. Grâce aux modules de nœuds, une abstraction peut être réalisée, ce qui réduit la complexité globale de la pile MOYENNE.
Back-end avec Express Framework
Express est un framework d’application minimaliste et sans opinion pour Node.js. C’est une couche au-dessus du nœud.js riche en fonctionnalités pour le développement Web et mobile sans cacher aucun nœud.fonctionnalité js.
Frontal avec Angular
Angular est une plate-forme de développement Web construite en 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 dynamiquement en fonction du comportement et des préférences de l’utilisateur. Il dispose d’une injection de dépendance pour s’assurer que chaque fois qu’un composant est modifié, les autres composants qui lui sont liés seront automatiquement modifiés.
Base de données avec MongoDB
MongoDB est une base de données NoSQL qui stocke les données en BJSON (Notation binaire d’objet JavaScript).
MongoDB est devenu la base de données standard de facto pour Node.applications js pour remplir le paradigme « JavaScript everywhere » en utilisant JSON (JavaScript Object Notation) pour transmettre des données sur différents niveaux (front-end, back-end et la base de données).
Maintenant que nous avons éliminé ces bases, regardons ces diagrammes.
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 complète.
Le client (utilisateur final) demande sa commande par l’intermédiaire du serveur (contrôleur), et le serveur remet la demande à la personne à la fenêtre de commande (service factory).
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 ensuite les ingrédients nécessaires (données) dans le réfrigérateur (serveur de base de données).
Le réfrigérateur pourra fournir le matériel (données) nécessaire au cuisinier en arrière-plan. Le cuisinier peut maintenant traiter ces données et les renvoyer à l’usine de service du frontal.
Le contrôleur (serveur) remettra le repas préparé au client (utilisateur). Le client pourra désormais consommer le repas (données).
Vue du processus à l’aide du diagramme de séquence
Qui l’utilise ou ce qu’il montre:
- Intégrateurs
- Performances
- Évolutivité
Dans la vue processus, j’affiche d’abord séparément le serveur frontal et le serveur dorsal, puis je les connecte avec le serveur de base de données.
Dans le premier exemple, une application Angular a été déployée avec du JSON codé en dur dans un fichier service.ts (situé dans la fabrique de services).
L’application Angular peut communiquer avec des API tierces pour obtenir des données et les afficher à l’utilisateur.
Dans notre back-end, le nœud.l’exemple d’application 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.
Avec les processus du serveur frontal, du serveur dorsal et du serveur de base de données expliqués, je montre la combinaison de ces trois serveurs ci-dessous:
Lorsqu’une requête HTTP est effectuée, le frontal est déclenché et Angular récupère la requête. La demande sera transmise en interne dans Angular avec la route envoyant une demande pour que la vue soit vue / modèle.
View/Template demandera le contrôleur. Le contrôleur créera ensuite une requête HTTP vers un point de terminaison RESTful (transfert d’état de représentation) côté serveur, qui est Express/Node.js. La requête sera ensuite transmise en interne avec Express/Node.js de 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/Noeud.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 le module d’approbation. Le AppRoutingModule appellera le BooksComponent, qui chargera fetchBooks comme 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 l’attente du serveur principal, récupère les données et les renvoie au serveur frontal sous forme de réponse JSON.
Le front-end aura maintenant les données et la vue du modèle à afficher à l’utilisateur.
Vue physique à l’aide du diagramme de déploiement
Qui l’utilise et ce qu’il montre:
- Ingénieur système
- Topologie
- 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 Angular sont des applications Web basées sur un navigateur.
Le serveur principal héberge notre nœud.js avec Express au-dessus du nœud.js. En Express, nous avons l’application et la mangouste en plus. Express gérera la communication à la fois sur le front-end et sur 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 la pile MOYENNE, nous déploierons localement en utilisant notre machine locale (localhost) pour déployer le serveur frontal, le serveur dorsal 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 aller plus loin vers 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 les uns aux autres 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 paquets
Qui l’utilise et ce qu’il montre:
- Programmeurs
- Gestion de logiciels
La vue package de l’application Angular montre que chaque composant Angular est importé dans le module d’application. AppModule et AppRoutingModule dépendent de BooksComponent. Le composant BooksComponent dépend de BookDetailComponentDialog et ApiService.
La vue du paquet du nœud.l’application js montre que toutes les opérations CRUD (contrôleurs) telles que récupérer tous les livres, récupérer un livre, mettre à jour un livre et supprimer un livre sont importées par l’application. De plus, 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 book store ne présentait qu’une seule classe appelée Book. Les membres du groupe sont: titre, isbn, auteur, image et prix. Les méthodes sont : addBook, fetchBooks, fetchBook, updateBook et deleteBook.
La structure du livre modèle au format JSON.
Voici quelques vidéos pour les diagrammes:
Documentation available on my GitHub:
Find me on LinkedIn. =)