Qué es MEAN: desarrollo full-stack en JavaScript

Con JavaScript puedes desarrollar aplicaciones en todos los niveles. Para el frontend puedes elegir frameworks como React, Vue, Angular; para desarrollo backend está Node.js, y para el servidor tenemos Express. Básicamente JavaScript es el rey de los lenguajes para desarrollo web, con el que puedes desarrollar la app que quieras.


Si ya dominas JavaScript puedes lanzarte a desarrollar con MEAN, uno de los stacks más usados en la industria actualmente, y que te permitirá crear aplicaciones de manera profesional, al integrar lo mejor de cada herramienta.

¿Qué es MEAN?

MEAN es desarrollo full-stack en JavaScript, es decir, es el conjunto de tecnologías necesarias para el desarrollo de todas las capas de una aplicación web con JavaScript. Está compuesto por cuatro de las más importantes tecnologías de la industria: MongoDB, Express, Angular y Node.js. Veamos de qué se trata cada una de estas tecnologías.

MongoDB

MongoDB es la base de datos de tu aplicación. Entenderás la importancia de las bases de datos para la buena gestión de los datos en tus proyectos de software. Los datos que almacenas se pueden convertir en información indispensable a la hora de tomar buenas decisiones, o simplemente quieres almacenar datos que luego los usuarios de tu aplicación puedan acceder, todo depende del negocio al que estés apuntando.

¿Por qué usar MongoDB con JavaScript?

MongoDB es una base de datos orientada a documentos y de esquema libre que proporciona alta capacidad de almacenamiento, velocidad en las consultas, además de ser fácilmente escalable.

Express

Express es un web application framework para Node.js, es decir es un framework para hacer aplicaciones web. Es minimalista, rápido y fácil de usar y es la mejor opción cuando estás trabajando con Node para el lado del servidor, porque se adapta muy bien a su filosofía.
Express te ayuda a organizar tu aplicación web, desde la asignación de rutas hasta el manejo de solicitudes y vistas. En una arquitectura MVC - Model View Controller, Express es el Control, es esta pequeña parte de tu aplicación que te permite conectar todos los componentes, gestionar y procesar los datos y enviarlos a las capas superiores que le permiten al usuario tener acceso a la información.

Node.js

Node.js es un runtime, es decir es un programa que corre JS, construido sobre el motor de JavaScript que usa Chrome. Node es el entorno de desarrollo de la capa del servidor, te permite desarrollar rápidamente aplicaciones escalables a nivel del servidor. 😄

Angular

Angular es un framework de JavaScript con el que puedes desarrollar el frontend de tu aplicación, es decir la parte de tu aplicación con la que tus usuarios interactúan directamente. Con Angular puedes desarrollar tu Spa, hacer la gestión de rutas, servicios, validación de formularios y muchas más opciones que lo hacen uno de los frameworks para desarrollo frontend más usados actualmente a nivel industrial.

Instalación del Stack MEAN


  • add_circleInstalación de NODE.JS
    Empezaremos instalando nuestro entorno de trabajo de lado del servidor. Podemos encontrar NodeJS en nodejs.org y nada más entrar a la web veremos como descargarlo.

    Las siglas LTS de Long Term Support, que viene a significar Soporte a Largo Plazo es lo que nos interesa (puedes estar viendo este post con una versión diferente de NodeJS pero siempre debes centrarte en la versión LTS). En la parte inferior tienes otras opciones de descarga ya más personalizadas a las que no vamos a profundizar, como versión 32-bit o otros sistemas operativos, Linux, macOS… Una vez bajado ejecutamos el .msi (en mi caso node-v6.11.1-x64.msi) y empezamos la típica y fácil instalación de windows.


    Siguiente en diversas pantallas


    Seleccionamos la ruta por defecto


    Y en esta parte muy importante que el apartado de Add to PATH este para instalar en local. Como veis se añadirá una ruta al entorno de trabajo global y podremos acceder a este desde cualquier directorio.


    Finalmente le damos a Finish y finalizaremos la instalación. Con la instalación lista solo nos faltaría corroborar que ha ido todo bien. Para ello tenemos la opcion de abrir la consola CMD de windows o Powershell (la misma pero en Windows 10 ofrece la posibilidad de utilizar comandos de Linux si estas más familiarizado).
    Ejecutamos dos comandos:
    node -v
    npm -v
    Así veremos las versiones instaladas y si se han instalado correctamente en el entorno.

    NPM significa Node Package Manager o simplemente npm es un gestor de paquetes, el cual hará más fáciles nuestras vidas al momento de trabajar con NodeJS, ya que gracias a él podremos tener cualquier librería disponible con solo una línea de código, npm nos ayudará a administrar nuestros módulos, distribuir paquetes y agregar dependencias de una manera sencilla y fácil. Más adelante ya aclararemos que son librerías, módulos y dependencias.
  • add_circleInstalación de MongoDB
    Al instalar MongoDB debemos instalar la aplicación y configurar el path en windows para poder usarla desde cualquier directorio. Primero descargamos el .msi desde mongodb.com/downloads elegiremos nuestro sistema operativo y en el caso de Windows 10 si es 32bits o 64bits.


    Una vez ejecutado el .msi y darle a varios siguiente seleccionamos la opción Custom


    Y como podemos ver seleccionaremos una ruta más cómoda para trabajar, que será en mi caso C:\MongoDB


    Una vez tenemos finalizada la instalación si fueramos a la terminal y escribieramos mongod (si ese es el comando no mongodb) no funcionaria, nos falta configurar la ruta (path) para Windows.
    Seleccionamos el icono de Mi Equipo con botón derecho y elegimos Propiedades


    Una vez dentro seleccionamos Configuración avanzada del sistema y entramos en Variables de entorno


    En variables del sistema seleccionamos Path y Editar


    Seleccionamos Nuevo y escribimos C:\Mongodb\bin


    Para terminar abrimos cualquiera de nuestras consolas y escribimos mongod – – version y vemos como nos devuelve la versión instalada


    Y finalmente quedo todo integrado e instalado en Windows 10.

  • add_circleInstalar un editor de codigo
    Atom es un editor de textos orientado a la programación y desarrollado por GitHub, cuyo código fuente se encuentra publicado bajo licencia MIT.
    Una de sus principales características es que, aunque puede usarse de forma productiva sin ninguna modificación, también puede personalizarse por completo según las necesidades particulares.

    De forma predeterminada soporta multitud de lenguajes de programación (C/C++, C#, Clojure, CSS, CoffeeScript, GitHub Flavored Markdown, Go, Git, HTML, JavaScript, Java, JSON, Julia, Less, Make, Mustache, Objective-C, PHP, Perl, Property List (Apple), Python, Ruby on Rails, Ruby, Sass, Shell script, Scala, SQL, TOML, XML, YAML), pero admite muchos más instalando el plugin adecuado entre los cientos disponibles.

    … Y como además es multiplataforma (está disponible para OS X, Windows y GNU/Linux), nos ha parecido interesante explicarte cómo instalarlo sobre Windows 10.

    Descargar Atom

    Para instalar Atom el primer paso será abrir nuestro navegador de Internet favorito y descargarlo desde su página web en la dirección https://atom.io/.
    Al entrar, el sitio detecta nuestro sistema operativo y nos ofrece, como opción predeterminada, el instalador adecuado.
    Por lo tanto, nos limitamos a hacer clic sobre el botón Download Windows 64-bit installer.


    Al hacerlo, se iniciará la descarga y el sistema nos informa de que se trata de un archivo ejecutable, nos informa de su tamaño y de su origen. Por último, nos da la opción de guardar el archivo o cancelar la descarga.
    Hacemos clic sobre el botón Save file.


    Instalar Atom
    Para instalar Atom, sólo tendrás que desplazarte hasta la carpeta donde se almacenen habitualmente tus descargas y hacer doble clic sobre el archivo que acabas de descargar. Aunque la mayoría de los navegadores te permitirán abrirlo directamente. Por ejemplo, en Firefox, aparece un icono en la parte superior derecha que te informa del avance de la descarga.
    Cuando termine, puedes hacer clic sobre el icono y se mostrará una pequeña ventana con información sobre los últimos archivos descargados.
    Para comenzar la instalación, basta con hacer doble clic sobre el archivo que acabamos de descargar (AtomSetup-x64.exe).


    Al abrir el archivo, recibimos una advertencia que nos informa de que se trata de un archivo ejecutable.
    Para continuar, debemos hacer clic sobre el botón Ejecutar.


    A partir de aquí, el proceso es muy sencillo, porque no necesita ninguna información complementaria
    Nos limitamos a esperar mientras se copian los archivos necesarios y se realicen las modificaciones necesarias en el sistema.


    Durante el proceso, veremos aparecer un acceso directo en el escritorio.
    Sólo quedará esperar un instante más.


    Ejecutar Atom
    Una vez completada la instalación, sólo tendremos que hacer doble clic sobre el icono de Atom en el escritorio. Como es lógico, también podemos buscar el programa en el menú Inicio.
    Poco después tendremos en el escritorio la ventana principal del programa.