Cuando hablamos de crear aplicaciones web, sabemos que tendremos que usar un lenguaje de programacion de Backend (Java, C#, Go, Python, PHP, etc), uno de Frontend, que es Javascript, ademas de escoger alguna base de datos que por lo general es SQL (MySQL, MariaDB, PostgreSQL, SQL Server), y que tambien tiene su propia sintaxis y reglas de lenguaje.

Pero como actualmente Javascript es muy normal que se ejecute en más de un entorno (Backend, Frontend, Desarrollo Movil, Dektop, y más), incluido el backend, tenemos otras opciones que nos pueden simplificar el desrrollo de aplicaciones web y permitirnos crearlas de una forma que puede ser más simple y rápida, usando un solo lenguaje en su mayoria.

El día hoy les voy a hablar del Stack MERN. Pero, primero veamos que es un Stack.

¿Qué es el Stack MERN?

Un Stack en desarrollo de sotfware hace referencia a un conjunto de herramientas que usandolas conjutamente nos permiten crear aplicaciones

Hay muchos Stacks, que estan conformados por herramientas de distintos Lenguajes, por ejemplo entre algunos de estos estan:

• LAMP o WAMP, que es la combinacion de Linux o Windows, junto con Apache, MySQL y PHP, o Perl o Python
• WISA (Windows, IIS, SQL Server, ASP.NET): un stack web utilizado en el desarrollo web de aplicaciones basadas en ASP.NET. En donde Windows es el sistema operativo, IIS es el servidor web, SQL Server es la base de datos y ASP.NET es el framework. Este tambien es el stack de C#
• TALL (Tailwind CSS, Alpine.js, Laravel, Livewire)

y Así. en realidad todos estas tecnología funcionan por separado, asi que el terminos Stack es solo una forma de poder referirnos a todas estas rapidamente, y que no tienen que funcionar obligatoriamente juntas.

Entonces cuando hablamos del Stack MERN, estoy hablando de un conjunto de tecnologías que en su gran mayoria usan Javascript como lenguaje de programacion principal, y que unidas nos permite crear aplicaciones web de inicio a Fin.

las Siglas MERN viene de las tecnologías principales que lo conforman:

• la M, de Mongodb, una base de datos NoSQL
• la E, de Express, el Framework más popular de Nodejs
• la R, de React, un Framework de Frontend para poder crear interfaces de usuario
• la N, de Nodejs, el entorno de ejecucion de Javascript que permite a todo el ecosistema de paquetes funcionar

De hecho La M de Mongodb tambien podrias cambiarla por la M de MySQL, o Mariadb. y seguiria siendo el mismo Stack.

O si quiseramos generar un Stack nuevo, podriamos cambiar React por Vuejs (MEVN), Angular(MEAN), Svelte o Solidjs. y Seguiria siendo un Frontend que usa un Framewokr de Javascript, aunque ya no seria el mismo Stack o Express lo puedes cambiar por otro framework de NOdejs como Fastify o Nestjs. o incluso Nodejs lo puedes cambiar por Deno.

como notas, hay muchas cosas que podemos ir variando. Así que la idea principal de este Stack no es usar al pie de la letra estas tecnologías, sino usar principalmente tecnologísa de Javacsript.

Entonces veamos ahora como funcionarian en una aplicacion.

Stack MERN

Ok si queremos empezar a crear una aplicacion con el Stack MENR, debemos saber que como estaremos haciendo uso de MOngodb, y este es una base de datos NoSQL, aqui no hace falta crear tablas. por lo que podemos desarrollar nuestro backend y base de datos al mismo tiempo.

Esto cambiaria si es una base de datos SQL, como MySQL por ejemplo en el que seria una mejor idea empezar por el diseño de las tablas y luego continuar con la base de datos.

Una de las razones de porque mongodb es tan popular en este Stack, es que este en lugar de usar SQL hace uso de javascript como lenguaje de consultas, lo que nos evita usar otro lenguaje distinto.

Entonces como crearems la base de datos y el backend al mismo tiempo, lo primero es decidir que tipo de API vamos a crear.

Una API cuando hablamos del servidor es basicamente un programa que servira como puente de comunicacion entre la base de datos y el frontend. De esta forma el frontend decidira cuando quiere guardar, obtener, eliminar o actualizar datos (CRUD).

Y Actualmente tenemos 3 opciones para crear nuestras APIs, la primera y más popular es crear una API REST, la cual permite recibir peticiones HTTP desde el cliente. La segunda es crear una API de GraphQL, estas son más complicadas de crear y mantener pero permiten que las aplicaciones cliente tengan un mejor rendimiento, y la ultima que es una nueva dentro del Stack MERN que son las API de tRPC, esta tambien permiten comunicar al frontend y backend similar a GraphQL.

Si quieres entrar en detalle en cada una de estas, ya hay videos de estos temas en el canal

Entonces como lo más comun es crear una API REST vamos por este.

Usano Nodejs podemos crear un backend, pero como es mucho trabajo empezar todo desde cero, a Nodejs le añadiremos un framework, que puede ser cualquiera solo que en este caso seria Express, usandolo creamos nuestra REST API. Esta tendra entre las tipicas URLS que permiten hacer operaciones CRUD (Create, Read, Update, Delete), tambien URLs para autentica usando el estandar JSON Web Token que permite saber que usuarios pueden usar nuestro backend.

Y finalmente añadiriamos nuestro frontend de React para poder solicitar datos a nuestra API. Uniendo todas estas partes tenemos una aplicacion web desde el frontend hasta al backend que solo hace uso de Javascript como lenguaje.

Si se es un solo desarrollador o un equipo pequeño, esto puede acelerar mucho el desarrollo porque no se tiene que usar multiple bibliotecas con distintas documentcaiones o comunidades, incluso en el stack MERN, bibliotecas que funcionan en el backend tambien pueden funcionar en el frontend, y viceversa. Por ejemplo:

• biblitoecas para validar datos como Zod, Joi o Yup
• Bibliotecas de fetching de datos como axios, o superagent
• template engines como handlebars, ejs, pug
• biblioteca de formateado de fechas como days, momentjs

Por mencionar algunas. por que este ecosistema de herramientas con los años ha crecido mucho más cada vez teniendo herramientas que simplifcan aun más y más ciertas tareas.

El Stack MERN mejorado

Por ejemplo herramientas como Typescript, que es un lenguaje que permite añadir tipos de datos, hace que tanto tu backend como tu Frontend puedan tener analisis de errores, autocompletado y linting.

o herramientas como Nextjs, te permiten tener Nodejs y React, juntos en un mismo framework por lo que solo te faltaria añadir una base de datos. si usas Mongodb tendrias basicamente el stack mern nuevamente pero usando otro framework.

herramientas como Astro, Gatsby, permitne generar sitios estaticos y que pueden estar comunicados tambien a un backend de Javascript o Typescript.

O si quieres usar el stack mern de cierta forma pero no quieres crear todo el backend desde cero, puedes usar Headless CMS como Strapi, o Sanity, que ya generan la API y solo añadirias el frontend de React y tendrias el mismo resultado.

o tambien usando React Native y un backend tambien puedes crear apps moviles, lo que al final podrias tener backend, frontend y movil desarrollados con las mismas tecnologías.

Ademas que cuando termines de desarrollar tus aplicaciones, hay muchas plataformas que te permiten desplegar facilmente las aplicaciones sin tener que estas pendientes de mantenerlas o actualizarlas. Estas son los servicios PasS como Vercel, Render, Railway, Heroku y demas.

Conclusion

En fin como pueden ver el Stack mern no se trata mas que usar las tecnologias más populares de javascript para crear aplicaciones, este stack ya no es nuevo, de hecho lleva desde aproximadamente el 2015, asi que muchos proyectos que he llevado o han venido con estas herramientas o las he creado usandolas.

como la mayor parte del tiempo trabajo solo en proyectos, este Stack me viene bastante bien porque puedo reutilizar muchas bibliotecas tanto en el backend y el frontend, e incluso herramientas de consola que he llegado a crear son faciles de integra, y no tengo que estar mucho tiempo leyendo distintas documentaciones de paquetes que hacen practicamente lo mismo.

Es decir este stack es muy practico, pero cuando se trata de rendimiento obviamente hay mejores opciones, que llevan más trabajao implementarlas, pero la ganancia en la velocidades de respuesta o el consumo de recuros de hardware es notorio.

Aun asi este Stack junto los otros stacks de Javascript (MEAN, MEVN, etc) que son practicamente lo mismo, son muy buenas opciones al dia de hoy, y si quieres empezar a crear aplicaciones, usarlas pueden ahorrarte muchas horas de trabajo.