Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desarrollo web en Nodejs con Pillars por Chelo Quilón

71 views

Published on

Desarrollo web en Nodejs con Pillars por Chelo Quilón. En esta charla veremos inicialmente conceptos de Node.js y JavaScript, para después introducir las características diferenciadoras del desarrollo web en Node.js y se expondrá la metodología para crear una aplicación web mediante el framework Pillars.js.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Desarrollo web en Nodejs con Pillars por Chelo Quilón

  1. 1. Huelva 24 de Mayo de 2017 Desarrollo web en con
  2. 2. 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.
  3. 3. JavaScript
  4. 4. 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.
  5. 5. 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
  6. 6. 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.
  7. 7. 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
  8. 8. ES1 ES1 ES1 ES1 JavaScript - versiones ES1 ES2 ES3 ES5 ES5.1 ES6 ES7 https://kangax.github.io/compat-table/es6/
  9. 9. 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
  10. 10. 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.
  11. 11. 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
  12. 12. 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/
  13. 13. 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
  14. 14. 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/
  15. 15. JavaScript - ES7 Exponente: let result = 5 ** 2; Array: Array.prototype.includes(); Cambiar el scope de una función a modo estricto.
  16. 16. JavaScript - ES8 - En progreso La más relevante ahora: Asincronía: Async Functions, async y await.
  17. 17. JavaScript - asincronía setTimeout( ()=>console.log("Primero") ,2000); console.log("Segundo"); Imprime primero Segundo y a los dos segundos Primero.
  18. 18. 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:
  19. 19. 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
  20. 20. JavaScript - librerías
  21. 21. 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
  22. 22. JavaScript en el servidor
  23. 23. 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)
  24. 24. 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)
  25. 25. 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
  26. 26. 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
  27. 27. 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); });
  28. 28. 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
  29. 29. Node.js En principio, desaparece la estructura en directorios, como en apache/php, apareciendo el concepto de controlador.
  30. 30. 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);
  31. 31. 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
  32. 32. 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.
  33. 33. Hola Mundo
  34. 34. 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
  35. 35. Node.js 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!!"); })); Hola Mundo con Pillars.js: Controlador
  36. 36. Modelo de servidor Orientado a objetos
  37. 37. 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)
  38. 38. Node.js con Pillars.js var project = require('pillars'); project.config; // Configuración del proyecto project.services; // Servicios del proyecto project.routes; // Controladores del proyecto project.middleware; // Middleware del proyecto
  39. 39. Node.js con Pillars.js // Inclusión de la librería var 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') };
  40. 40. Node.js con Pillars.js // Inclusión de la librería var project = require('pillars'); // 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);
  41. 41. project.routes Node.js con Pillars.js project.services project.middleware Tipo Object Array
  42. 42. Modelo de servidor Orientado a objetos VENTAJAS
  43. 43. project.routes CONTROLADORES ANIDABLES Conectables y desconectables en caliente
  44. 44. Endesarrollo
  45. 45. ECOSISTEMA
  46. 46. 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 ● ...
  47. 47. 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
  48. 48. EJEMPLO
  49. 49. 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
  50. 50. MIDDLEWARE
  51. 51. 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
  52. 52. Proyectos
  53. 53. IoT Agricultura
  54. 54. Anímate, úsalo y/o Colabora!! hello@pillarsjs.com @lilxelo @bifuer @pillarsjs
  55. 55. Gracias!!!

×