Hypo slides
-
Upload
roberto-aranda-lopez -
Category
Software
-
view
38 -
download
0
Transcript of Hypo slides
![Page 1: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/1.jpg)
![Page 3: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/3.jpg)
Roberto ArandaLead Developer en Sequel Business Solutions
SQL
Backend
Front end apasionado
10+ años desarrollando software
@glomenar
![Page 4: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/4.jpg)
AgendaAngular 1
React
Angular 2
![Page 5: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/5.jpg)
AgendaAngular 1
React
Angular 2
![Page 6: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/6.jpg)
Una historia
![Page 7: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/7.jpg)
2014
![Page 8: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/8.jpg)
Hypotheke
![Page 9: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/9.jpg)
Hypotheke?
![Page 10: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/10.jpg)
AngularJS 1Superheroic JavaScript MVVM Framework
Creado por Google es uno de los frameworks de JavaScript más
usados
Tiene todo lo necesario para crear una Single Page Application
Usa un event loop conocido como $digest loop para aplicar cambios
![Page 11: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/11.jpg)
Show me theCode
![Page 12: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/12.jpg)
2016
![Page 13: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/13.jpg)
ReactA JavaScript library for building user interfaces
Creado por Facebook es una apuesta segura estos días
Declarativo y basado en Componentes
Usa el concepto de Virtual DOM para minimizar el rendering
![Page 14: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/14.jpg)
ImplicacionesCreas elementos HTML en tus ficheros JavaScript
Inventan un nuevo lenguaje para aliviar el paso anterior
denominado JSX
JSX es simplemente insertar HTML en el fichero JavaScript
Hay que compilar JSX como un paso previo
No se llama compilar, se llama transpilar
Se usa Babel que realiza la compilación
Para usar el navegador, necesitas dos librerias: React y ReactDOM
Los componentes de React se pueden crear como clases ES6
extendiendo React.Component
No se llama ES6, se llama ES2015
![Page 15: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/15.jpg)
JavascriptFatigue
Saul: “How’s it going?”
Me: “Fatigued.”
Saul: “Family?”
Me: “No, Javascript.”
![Page 16: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/16.jpg)
create-react-appPaquete NodeJs para crear aplicaciones con React, incluye el
transpilador, bundler, hot-realoading, server, etc. con
Zero Configuration
![Page 17: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/17.jpg)
Vamos a verlo
![Page 18: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/18.jpg)
2016... y pico
![Page 19: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/19.jpg)
AngularJS 2One framework
Creado por Google no es una evolución de Angular 1 sino una re-
escritura desde cero
También está basado en Componentes pero contiene mucho más
que UI
Mejora notablemente el rendimiento gracias a una nueva
estrategia de detección de cambios
Usa una librería externa llamada ZoneJs para notificar los cambios
![Page 20: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/20.jpg)
Vamos al turrón
![Page 21: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/21.jpg)
ConclusionesHay una clara tendencia al diseño orientado a Componentes, no
solo en React y Angular 2 sino en otros frameworks
El Front End Development ha cambiado y cambia a gran velocidad
como se puede ver comparando Angular 1 y 2
A pesar de las diferencias se identifican patrones comunes. Los
frameworks son herramientas pero los buenos principios los
pones tu: Single Responsibility y Separation of Concerns
React es solo una librería de UI mientras que Angular es un
framework completo. Esto implica la necesidad de tomar más
decisiones en desarrollo y más diferencias entre aplicaciones.
React facilita la Composición de una manera natural y simple,
Angular 2 parece más verbose
![Page 22: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/22.jpg)
No hay ni habrá un Framework que los gobierne a
todos
![Page 23: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/23.jpg)
¿Preguntas?
![Page 24: Hypo slides](https://reader030.fdocuments.in/reader030/viewer/2022020113/58a3a93c1a28ab9e6a8b56f9/html5/thumbnails/24.jpg)