desarrollo web en nodejs con pillars por chelo quilón

Huelva 24 de Mayo de 2017

Desarrollo web en con

Presentación

Javi y Chelo

Nos dedicamos al desarrollo de software desde hace 16 años.

Hemos desarrollado el framework Pillars.js, documentado y liberado como software libre, con licencia MIT.

JavaScript

JavaScript

Brendan Eich

● 1995, Brendan Eich, crea un lenguaje llamado “Mocha”, cuando pertenecía al grupo de desarrollo del navegador Netscape.

● Después pasó a llamarse “LiveScript”.

● Cuando Netscape es adquirida por Sun Microsystems (propietaria del lenguaje Java), muy popular en aquellos años, es renombrado a JavaScript debido a una estrategia de marketing, aún cuando los lenguajes no están relacionados.

JavaScript - Evolución de herramientas

1995

MochaLiveScript

2006 2017

No estandarización en DOM y BOM entre navegadores.

No había Herramientas de Desarrollador integradas en el navegador.

1998

1998

2008

RWDDiscutidos y descritos por el World Wide Web Consortium (W3C) en julio de 2008 en su recomendación "Mobile Web Best Practices" bajo el subtítulo "One Web"

2014

2009

2010

2016

2015

2013

2011

2012

JavaScript

ECMA International, es la organización internacional que crea una amplia gama de estándares mundiales TIC y CE (electrónica de consumo).

Algunos estándares ECMA son: - ECMA-262. Especificación del lenguaje ECMAScript- ECMA-334. Especificación de C#.- ECMA-335. Especificación del CLI- ECMA-372. Especificación de C++/CLI

En 1997, se crea un comité ECMA, llamado TC39 para estandarizar JavaScript. A partir de entonces, los estándares de JavaScript se rigen como ECMAScript.

JavaScript - versiones

Versión ECMAScript Año

ES1 Junio 1997

ES2 Agosto 1998

ES3 Diciembre 1999

ES5 Diciembre 2009

ES 5.1 Junio 2011

ES6 / ES2015 / Harmony Junio 2015

ES7 / ES2016 2016

ES2017 En progreso

ES1ES1ES1ES1

JavaScript - versiones

ES1

ES2

ES3

ES5

ES5.1

ES6

ES7

https://kangax.github.io/compat-table/es6/

Qué es ES y qué no es ES

.getElementById(element) ● Objetos propios del lenguaje como Object, Array, String, Date...

● Declaración de variables● Sentencias condicionales● Iteradores, bucles● Manejo de asincronía● …..

Web API’s ECMAScript

Al escribir código JS disponemos de un gran número de API’s.

Web API’s https://developer.mozilla.org/en-US/docs/Web/API

JavaScript - algunas características...

En JavaScript todo son objetos.

Hay una serie de objetos fundamentales como por ejemplo: Object, Function..

Objetos relacionados con números, fechas y cálculos matemáticos: Number, Math y Date.

Objetos para la manipulación de textos: String y RegExp

Colecciones indexadas: Array...

Colecciones con keys: Map, Set, WeakMap...

JavaScript está basado en prototipos.

JavaScript StringPropiedades:

- String.lengthMétodos:

- String.concat()- String.slice()- String.splice()- …..

ObjectMétodos:

- Object.defineProperty()- Object.entries()- Object.assign()- Object.Keys()- …..

let foo = “hola”;console.log(foo.length);//4console.log(“Qué pasa?”.length);//9

JavaScript - ES6Declaración de variables: let y const. Resuelve problemas de alcance.

function getValue(condition){if (condition){

var value = “blue”;//…console.log(“if”, value);

}else{// ¿Existe aquí la variable value?console.log(“else”, value);

}// ¿Y aquí?console.log(“Fuera del if”, value);

}getValue(true);

https://jsfiddle.net/lilxelo/tjmojw7k/

JavaScript - ES6

Declaración de variables: let y const. Resuelve problemas de alcance.

Funciones: inicialización de parámetros por defecto, resto de

parámetros(convive con arguments), spread operator, arrow functions…

Objetos: nuevos métodos .is(), .assign(),

inicialización de objetos literales, super…

Desestructuración de objetos, arrays

y parámetros,

ejemplo de desestructuración de objetos:

let node = { type: "Identifier", name: "foo" };

let { type, name, value = true } = node;

console.log(type); // "Identifier"console.log(name); // "foo"console.log(value); // true

JavaScript - ES6

Nuevos tipos: Sets y Maps

Iteradores y Generadores: function *createIterator(){yield 1; ….},... for-of

para iterar sobre colecciones de objetos: arrays, maps y sets.

Mejora de Array: nuevos métodos .from(), .of(), .find(), .index() ...

Clases: nueva forma de declarar PROTOTIPOS. Las propiedades

complejas deben seguir siendo declaradas con Object.defineProperty().

Asincronía: promesas.

Módulos: modules e import/export.

Libro de ES6: https://leanpub.com/understandinges6/

JavaScript - ES7

Exponente: let result = 5 ** 2;

Array: Array.prototype.includes();

Cambiar el scope de una función a modo estricto.

JavaScript - ES8 - En progreso

La más relevante ahora:

Asincronía: Async Functions, async y await.

JavaScript - asincronía

setTimeout(

()=>console.log("Primero")

,2000);

console.log("Segundo");

Imprime primero Segundo y a los dos segundos Primero.

JavaScript - asincroníaDiferentes metodologías para la programación asíncrona: https://www.todojs.com/programacion-asincrona-paso-de-continuadores-eventos-promesas-y-generadores/

readFile("example.txt", function(err, contents) { if (err) { throw err; }

writeFile("example.txt", function(err) { if (err) { throw err; }

console.log("File was written!"); });});

Patrón Callback:

JavaScript - asincronía (callbacks hell)

method1(function(err, result) { if (err) { throw err; } method2(function(err, result) { if (err) { throw err; } method3(function(err, result) { if (err) { throw err; } method4(function(err, result) { if (err) { throw err; } method5(result); }); }); });});

A esta problemática le da solución ES6 con las promesas, y ES8 lo está mejorando con Async Function.

En Pillars, usamos la librería procedure. https://github.com/pillarsjs/procedure

JavaScript - librerías

JavaScript - Repositorio de librerías

npm es el manejador de paquetes por defecto para Node.js, un entorno de ejecución para JavaScript.

>> npm install nombre_paquete //instala una librería…>> npm update //actualiza las dependencias de un proyecto>> npm init //inicializa un proyecto>> npm --version //2.7.4

JavaScript en el servidor

Node.js

Node.jsApache

servidor http/s

PHP

Petición (request)

Petición (request)

Node implementa el servicio HTTP/s

Respuesta (response)

Respuesta (response)

Node.js

Por lo tanto, para trabajar en Node.js, hay que tener claros dos conceptos, HTTP request y el HTTP response.

El request es la petición al servidor, se compone entre otros de:

- Método: GET, POST, PUT, etc.- Path: la URL que se solicita- Headers- Body- …..

Node.js

Petición (request)

Respuesta (response)

Node.js

GET php.net HTTP/1.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding: gzip, deflate, sdchAccept-Language: es-ES,es;q=0.8,en;q=0.6Cache-Control: max-age=0Connection: keep-aliveCookie: COUNTRY=NA%2C122.16.430.651; LAST_LANG=es; LAST_NEWS=3847110839Host: php.netIf-Modified-Since: Mon, 09 Nov 2015 11:50:11 GMTUpgrade-Insecure-Requests: 1User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36

Ejemplo de cabecera HTTP

Node.js con Pillars.js

Gangway (gw)Contiene todos los datos de la petición parseados, ejemplo con User Agent:

User Agent tal y como nos viene en la petición:

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36

En pillars.js: let userAgent = gw.ua; /* ua:{ mobile: false, os: 'Windows NT 6.1; WOW64', engine: 'Blink', browser: 'Chrome' } */

String

propiedad de gangway, con el user agent en un objeto

Node.js con Pillars.js

Gangway (gw) - algunas propiedades:

var myRoute = new Route(gw=>{

let POST = gw.content.params; let GET = gw.query; let cookie = gw.cookie; let id = gw.id; // id del objeto gangway para la petición. let ip = gw.ip; // ip del cliente let browserLang = gw.language; // Primer idioma del navegador del cliente let cors = gw.cors; // Gestión de orígenes cruzados. let method = gw.method; // Método de la petición GET y/o POST let encoding = gw.encoding; // encoding que se utiliza para el envío al cliente.

gw.json(gw);});

Node.js con Pillars.js

Gangway (gw)

Gangway contiene todos los datos de la petición parseados y métodos para la respuesta, como:

● gw.file(). Envía un archivo. Implementa byte-serving.● gw.send(). Envía una respuesta, si es string se envía como text/html y si es un objeto lo envía

como objeto parseado tipo application/json.● gw.html(). Envía una respuesta como text/html● gw.render(). Este método permite enviar un template renderizado● gw.json(). Envía una respuesta en formato application/json● gw.text(). Envía una respuesta parseado como text/plain

Node.js

En principio, desaparece la estructura en directorios, como en apache/php,

apareciendo el concepto de controlador.

Node.js con Pillars.js

/localhost

web1

index.php

otra.php

Estructura en directorios Controladores

Para una petición HTTP con estos datos, haz esto.

let myRoute = new Route(configuration, handler);

Node.js con Pillars.js

let myRoute = new Route({

id: 'idRoute',path: '/test',host: 'localhost',multipart: true,cors: false,https: false,port: 3006,method: ['POST', 'GET'],maxUploadSize: 2*1024*1024,session: true

}, function(gw){

gw.send(“Tu user agent es” + gw.ua);

});

Configuración

Manejador

Controlador

Ya tenemos en mente dos nuevos conceptos:

● petición y respuesta - Unificados en el objeto Gangway

● Controlador - que se crea instanciando a la clase Route.

Hola Mundo

Node.js con Pillars.js Hola Mundo con Pillars.js:

// Inclusión de la libreríavar project = require('pillars');

// Ejecutamos el servicio http buit-inproject.services.get('http').start();

// Añadimos el controlador al proyectoproject.routes.add(new Route({ method: ["GET","POST"], path: '/' },function(gw){ gw.html("Hola Mundo!!");}));

Controlador

Node.js con Pillars.js

// Inclusión de la libreríavar project = require('pillars');

// Ejecutamos el servicio http buit-inproject.services.get('http').start();

// Añadimos el controlador al proyectoproject.routes.add(new Route({ method: ["GET","POST"], path: '/' },function(gw){ gw.html("Hola Mundo!!");}));

Hola Mundo con Pillars.js:

Controlador

Modelo de servidor Orientado a objetos

Node.js con Pillars.js

project

config

services

routes

middleware

Configuración del proyecto

Servicios del proyecto

Controladores del proyecto

Middleware del proyecto

Tipo OA (Object Array)

Node.js con Pillars.js

var project = require('pillars');

project.config; // Configuración del proyectoproject.services; // Servicios del proyectoproject.routes; // Controladores del proyectoproject.middleware; // Middleware del proyecto

Node.js con Pillars.js

// Inclusión de la libreríavar project = require('pillars');

// Variables de entorno del proyecto, por defecto….project.config = {

cors: true,debug: false,logFile: false,maxUploadSize: 5*1024*1024,//maxCacheFileSize : 5*1024*1024,//cacheMaxSamples : 100,//cacheMaxSize : 250*1024*1024,//cacheMaxItems : 5000,fileMaxAge : 7*24*60*60,renderReload: false,favicon: pillars.resolve('./favicon.ico')

};

Node.js con Pillars.js

// Inclusión de la libreríavar project = require('pillars');

// Controladoresproject.routes.add(route);project.routes.remove(idroute);project.routes.get(idroute);

// Middlewareproject.middleware.add(middleware);project.middleware.remove(idmiddleware);project.middleware.get(idmiddleware);

// Serviciosproject.services.add(service);project.services.remove(idservice);project.services.get(idservices);

project.routes

Node.js con Pillars.js

project.services

project.middleware

Tipo Object Array

Modelo de servidor Orientado a objetos

VENTAJAS

project.routesCONTROLADORESANIDABLES

Conectables y desconectables

en caliente

En

desa

rrol

lo

ECOSISTEMA

PillarsJS

Pillars.js ofrece un ecosistema de herramientas para el desarrollo web backend en JavaScript

● Especialmente orientado a objetos.● Server Object Model / Backend Object Model● Caché automatizado● Internacionalización● Programación de tareas● Templating● Formateo de texto y fechas● Sintaxis y nomenclatura homogénea en todo el entorno● Curva de aprendizaje suave● ...

Ecosistema - 11 Librerías - útiles por sí mismas

1. JSON.crypt2. JSON.decycled

3. Date.format4. String.format

5. scheduled6. templated7. textualization8. procedure9. ObjectArray

10. jailer11. crier

EJEMPLO

PillarsJS

Ejemplo de aplicación en la que vamos a activar un directorio estático. En éste vamos a volcar archivos .hbs y se ejecutarán directamente en la url dada.

1) Instalar node.js https://nodejs.org/es/2) Archivo package.json3) Archivo app.js

MIDDLEWARE

PillarsJSMiddleware: Son porciones de código que se ejecutan en toda la aplicación, o solo en ciertos controladores de ruta con ciertas características. Por lo tanto, podremos crear middleware que se aplique en toda la aplicación web, es decir, para cualquier solicitud, o que solo se ejecute en ciertos controladores, dependiendo de la configuración de estos

Cadena de middlewarePetición (request) Respuesta

(response)

Controlador

Proyectos

IoT Agricultura

Anímate, úsalo y/o Colabora!!hello@pillarsjs.com

@lilxelo

@bifuer

@pillarsjs

Gracias!!!