presentación de powerpointpolymer o webcomponents. •muy rápido gracias al virtual dom. lo malo...
TRANSCRIPT
![Page 1: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/1.jpg)
Inside OutUna aplicación web por dentro y por fuera
![Page 2: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/2.jpg)
Juan María Hernández
• Desarrollador de software viejuno con experiencia.
• Escribo un blog: http://blog.koalite.com
• Me quejo por todo en twitter: @gulnor
• Recopilo enlaces y camisetas: http://kipple.koalite.com
Quién soy
![Page 3: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/3.jpg)
Qué vamos a hacer
- No vamos a hablar de .NET.
- Ni de ninguna tecnología de Microsoft.
- Vamos a conocer otra forma de trabajar.
Éste es un evento organizado por “entusiastas por la tecnología de Microsoft”, por tanto:
![Page 4: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/4.jpg)
¡Vamos a jugar
a ser Hipsters!
![Page 5: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/5.jpg)
Dos partes
1) Pasar de IDEs para construir una forma de trabajar optimizada para nuestras necesidades.
2) Descartar el [infame] patrón MVVM para diseñar UI más sencillos de entender.
![Page 6: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/6.jpg)
La vida sin un IDE
![Page 7: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/7.jpg)
Node.js como IDE
• Node.js surge como una forma de ejecutar javascript en el servidor. A alguien le pareció una buena idea.
• A partir de eso, se empezaron a crear herramientas para mejorar el desarrollo y se aprovecharon para frontend.
• Nuestro nuevo IDE: editor de texto + npm + CLI.
![Page 8: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/8.jpg)
Ejemplos
• Transpilers (babel, scss, less)
• Linters (jshint, eslint)
• Empaquetadores (browserify, webpack)
• Test runners (karma, mocha, nightwatch)
• Ofuscadores/minificadores (uglify)
• Gestores de tareas (grunt, gulp)
![Page 9: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/9.jpg)
Vamos a usar
• Babel para usar ES2015 y JSX
• Browserify para modularizar la aplicación
• Watchify para recompilar automáticamente
• live-server como servidor de desarrollo
![Page 10: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/10.jpg)
Paso a paso
{ Código }
![Page 11: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/11.jpg)
Lo bueno
• Entorno más ligero
• Flexibilidad absoluta
• Multiplataforma (aunque “Windows Last”, claro)
• Un único lenguaje para todo
![Page 12: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/12.jpg)
Lo malo
• Muchas (¿demasiadas?) opciones
• Configuración compleja
• Herramientas incompatibles entre ellas
• Infierno de versiones(npm shrinkwrap es tu amigo)
![Page 13: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/13.jpg)
Adiós, MVVM
![Page 14: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/14.jpg)
La información en MVVM
• Mutabilidad y databinding bidireccional
![Page 15: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/15.jpg)
El problema de MVVM
• Toda la información es mutable.
• Todos los eventos pueden modificar toda la información.
• Reacciones en cadena.
• Dificultad para razonar sobre el estado del sistema.
![Page 16: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/16.jpg)
Los griegos lo sabían
El ser es inmóvil y eternoParménides de Elea
Filósofos griegos de los siglos 6-5 a.C.
La vida es devenirHeráclito de Éfeso
![Page 17: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/17.jpg)
Prog. Reactiva Funcional
Inmóvil y eterno:f :: state -> view
Devenir:g :: state -> state
* Esto es mentira, en realidad es un poco más complejo
![Page 18: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/18.jpg)
El enfoque de ReactJS
• Es una librería, no un framework.
• Sólo cubre la “vista”. Ni routing, ni módulos, ni inyección de dependencias, ni nada más.
• Se basa en un flujo de información unidireccional. No se usa databinding bidireccional (aunque se puede).
![Page 19: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/19.jpg)
De qué se compone
• Componentes: vistas (o fragmentos de vistas) que convierten información en HTML.
• Dos tipos de información: mutable e inmutable. Con cada cambio del estado (mutable) se renderiza.
• Virtual DOM para optimizar el renderizado.
• Limitar al máximo el estado mutable a los componentes de más alto nivel.
![Page 20: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/20.jpg)
Información en ReactJS
• Flujo de datos unidireccional
![Page 21: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/21.jpg)
Virtual DOM
• Abstrae el DOM real.
• Se puede generar con objetos javascript o con JSX.
• JSX es una sintaxis específica para generar HTML.
Al principio a nadie le gusta.
Se acaba transpilando a JavaScript normal.
![Page 22: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/22.jpg)
JSX JavaScript
![Page 23: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/23.jpg)
Un ejemplo sencillo
{ Código }
![Page 24: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/24.jpg)
El resto es trivial
![Page 25: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/25.jpg)
Algo más complejo
![Page 26: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/26.jpg)
Componentes
App
Search
CardListCard
LazyImage
Card
LazyImage
![Page 27: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/27.jpg)
Componentes
App
Search CardList
Card
LazyImage
Card
LazyImage
Estado Mutable
![Page 28: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/28.jpg)
Código
{ Código }
http://blog.koalite.com/tajamar/code.zip
![Page 29: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/29.jpg)
Qué nos dejamos
• Ciclo de vida de los componentes
• Mixins
• Routing con React-Router
• Flux
• GraphQL
![Page 30: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/30.jpg)
Lo bueno
• Sólo es el UI, puedes usar lo que quieras para el resto.
• Facilita razonar sobre el flujo de información.
• Alta cohesión en cada componente. Similar a Polymer o WebComponents.
• Muy rápido gracias al Virtual DOM.
![Page 31: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/31.jpg)
Lo malo
• Sólo es el UI, tienes que buscarte la vida para el resto.
• Obliga a pensar de una forma diferente que resulta extraña al principio.
• Requiere transpilar el JSX.
• Para aplicaciones de “forms over data”, el databinding bidireccional puede ser más cómodo.
![Page 32: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/32.jpg)
Resumen
• Hay vida más allá de Visual Studio y las tecnologías apadrinadas por Microsoft. Ni mejor, ni peor: diferente.
• Se puede desarrollar con un editor de texto y herramientas de línea de comandos. Incluso hay gente (rara) que piensa que es mejor que un IDE.
• Podemos aplicar un enfoque funcional a la capa de presentación y evitar los problemas de MVVM.
![Page 33: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/33.jpg)
Más información
node.js, npm y tooling variado
http://blog.koalite.com/tag/grunt/
http://blog.koalite.com/2015/06/grunt-o-gulp-que-uso/
http://blog.koalite.com/2015/12/ni-grunt-ni-gulp-solo-npm/
ReactJS
http://blog.koalite.com/tag/reactjs/
![Page 34: Presentación de PowerPointPolymer o WebComponents. •Muy rápido gracias al Virtual DOM. Lo malo •Sólo es el UI, tienes que buscarte la vida para el resto. •Obliga a pensar](https://reader033.vdocumento.com/reader033/viewer/2022042310/5ed792dd67b53e06555d28dd/html5/thumbnails/34.jpg)
¡Gracias!