Conceptos utilizados en el entorno de proyecto para el desarrollo de aplicaciones web

Si estás empezando con el desarrollo de aplicaciones web, seguramente las herramientas utilizadas en la configuración del entorno de proyecto en la entrada anterior, son nuevas para ti. A continuación, te dejo algunos conceptos que tomé de la web, son claros para iniciar:

Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node ejecuta javascript utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome. Aprovechando el motor V8 permite a Node proporciona un entorno de ejecución del lado del servidor que compila y ejecuta javascript a velocidades increíbles. El aumento de velocidad es importante debido a que V8 compila Javascript en código de máquina nativo, en lugar de interpretarlo o ejecutarlo como bytecode. Node es de código abierto, y se ejecuta en Mac OS X, Windows y Linux.

NPM (node package manager) es el gestor de paquetes javascript de NODE.JS por excelencia. Gracias a él, tenemos casi cualquier librería disponible a tan solo una linea de comando de distancia, permitiéndonos utilizarla en cuestión de segundos. NPM nos ayudará a administrar nuestros módulos, distribuir paquetes y agregar dependencias de una manera sencilla.

NPM utiliza el archivo package.json para almacenar todos los datos relevantes a nuestra aplicación. 

Cuando instalamos nuevos paquetes lo que hace npm es instalarlo de manera local en nuestro proyecto dentro de la carpeta node_modules, pero nosotros podemos decirle que lo instale de manera global de ser necesario.

Gulp es un manejador de tareas (Task manager), una increíble herramienta para todo desarrollador que te permitirá de forma automática, gestionar toda clase de tareas comunes y a la vez tediosas en el desarrollo de cualquier aplicación.

Gulp sirve para automatizar tareas. Mediante Gulp se define cómo deben ejecutarse esas tareas, y únicamente ejecutamos un comando en la terminal para que se encargue de hacer todo el trabajo por nosotros.

¿Qué es Bower?

Es un gestor de dependencias desde el lado cliente desarrollado por Twitter, el cual es algo similar a lo que hace composer, npm o nugget. La finalidad de Bower es gestionar las dependencias de nuestros archivos del lado cliente como, bootstrap, jquery, entre otros. Es decir, que vamos a tener todo nuestras dependencias en una archivo json y mediante un comando se descargará todo a nuestro proyecto, si hay futuras versiones de las librerías estas podrán ser actualizadas dejando a un lado la tediosa tarea de ir a la web, descargar y agregarlo manualmente.

Yeoman es un conjunto de herramientas compuesto por Yo, Bower y Grunt , con el que podrás tener en menos de 5 minutos el esqueleto de tu proyecto web. Como ves,  nos ayudará a empezar cualquier proyecto nuevo en cuestión de minutos.

Configuración de entorno de proyecto para el desarrollo de aplicaciones web [UI/UX]

Configuración de entorno de proyecto para el desarrollo de aplicaciones web con una buena experiencia de usuario

Keywords: Node.js, NPM, Bower, Gulp, Yeoman

Para la creación del presente proyecto, necesitaremos Node.js, si aun no lo tienes, puedes descargarlo desde: https://nodejs.org/en/download/

Descargas e instalas Node.js. A continuación, abre tu ventana de comandos. (Si usas Windows, presionas las teclas windows + R y typeas cmd o inicio node command prompt.) En el siguiente paso instalaremos las herramientas que nos permitirán generar la estructura de nuestro proyecto, correr tareas automáticas y gestionar nuestros paquetes.

Te creas un folder en la unidad de tu disco duro que desees. Ingresas al folder y estando adentro ejecutas los siguientes comandos paso a paso:

npm install  --global yo gulp-cli bower

Luego, instalamos el generador de aplicaciones web:

npm install -global generator-webapp

Ahora, ya se puede crear la aplicación con el comando:

yo webapp

Aquí, te pedirá elegir opciones:

Seleccionar las siguientes opciones:
1. which additional features would you like to include?
Elije Sass
2. would you like to include JQuery?
Elije Y (de Yes)
3. choose your style of DSL
Elije BDD porque es orientado al usuario final.

Chequeas tu directorio, si en tu directorio creado, no ves la carpeta bower_components, debes ejecutar el siguiente comando:

bower install

Finalmente, ejecuta el siguiente comando para que corra el servidor de desarrollo

gulp serve

Se te deberá abrir un sitio web base con el siguiente aspecto:

ESTRUCTURA INICIAL DEL PROYECTO.
bower.json: librerias del cliente
package.json: librerias del servidor.
gulpfile.js: donde se registran las tareas automáticas del proyecto incluyendo la recarga automática, mimificacion de archivos, concatenación, entre otros.
carpeta app: se encuentran los archivos del proyecto, incluyendo carpetas para fuentes, imágenes, scripts y estilos.
carpeta scripts: tenemos el main.js archivo de código de script principal.
carpeta styles: tenemos el main.scss, el archivo de  estilo principal.
carpeta bower_components: donde se descargan las librerías del cliente.
carpeta node_module: donde se descargan las librerías del servidor.
carpeta test, se incluyen pruebas automáticas para nuestro proyecto.

INSTALACION FRAMEWORK RESPONSIVE
Para este ejemplo, instalaremos el framework materialize css, puedes utilizar el de tu preferencia. Para ello, ejecutar el comando siguiente dentro del directorio anteriormente creado.

bower install materialize --save

VERIFICACIÓN FRAMEWORK RESPONSIVE

Para verificar que haya sido instalado correctamente el framework, editaremos el archivo index.html que se encuentra dentro del folder app. Agregaremos el siguiente código:

Ahora, tu sitio web tendrá el siguiente aspecto: (recuerda tener levantado tu servidor con el comando gulp serve)