miércoles, 8 de febrero de 2017

Introducción a NodeJs para programadores

¿Qué es NodeJs?

Es un motor que lee código en javascript y lo ejecuta. Funciona de manera similar jvm (Java Virtual Machine) o CLR de .NET (Common Language Runtime).

¿Puedo leer excels, mostrar páginas web, hacer una aplicación de escritorio, generar pdf o leer una base de datos?

Si, todo se puede hacer mediante módulos.

¿Qué son los módulos?

Los módulos son un conjunto de funciones empaquetados para un fin común (por ejemplo: leer un excel, subir archivos a una web). Su funcionalidad es similar a las bibliotecas de .NET o los paquetes de Java.

¿Cómo es la estructura de un proyecto?

Es algo como esto:


Las demás preguntas se irán resolviendo en el camino.

Comencemos

Lo primero que debes hacer es descargar el motor de nodejs. La descarga de node viene acompañada de NPM.

NPM es un repositorio de módulos. Se ejecuta a través de comandos de consola (DOS en Windows, terminal en Linux). Las funciones más usadas son las siguientes:

npm init: Permite generar el archivo package.json, el archivo package.json define el nombre del proyecto, la versión, el archivo principal (lo definiremos como server.js), las palabras clave, la licencia de distribución y los módulos necesarios del proyecto. Dejen en blanco los valores que no quieran definir en el momento, siempre se puede volver a editar el archivo.

npm install [nombre del módulo]: Permite descargar un módulo a tu proyecto. Los nombres de los módulos los puedes extraer de https://www.npmjs.com/. Si luego del nombre del módulo agregas "--save", se agregará la dependencia de este módulo al archivo package.json.

npm uninstall [nombre del módulo]: Funciona de manera similar a "install" pero elimina. También se puede agregar el atributo "--save" luego del nombre del módulo.

npm install: Permite descargar todos los módulos definidos en el archivo package.json.

Estos comandos deben ser ejecutados con la consola posicionada en la carpeta del proyecto.

Todos los módulos descargados a través de npm están en la carpeta "node_modules" de tu proyecto. Debido al tamaño de esta carpeta comúnmente se excluye del control de versiones.

Control de versiones

El control de versiones perfecto para nodejs es Git ya que las herramientas de trabajo de Node vienen incluidos con el soporte a este. Git necesita de un servidor donde se alojarán los archivos (por ejemplo: GitHub o BitBucket) y un cliente que es el programa encargado de subir los cambios de tu proyecto. El cliente de Git se puede descargar desde acá. Viene con un gestor visual pero no lo utilizaremos, sólo nos interesa el motor en linea de comandos.

Git vs SVN

Estos dos controles de versiones tienen grandes diferencias pero en términos prácticos. Definiremos lo que hacen sus funciones básicas.

SVN:
Checkout: Baja un proyecto del servidor y lo copia en una carpeta local.
Commit: Sube los cambios al servidor.
Update: Baja los cambios desde el servidor.

Git:
Clone: Baja un proyecto del servidor y lo copia en una carpeta local.
Commit: Sube los cambios al repositorio local en la carpeta .git del proyecto.
Push: Sube los cambios al servidor desde el repositorio local.
Pull: Baja los cambios desde el servidor.

Para excluir archivos o carpetas en Git se usa el archivo ".gitignore". Dentro de este archivo debe estar definida la carpeta "node_modules" o git se volverá muy pesado debido al tamaño de la carpeta.
Se pueden descargar plantillas de ".gitignore" desde el repositorio https://github.com/github/gitignore. Dentro de este repositorio busca el archivo "Node.gitignore", renombralo a ".gitignore" y dejalo en algún lugar temporal hasta que más adelante.

Función Clone

Para clonar un proyecto de BitBucket se debe ejecutar de la siguiente forma:
git clone https://MiCuenta@bitbucket.org/CuentaCreadorRepositorio/nombre_proyecto.git

Luego pedirá la contraseña de tu cuenta. Alternativamente se puede ejecutar definiendo la contraseña:
git clone https://MiCuenta:mi_contraseña@bitbucket.org/CuentaCreadorRepositorio/nombre_proyecto.git

Nota: Clone es la única función que se ejecuta fuera de la carpeta del proyecto ya que esta misma lo crea.

No es necesario ocupar Git desde linea de comando, sólo deberías necesitarlo para la función clone. El resto lo puedes hacer a través del IDE que usaremos para programar: Visual Studio Code.

Visual Studio Code

Con este sofware realizaremos nuestros programas en NodeJS ya que es fácil de usar, incorpora a Git, un depurador de Node y extensiones para personalizarlo. Lo puedes descargar desde acá.

Ya con el proyecto creado desde Git deberías hacer click en "Abrir carpera" y seleccionar tu proyecto.
Deberías tener la carpeta .git (puede que esté oculta) y el archivo package.json.

Visual Studio Code tiene 5 secciones:

 EXPLORADOR: Acá estará la carpeta de tu proyecto con todos sus archivos. Desde esta sección se programa.

 BÚSQUEDA: Acá puedes encontrar archivos o texto dentro de proyectos grandes. Pinchando en el botón de 3 puntos (...) puedes excluir archivos de la búsqueda.

 GIT: acá manejarás el control de versiones. Si aún no subes ningún archivo deberás presionar en "Publicar" antes de hacer un Push.

 DEPURAR: Acá podrás ejecutar tu programa Node y ver lo valores de tus variables en tiempo real. Posee puntos de interrupción y por defecto sólo depura Node pero se pueden depurar otros motores a través de extensiones.

 EXTENSIONES: Permiten agregar o modificar funcionalidades u otros aspectos a Visual Studio Code. Por ejemplo: Autocompletados, iconos, depuradores, snippets y muchos más.

Archivo principal, archivo servidor, app.js o server.js (es el mismo)

El archivo principal de node en internet se puede encontrar con diversos nombres: archivo principal, archivo servidor, app.js o server.js pero todos se refieren al mismo, al archivo donde comienza la ejecución del programa. Ya que en el archivo package.json lo definimos como server.js, acá también crearemos un archivo con el mismo nombre.

Mostrar páginas web

Para desplegar una página web, necesitas levantar un servidor web. Para esta tarea usaremos el módulo "express". Para instalarlo bastaría con ejecutar en una consola o terminal "npm install express --save". Ya con VScode instalado puedes hacer click derecho en un espacio vacío dentro del explorador y pinchar en "Abrir en símbolo de sistema" o "Abrir en terminal".

Luego pega el siguiente código en el archivo server.js:
var express = require('express');
var app = express();
app.get('/', function(req, res){
    res.send('Hola Mundo');
})
app.listen(1338, function () {
    console.log('Express activo en el puerto 1338');
});
Luego ve a la sección DEPURACIÓN y presiona el botón verde "Iniciar depuración" eso iniciará el servidor web de prueba. Ve al navegador y escribe "http://localhost:1338". Debería mostrar "Hola Mundo".

Grunt

Últimamente muchos sitios trabajan con javascripts y hojas de estilos minificados (.min.js y .min.css) esto ayuda a ahorrar ancho de banda, acelerar la carga de páginas y proteger el código fuente de estos archivos. Hace un tiempo habían extensiones para los IDEs en los que con un click minificabamos estos archivos y luego desde los archivos html llamabos a estos archivos generados.

También estaba el tema de los less, estos archivos muy similares a los css que nos permiten crear jerarquías de estilos, al igual que los archivos anteriores teníamos que estar constantemente generar los archivos css y luego estos a css.min.

Grunt hace todo esto de forma automática ahorrándonos tiempo y dolores de cabeza. Grunt se compone de 3 partes:

1) Modulos de funciones: la biblioteca base es "grunt" pero dependiendo de las funciones que necesites en tu proyecto necesitarás bajar otras. Acá está la lista completa de funciones: http://gruntjs.com/plugins. La más importante es watch que se queda en espera de algún cambio en el código y ejecuta las funciones programadas.
2) Módulo de consola o terminal: Nos permite ejecutar grunt desde la consola. Se instala de la siguiente forma: npm install -g grunt-cli
3) Archivo gruntfile.js: Es el archivo que define todo lo que tiene que hacer grunt.

Bower

Cuando mostré el proyecto anteriormente, omití algunas carpetas para simplificar el proyecto. El proyecto completo es el siguiente:


Dentro de la carpeta public hay 2 carpetas importantes "vendors" y "vendors/bower_components".

Al igual que npm, Bower es un repositorio que se utiliza desde la consola, sólo que en vez de manejar los módulos de Node maneja los vendors. Se le llama vendors a las bibliotecas de funciones de otras empresas utilizadas en tu proyecto del lado del cliente. Por ejemplo: JQuery, Angular, PhoneJS, DevExtreme, Boostrap. Se usa exactamente igual que npm pero el archivo donde almacena las dependecias se llama bower.json en vez de package.json.