Desarrollo web en Nodejs con Pillars por Chelo Quilón
62
Huelva 24 de Mayo de 2017 Desarrollo web en con
-
Upload
betabeers -
Category
Technology
-
view
56 -
download
1
Transcript of 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
Gracias!!!
