Este artículo está basado en mi piedra angular para la City University of Seattle. El título de mi investigación es "Documentación de software y análisis arquitectónico del desarrollo Full Stack". El objetivo de mi investigación era reducir la curva de aprendizaje en la comprensión de proyectos de código abierto y el desarrollo de pila completa, y elijo MEAN Stack.
He creado los siguientes diagramas, usando Lucidchart, para facilitar la comprensión. Estos diagramas UML se basaron en el modelo de vista arquitectónica 4 + 1:
- Analogía del restaurante
- Vista de proceso usando diagrama de secuencia
- Escenario usando diagrama de secuencia
- Vista física mediante el diagrama de implementación
- Vista de desarrollo usando el diagrama de paquete
- Vista lógica usando el diagrama de clases
La investigación se centró más en la implementación y el flujo de solicitudes y respuestas.
Pila MEAN
MEAN Stack es una solución de código abierto JavaScript de pila completa. Está compuesto por MongoDB, Express, Angular y Node.js.
La idea detrás de esto es resolver los problemas comunes al conectar esos marcos, crear un marco sólido para respaldar las necesidades de desarrollo diarias y ayudar a los desarrolladores a usar mejores prácticas mientras trabajan con componentes populares de JavaScript.
Back-end con Node.js
Node.js está diseñado para manejar E / S asincrónicas, mientras que JavaScript tiene un bucle de eventos integrado para el lado del cliente. Esto hace que Node.js sea más rápido en comparación con otros entornos. Sin embargo, el enfoque de devolución de llamada / impulsado por eventos hace que Node.js sea difícil de aprender y depurar.
Node.js incluye módulos como Mongoose, que es un modelado de objetos MongoDB, y el marco de trabajo de la aplicación web Express. A través de los módulos de nodo, se puede lograr la abstracción, lo que reduce la complejidad general de la pila MEAN.
Back-end con Express Framework
Express es un marco de aplicación minimalista y sin supervisión para Node.js. Es una capa sobre Node.js que tiene muchas funciones para el desarrollo web y móvil sin ocultar ninguna funcionalidad de Node.js.
Interfaz con Angular
Angular es una plataforma de desarrollo web construida en TypeScript que proporciona a los desarrolladores herramientas sólidas para crear el lado del cliente de aplicaciones web.
Permite el desarrollo de aplicaciones web de una sola página donde el contenido cambia dinámicamente en función del comportamiento y las preferencias del usuario. Cuenta con inyección de dependencia para garantizar que cada vez que se cambie un componente, otros componentes relacionados con él se cambiarán automáticamente.
Base de datos con MongoDB
MongoDB es una base de datos NoSQL que almacena datos en BJSON (notación de objetos JavaScript binarios).
MongoDB se convirtió en la base de datos estándar de facto para las aplicaciones Node.js para cumplir con el paradigma "JavaScript en todas partes" utilizando JSON (JavaScript Object Notation) para transmitir datos a través de diferentes niveles (front-end, back-end y la base de datos).
Ahora que hemos sacado esos conceptos básicos del camino, veamos estos diagramas.
Analogía del restaurante
Como quería abordar la empinada curva de aprendizaje, elegí una analogía de restaurante para permitirle al usuario comprender y retener el proceso de solicitud y respuesta en una aplicación de pila completa.
El cliente (usuario final) solicita su pedido a través del camarero (controlador) y el camarero entrega la solicitud a la persona en la ventanilla de pedidos (fábrica de servicio).
Estos tres componentes conforman el servidor de aplicaciones para el usuario. La fábrica de servicios será la que se comunique con el cocinero (controlador) en el back-end. Luego, el cocinero tomará los ingredientes necesarios (datos) en el refrigerador (servidor de base de datos).
El frigorífico podrá proporcionar el material (datos) necesario al cocinero en el back-end. El cocinero ahora puede procesar esos datos y enviarlos de vuelta a la fábrica de servicios del front-end.
El controlador (camarero) entregará la comida preparada al cliente (usuario). El cliente ahora podrá consumir la comida (datos).
Vista de proceso usando diagrama de secuencia
Quién lo usa o qué muestra:
- Integradores
- Actuación
- Escalabilidad
En la vista de proceso, primero muestro el servidor de aplicaciones para el usuario y el servidor de servicios de fondo por separado y luego los conecto junto con el servidor de base de datos.
En el primer ejemplo, se implementó una aplicación Angular con JSON codificado de forma rígida en un service.tsarchivo (ubicado en Service Factory).
La aplicación Angular puede comunicarse con API de terceros para obtener datos y mostrarlos al usuario.
En nuestro back-end, el ejemplo de la aplicación Node.js comienza con un JSON codificado que se puede procesar y usar como respuesta.
Este back-end se puede conectar a API de terceros o un servidor de base de datos para obtener el JSON, procesarlo y enviarlo de vuelta al solicitante.
Con los procesos del servidor de aplicaciones para el usuario, el servidor de servicios de fondo y el servidor de bases de datos explicados, a continuación muestro la combinación de estos tres servidores:
Cuando se realiza una solicitud HTTP, se activará el front-end y Angular recogerá la solicitud. La solicitud se pasará internamente en Angular con Route enviando una solicitud para la vista a Ver / Plantilla.
Ver / Plantilla solicitará el controlador. Luego, el controlador creará una solicitud HTTP a un punto final RESTful (transferencia de estado representacional) al lado del servidor, que es Express / Node.js. Luego, la solicitud se pasará internamente con Express / Node.js desde su ruta al controlador / modelo.
El controlador / modelo realizará una solicitud a través del ODM de Mongoose para interactuar con el servidor de base de datos que tiene MongoDB. MongoDB procesará la solicitud y responderá la devolución de llamada a Express / Node.js.
Express / Node.js envía una respuesta JSON al controlador angular. El controlador angular respondería entonces con una vista.
Vista de escenario usando diagrama de secuencia
Quién lo usa o qué muestra:
- Describir interacciones entre objetos y entre procesos.
El escenario descrito anteriormente implica que un usuario accede a una aplicación de librería. Cuando el usuario ingresa la URL, se ejecutará JavaScript y llegará al enrutador del servidor de aplicaciones para el usuario, que es AppRoutingModule. AppRoutingModule llamará a BooksComponent, que cargará fetchBooks como su inyección de dependencia.
fetchBooks luego creará una solicitud HTTP al servidor back-end que tiene un enrutador, controlador y modelo para procesar la solicitud y consultar el servidor de base de datos.
El servidor de la base de datos procesa la consulta y, con el servidor de back-end esperando, tomará los datos y los enviará de vuelta al servidor de front-end como una respuesta JSON.
La interfaz ahora tendrá los datos y la vista de plantilla para mostrar al usuario.
Vista física mediante el diagrama de implementación
Quién lo usa y qué muestra:
- Ingeniero de sistemas
- Topología
- Comunicaciones
El diagrama de implementación muestra 3 servidores: front-end, back-end y base de datos. En el front-end, necesitamos el navegador, ya que las aplicaciones angulares son aplicaciones web basadas en navegador.
El servidor back-end aloja nuestro Node.js con Express encima de Node.js. En Express, tenemos la aplicación y Mongoose encima. Express manejará la comunicación tanto en el front-end como en la base de datos. El servidor de base de datos solo incluye MongoDB. Utiliza JSON para comunicarse entre servidores.
En nuestra primera compilación de MEAN Stack, implementaremos localmente usando nuestra máquina local (localhost) para implementar el servidor front-end, el servidor back-end y el servidor de base de datos.
Usaremos los siguientes puertos predeterminados: Angular - puerto 4200, Node.js / Express - puerto 3000 y MongoDB - puerto 27017.
El siguiente diagrama muestra la aplicación web de pila completa en notación UML.
Continuando con la producción real, lo que hay que migrar a la nube es nuestra base de datos. Para MongoDB, elegí MongoDB Atlas como la solución en la nube.
El último paso para la implementación de producción es cargar nuestro código de front-end en Amazon S3 y cargar el back-end en una instancia EC2 con AWS. Todos se comunicarían entre sí con puntos finales HTTP / HTTPS.
Aquí hay otro diagrama para mostrar nuestra implementación de producción sin usar la notación UML.
Vista de desarrollo usando el diagrama de paquete
Quién lo usa y qué muestra:
- Programadores
- Gestión de software
La vista del paquete de la aplicación Angular muestra que cada Componente Angular se importa en el AppModule. AppModule y AppRoutingModule dependen de BooksComponent. BooksComponent depende de BookDetailComponentDialog y ApiService.
La vista de paquete de la aplicación Node.js muestra que todas las operaciones CRUD (controladores), como buscar todos los libros, recuperar un libro, actualizar un libro y eliminar un libro, son importadas por la aplicación. Además, toda la lógica de las operaciones CRUD reside en el libro de modelos.
Vista lógica usando el diagrama de clases
Quién lo usa y qué muestra:
- Usuario final
- Funcionalidad
La aplicación de la librería solo mostraba una clase llamada Libro. Los miembros de la clase son: título, isbn, autor, imagen y precio. Los métodos son: addBook, fetchBooks, fetchBook, updateBook y deleteBook.
La estructura del libro modelo en formato JSON.
Aquí hay algunos videos de los diagramas:
Documentación disponible en mi GitHub:
clarkngo / cityu_capstone Contribuya al desarrollo de clarkngo / cityu_capstone creando una cuenta en GitHub.
clarkngo GitHub
Encuéntrame en LinkedIn. =)