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
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
Mocha
LiveScript
2006 2017
No estandarización en DOM y BOM entre
navegadores.
No había Herramientas de Desarrollador
integradas en el navegador.
1998
1998
2008
RWD
Discutidos 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

ES1
ES1
ES1
ES1
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
String
Propiedades:
- String.length
Métodos:
- String.concat()
- String.slice()
- String.splice()
- …..
Object
Métodos:
- Object.defineProperty()
- Object.entries()
- Object.assign()
- Object.Keys()
- …..
let foo = “hola”;
console.log(foo.length);
//4
console.log(“Qué pasa?”.length);
//9

JavaScript - ES6
Declaració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ía
Diferentes metodologías para la programación asíncrona:
https://www.todojs.com/programacion-asincrona-paso-de-continuadores-eventos-promesas-y-gen
eradores/
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;
}
if (err) {
throw err;
}
if (err) {
throw err;
}
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 - 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

Node.js
Node.js
Apache
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.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: es-ES,es;q=0.8,en;q=0.6
Cache-Control: max-age=0
Connection: keep-alive
Cookie: COUNTRY=NA%2C122.16.430.651; LAST_LANG=es; LAST_NEWS=3847110839
Host: php.net
If-Modified-Since: Mon, 09 Nov 2015 11:50:11 GMT
Upgrade-Insecure-Requests: 1
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
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

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);
});

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.

/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);

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.

Node.js con Pillars.js Hola Mundo con Pillars.js:
// Inclusión de la librería
var project = require('pillars');
// Ejecutamos el servicio http buit-in
project.services.get('http').start();
// Añadimos el controlador al proyecto
project.routes.add(new Route({
method: ["GET","POST"],
path: '/'
},function(gw){
gw.html("Hola Mundo!!");
}));
Controlador

// Ejecutamos el servicio http buit-in
project.services.get('http').start();
// Añadimos el controlador al proyecto
project.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

project
config
services
routes
middleware
Configuración del proyecto
Servicios del proyecto
Controladores del proyecto
Middleware del proyecto
Tipo OA
(Object Array)

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

// 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')
};

// Controladores
project.routes.add(route);
project.routes.remove(idroute);
project.routes.get(idroute);
// Middleware
project.middleware.add(middleware);
project.middleware.remove(idmiddleware);
project.middleware.get(idmiddleware);
// Servicios
project.services.add(service);
project.services.remove(idservice);
project.services.get(idservices);

project.routes
project.services
project.middleware
Tipo Object Array

Modelo de servidor
Orientado a objetos
VENTAJAS

project.routes
CONTROLADORES
ANIDABLES
Conectables y
desconectables
en caliente

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.crypt
2. JSON.decycled
3. Date.format
4. String.format
5. scheduled
6. templated
7. textualization
8. procedure
9. ObjectArray
10. jailer
11. crier

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.json
3) Archivo app.js

PillarsJS
Middleware: 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 middleware
Petición
(request) Respuesta
(response)
Controlador

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

Desarrollo web en Nodejs con Pillars por Chelo Quilón

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à Desarrollo web en Nodejs con Pillars por Chelo Quilón

Similaire à Desarrollo web en Nodejs con Pillars por Chelo Quilón (20)

Plus de betabeers

Plus de betabeers (20)

Dernier

Dernier (10)

Desarrollo web en Nodejs con Pillars por Chelo Quilón