Este artículo se basa en mi conclusión para la Universidad de la Ciudad de Seattle. El título de mi investigación es «Documentación de Software y Análisis Arquitectónico de Desarrollo de Pila Completa». El objetivo de mi investigación era reducir la curva de aprendizaje en la comprensión de los proyectos de código abierto y el desarrollo de pila completa, y elijo la pila MEDIA.
He creado los siguientes diagramas, utilizando Lucidchart, para facilitar la comprensión. Estos diagramas UML se basaron en el modelo de vista arquitectónica 4+1:
- Analogía de restaurante
- Vista de proceso mediante Diagrama de secuencia
- Escenario mediante Diagrama de secuencia
- Vista Física mediante Diagrama de Despliegue
- Vista de Desarrollo mediante Diagrama de Paquetes
- Vista Lógica mediante Diagrama de Clases
La investigación se centró más en el Despliegue y el Flujo de Solicitudes y Respuestas.
La MEDIA de la Pila es una pila de JavaScript de código abierto solución. Se compone de MongoDB, Express, Angular y Node.js.
La idea detrás de esto es resolver los problemas comunes con la conexión de esos marcos, construir un marco sólido para respaldar las necesidades diarias de desarrollo y ayudar a los desarrolladores a usar mejores prácticas mientras trabajan con componentes de JavaScript populares.
Back-end con nodo.Nodo js
.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 Nodo.js rápido en comparación con otros entornos. Sin embargo, el enfoque basado en eventos/devolución de llamada hace Nodo.js difícil de aprender y depurar.
Nodo.js incluye módulos como Mongoose, que es un modelado de objetos MongoDB, y el framework de aplicaciones web Express. A través de módulos de nodo, se puede lograr la abstracción, lo que reduce la complejidad general de la pila DE MEDIAS.
Back-end con framework Express
Express es un framework de aplicaciones minimalista y no definido para Node.js. Es una capa en la parte superior del nodo.js que es rico en funciones para el desarrollo web y móvil sin ocultar ningún nodo.funcionalidad js.
Front-end con Angular
Angular es una plataforma de desarrollo web integrada en TypeScript que proporciona a los desarrolladores herramientas sólidas para crear el lado cliente de las 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 dependencias para garantizar que, cada vez que se cambie un componente, se cambien automáticamente otros componentes relacionados con él.
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 Node.aplicaciones js para cumplir con el paradigma «JavaScript en todas partes» utilizando JSON (Notación de objetos JavaScript) 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, echemos un vistazo a estos diagramas.
Analogía de restaurante
Como quería abordar la curva de aprendizaje empinada, elegí una analogía de restaurante para permitir 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 ventana de pedidos (fábrica de servicio).
Estos tres componentes conforman el servidor front-end. La fábrica de servicio será la que se comunique con el cocinero (controlador) en el back-end. El cocinero tomará los ingredientes necesarios (datos) en la nevera (servidor de base de datos).
La nevera será capaz de proporcionar el material necesario (datos) para el cocinero en el back-end. El cocinero ahora puede procesar esos datos y enviarlos de vuelta a la fábrica de servicio del front-end.
El controlador (camarero) entregará la comida preparada al cliente (usuario). El cliente ahora podrá consumir la comida (datos).
Vista de Proceso mediante un Diagrama de Secuencia
el Que lo usa o lo que se muestra:
- Integradores
- Rendimiento
- Escalabilidad
En la vista de proceso, muestro el servidor front-end y el servidor back-end por separado al principio y luego los conecto al servidor de base de datos.
En el primer ejemplo, se implementó una aplicación Angular con JSON codificado en un archivo service.ts (ubicado en la fábrica de servicios).
El ángulo de aplicación puede comunicarse con terceros de la Api para obtener datos y mostrarlos al usuario.
En nuestro back-end, el Nodo.el ejemplo de aplicación 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 a un servidor de base de datos para obtener el JSON, procesarlo y enviarlo de vuelta al solicitante.
Con el servidor front-end, back-end servidor, y el servidor de base de datos de los procesos explicó, que muestran la combinación de estos tres servidores a continuación:
Cuando una solicitud HTTP, el front-end se activará y Angular recogerá la solicitud. La solicitud se pasará internamente en Angular con la ruta enviando una solicitud para que la vista se Vea/Plantilla.
La vista / Plantilla solicitará el Controlador. A continuación, el Controlador creará una solicitud HTTP a un punto final RESTful (Transferencia de estado de representación) al lado del servidor, que es Express/Node.js. La solicitud se pasará internamente con Express / Node.js de su Ruta al Controlador / Modelo.
El Controlador/Modelo hará una solicitud a través del ODM de Mangosta 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/Nodo.js envía una respuesta JSON al Controlador Angular. El Controlador Angular respondería entonces con una vista.
Vista de escenario utilizando diagrama de secuencia
Quién lo usa o qué muestra:
- Describir las 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 ingrese la URL, se ejecutará JavaScript y llegará al enrutador del servidor front-end, que es el módulo de enrutamiento. El módulo de asignación llamará al componente de libros, que cargará fetchBooks como su inyección de dependencia.
fetchBooks creará una solicitud HTTP al servidor back-end que tiene un enrutador, un controlador y un modelo para procesar la solicitud y consultar el servidor de base de datos.
El servidor de base de datos procesa la consulta, y con el servidor de back-end en espera, tomará los datos y los enviará de vuelta al servidor de front-end como una respuesta JSON.
El front-end ahora tendrá los datos y la vista de plantilla para mostrar al usuario.
Vista física mediante diagrama de implementación
Quién la 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, requerimos el navegador, ya que las aplicaciones Angulares son aplicaciones web basadas en navegador.
El servidor back-end aloja nuestro nodo.js con Express en la parte superior del nodo.js. En Express, tenemos la aplicación y la mangosta encima. Express se encargará de 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 la pila MEDIA, implementaremos localmente utilizando 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, Nodo.puerto js / Express 3000 y puerto MongoDB 27017.
El siguiente diagrama muestra la aplicación web de pila completa en notación UML.
ir a la producción real, la cosa para 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 front-end en Amazon S3 y cargar el back-end en una instancia EC2 con AWS. Todos se comunicarían entre sí con endpoints HTTP / HTTPS.
Aquí hay otro diagrama para mostrar nuestra implementación de producción sin usar notación UML.
Vista de desarrollo utilizando Diagrama de paquetes
Quién la usa y qué muestra:
- Programadores
- Gestión de software
La vista de paquetes de la aplicación Angular muestra que cada componente Angular se importa en el AppModule. AppModule y AppRoutingModule dependen de BooksComponent. El BooksComponent depende de BookDetailComponentDialog y ApiService.
El paquete de la vista de el Nodo.la aplicación js muestra que todas las operaciones CRUD (controladores), como recuperar 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 operaciones CRUD reside en el libro de modelos.
Vista Lógica utilizando el Diagrama de clases
el Que lo usa y lo que muestra:
- Usuario final
- Funcionalidad
La aplicación de la tienda de libros solo mostraba una clase única 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.
El modelo del Libro se estructura en formato JSON.
Aquí hay algunos videos de los diagramas:
Documentation available on my GitHub:
Find me on LinkedIn. =)