Pila de tecnología
Antes de sumergirnos en la pila de MERN, comprendamos rápidamente qué es una pila tecnológica. Una pila de tecnología es un conjunto de tecnologías que usted elige y utiliza para crear una aplicación web, una aplicación móvil o aplicaciones similares. Una buena pila tecnológica debe ofrecer una experiencia de usuario fluida, además de ser escalable y rentable. Una pila tecnológica típica contiene una interfaz, un backend y una base de datos y se conoce como pila tecnológica completa.
Por lo general, las tecnologías básicas de front-end o interfaz de usuario siguen siendo las mismas, es decir, HTML, CSS y JavaScript. Dependiendo de los requisitos del proyecto, puedes utilizar bibliotecas y frameworks, como React o Angular, que se basan en estas tecnologías de interfaz de usuario.
El back-end consiste en un servidor, donde reside la lógica de su aplicación. Puede escribir la lógica de la aplicación en uno o más lenguajes de programación como JavaScript, Java, Python o usar marcos como Django, Spring Express.js. Para ejecutar los programas, su aplicación necesita un tiempo de ejecución como Node.js, JRE (Java Runtime Environment).
La base de datos es el centro de almacenamiento, donde se almacenan todos los datos relacionados con la aplicación. Puede optar por almacenar sus datos en una estructura tabular (utilizando sistemas de bases de datos relacionales) o utilizando sistemas no relacionales, también llamados NoSQL, como la estructura de documentos, la estructura de gráficos, etc., y seleccionar la base de datos en consecuencia. Algunos ejemplos de bases de datos son MongoDB, Oracle, MySQL.
¿Qué es la pila MERN?
Una pila de tecnología puede ser personalizada (los desarrolladores pueden elegir las tecnologías en función de los requisitos de su proyecto) o preconstruida (cuando las tecnologías se han decidido previamente).
MERN es una pila de tecnología prediseñada basada en tecnologías JavaScript. MERN son las siglas de MongoDB, Express, React y Node, en honor a las cuatro tecnologías clave que componen la pila.
- MongoDB: base de datos de documentos
- Express(.js) — Node.js marco web
- React(.js) — un marco de JavaScript del lado del cliente
- Node(.js) — el principal servidor web JavaScript (tiempo de ejecución)
Express y Node conforman el nivel intermedio (aplicación). Express.js es un marco web del lado del servidor y Node.js es la popular y potente plataforma de servidores JavaScript. Independientemente de la variante que elija, ME(RVA)N es el enfoque ideal para trabajar con JavaScript y JSON, en todo momento.
¿Cómo funciona la pila MERN?
La arquitectura MERN le permite construir fácilmente una arquitectura de tres niveles (front-end, back-end, base de datos) utilizando completamente JavaScript y JSON.
React.js front-end
El nivel superior de la pila MERN es React.js, el marco de JavaScript declarativo para crear aplicaciones dinámicas del lado del cliente en HTML. React te permite crear interfaces complejas a través de componentes simples, conectarlos a datos en tu servidor back-end y renderizarlos como HTML.
El punto fuerte de React es el manejo de interfaces con estado, basadas en datos, con un mínimo de código y molestias, y tiene todas las características que esperarías de un marco web moderno: gran soporte para formularios, manejo de errores, eventos, listas y más.
Express.js y Node.js nivel de servidor
El siguiente nivel hacia abajo es el marco del lado del servidor Express.js, que se ejecuta dentro de un servidor Node.js. Express.js se promociona como un “marco web rápido, minimalista y sin opiniones para Node.js”, y eso es exactamente lo que es. Express.js cuenta con potentes modelos para el enrutamiento de URL (hacer coincidir una URL entrante con una función de servidor) y el manejo de solicitudes y respuestas HTTP.
Al realizar solicitudes HTTP XML (XHR), GET o POST desde su React.js front-end, puede conectarse a Express.js funciones que impulsan su aplicación. Esas funciones, a su vez, utilizan los controladores Node.js de MongoDB para acceder y actualizar los datos de su base de datos de MongoDB.
Nivel de base de datos de MongoDB
Si su aplicación almacena datos (perfiles de usuario, contenido, comentarios, cargas, eventos, etc.), entonces querrá una base de datos que sea tan fácil de trabajar como React, Express y Node.js.
Ahí es donde entra en juego MongoDB: los documentos JSON creados en su React.js front-end se pueden enviar al servidor Express.js, donde se pueden procesar y (suponiendo que sean válidos) almacenarse directamente en MongoDB para su posterior recuperación. Nuevamente, si estás construyendo en la nube, querrás mirar MongoDB Atlas. Si estás buscando configurar tu propia pila MERN, ¡sigue leyendo!
Ejemplo de una solicitud/respuesta simple utilizando la pila MERN
Una solicitud HTTP típica (de un cliente) realiza una de las 4 operaciones: POST, GET, PUT, DELETE correspondientes a las cuatro operaciones de base de datos: Crear, Leer, Actualizar y Eliminar (CRUD) respectivamente. Para atender estas solicitudes, el Express.js proporciona objetos de solicitud y respuesta que almacenan los parámetros necesarios. La solicitud HTTP almacena los datos proporcionados por el usuario final y la respuesta HTTP almacena los datos que se recuperan de la base de datos.
Con el controlador de Node.js de MongoDB , puede conectar fácilmente sus implementaciones de MongoDB a la aplicación en unos sencillos pasos.
Una de las características más importantes de la pila MERN es que todas las tecnologías almacenan datos en el mismo formato.
La capa front-end, React, almacena los datos como un objeto JavaScript, la capa back-end (aplicación) utiliza código JavaScript y la capa de datos MongoDB almacena los datos en formato BSON (Binary JavaScript ON). Express convierte datos entre JS y JSON usando el .json() método.
Node.js permite a los desarrolladores escribir la lógica de las aplicaciones de fondo (del lado del servidor) en JavaScript. Aunque Node.js proporciona módulos http principales, escribir lo mismo en Express proporciona una experiencia de código más limpia. Express también proporciona potentes funciones de enrutamiento para obtener los datos necesarios desde el punto final correcto, otro lugar donde los desarrolladores no necesitan escribir código explícito para el enrutamiento.
Dado que el código está escrito en el mismo lenguaje (JavaScript) de principio a fin, se ahorra mucho tiempo que, de otro modo, se destinaría a conversiones durante la transición de una capa a otra.
Supongamos que un cliente (cliente) quiere actualizar su número de móvil a través de un portal en línea. El frontend, construido con React.js, tendría un formulario donde el usuario puede ingresar el número de teléfono móvil. React utiliza el enlace " UseState " para establecer el número de teléfono móvil introducido por el cliente en el parámetro de solicitud.
El código Express.js toma el número de móvil de la solicitud put http, lo asigna al esquema del modelo de datos de la aplicación y aplica el método correspondiente (por ejemplo, findByIdAndUpdate()) para realizar la operación de actualización. A continuación, la respuesta se envía a través del objeto de respuesta http con un mensaje de éxito/error.
Un ejemplo completo está disponible en la página del tutorial de la pila MERN .
Desarrollo de pila MERN vs. desarrollo de pila completa
La pila MERN es un tipo de pila completa, en la que las capas de tecnología están predefinidas. Un desarrollador full stack tiene una curva de aprendizaje más alta, ya que tiene que ser experto en varias tecnologías, mientras que un desarrollador de MERN solo necesita conocer las tecnologías correspondientes. Las siguientes diferencias importantes le ayudarán a elegir entre una pila completa personalizada y una pila MERN, según los requisitos de su proyecto: