() translation by (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:
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:
1 |
git clone https://github.com/linnovate/mean.git |
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:
1 |
npm install -g generator-meanstack |
y luego usar yo para crear la aplicación:
1 |
yo meanstack |
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!
