Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. Web Development
Code

Introducción a MEAN stack

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Nadia Castelli (you can also view the original English article)

El desarrollo de aplicaciones web involucra el uso de diferentes herramientas y tecnologías, manipulación de bases de datos, operaciones del lado servidor, así como manejo del lado cliente y visualización de los datos provenientes del servidor. Antes de comenzar un nuevo proyecto, se deben organizar todas las herramientas y la estructura del proyecto, lo que lleva mucho tiempo. El uso de un framework o stack para esta tarea puede acelerar el desarrollo y facilitar el trabajo para el desarrollador.

Qué es MEAN

"MEAN es una plataforma JavaScript fullstack para aplicaciones web modernas".

Así es como los autores de MEAN stack la definen en su sitio web. Es claro que MEAN está dirigida a todo tipo de desarrolladores JavaScript (tanto lado servidor como cliente), y también que es una plataforma "stack", lo que indica que está integrada por varios componentes.

Estos componentes son:

Como podrás ver, MEAN reúne cuatro de las tecnologías más utilizadas y apreciadas en el desarrollo JavaScript, estableciendo la base para armar aplicaciones web complejas de manera sencilla.

Instalación

MEAN puede instalarse de dos formas:

  • mediante el sitio web mean.io
  • mediante diversos generadores Yeoman.

Instalación de MEAN Mediante Su Sitio Web

Este método es muy simple. Solamente tienes que visitar el sitio mean.io, donde puedes descargar el framework como un archivo zip, clickeando sobre el botón verde grande.

Otra opción disponible es clonar el repositorio Git. Abre una línea de comandos y tipea lo siguiente:

Instalación de MEAN Mediante Yeoman

Existen varios generadores Yeoman, escritos por diferentes desarrolladores. El uso de un generador para instalar MEAN requiere dos pasos, primero, instalar el generador:

y luego usar yo para crear la aplicación:

El ejemplo anterior asume que tanto el generador meanstack como Yeoman están instalados. Para ver una lista de generadores MEAN, chequea este link y filtra por "mean". Para obtener información sobre cómo instalar Yeoman, visita el sitio web de Yeoman.

Addy Osmani escribió un blog post muy interesante acerca de MEAN stack y generadores Yeoman que pueden utilizarse. Recomiendo fuertemente su lectura, para así comprender cómo instalar MEAN usando generadores.

Con propósito de este artículo, usaré el método de clonación de Git.

Post-Instalación

Luego de la isntalación, haz cd a la carpeta donde has instalado MEAN stack y tipea el comando grunt (debes tener grunt-cli instalado). Este comando creará un servidor atendiendo en el puerto 3000, entonces al ingresar a http://localhost:3000 el navegador mostrará algo parecido a esto:

Qué Tenemos Luego De Instalar

MEAN stack es en efecto una plataforma para blog completamente funcional. Incluye varios métodos de autenticación: Facebook, GitHub, Twitter o Google, como también simplemente e-mail y contraseña.

Apuesto a que les intriga ver un poco de código en este momento... Así que, vamos a verlo. La estructura de carpetas de MEAN stack debe ser la siguiente:

El Lado Servidor

El servidor está repartido en dos carpetas y un archivo:

  • carpeta app - contiene los controladores, modelos y vistas que componen la aplicación
  • carpeta config - contiene los archivos que controlan el comportamiento de las diferentes partes de la app
  • server.js - es el punto de entrada de la aplicación

Vamos a examinarlos uno por uno:

El Archivo server.js

Este es el archivo que inicia la aplicación entera. Si no quieres usar grunt puedes usar node server.js para iniciar el servidor.

El archivo server.js es responsable de:

  • Cargar la configuración. Carga los archivos necesarios para configurar la aplicación propiamente dicha, la autenticación y la conexión a la base de datos.
  • Inicializar los modelos. Esto se logra iterando la carpeta de modelos y cargando todos los archivos que contiene (o sus subdirectorios).
  • Inicializar passport
  • Inicializar la aplicación express
  • Configurar la aplicación express
  • Configurar las rutas de la aplicación express
  • Comenzar a atender en el puerto configurado.

La Carpeta config

Esta carpeta contiene los archivos de configuración de la aplicación. Dentro de ella podrás encontrar la carpeta env, que contiene configuración para el desarrollo, producción y modos de prueba para correr la aplicación.

Además, hay archivos que contienen la configuración para la aplicación propiamente dicha, la parte de express y la configuración de passport para el log in.

La Carpeta app

Dentro de la carpeta app, se encuentra el código lado servidor completo. Esta carpeta contiene sub-carpetas para los controladores, modelos y vistas que componen la aplicación MVC del servidor, y también una carpeta para las rutas.

Por defecto, hay controladores para los artículos, usuarios, y un archivo index para la ruta raíz. Además, se crean los modelos para los artículos y los usuarios, y las rutas para los artículos, usuarios, y la ruta raíz son creados durante la instalación.

Al igual que las vistas creadas por defecto, se crea la siguiente estructura:

La carpeta includes contiene los footer y header de las páginas, los cuales se insertan en todas las páginas pertenecientes a la aplicación. La carpeta layout contiene el HTML base para el maquetado de la página. Este maquetado se extiende al archivo index.html de la carpeta views.

La carpeta usuarios contiene el código para el login, el registro, y la autenticación.

En la raíz de la carpeta views, junto al archivo index.html, se encuentran archivos que contienen el código para los errores 404 y 500.

El Lado Cliente

El código del lado cliente reside en la carpeta public. Esta carpeta contiene una sub-carpeta css para el estilo de la aplicación y una carpeta img que contendrá las imágenes empleadas en la misma.

Debe prestarse especial atención a la carpeta js, que contiene el código Angular para el lado cliente de la app, el código de inicialización, algunas directivas y filtros (por el momento son archivos vacíos), y los controladores y servicios para los artículos y el header de la aplicación. La carpeta views contiene el markup para la creación, edición y visualización de artículos.

Finalmente, la carpeta lib contiene el código de la librería AngularJS.

Prueba De La Aplicación

La carpeta test contiene los archivos para testear la aplicación. Principalmente, incluye archivos para probar el lado servidor usando Mocha, y archivos para probar el lado cliente usando Karma.

Herramientas Provistas

Al emplear MEAN stack, tú como desarrollador tienes acceso a npm, bower y grunt, que deben estar instalados.

Es importante mencionar que JSHint está provisto y que todo el código JavaScript está comprobado. Además, al utilizar Grunt, se pueden detectar modificaciones en el proyecto, y recompilarse automáticamente.

Conclusión

Este artículo está pensado para ser continuado por un segundo tutorial, en el que desarrollaremos una aplicación completa sobre MEAN stack, demostrando cómo puede configurarse y adaptarse MEAN para su uso en otro tipo de aplicaciones.

¡Manténte al tanto para la segunda parte!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.