Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Reactvolution
Similar a Reactvolution (20)
Más de _Lagash
Último
Último (20)
Reactvolution
- 6. Tus nuevos usuarios son expertos… y muy exigentes
- 8. 0 50 100 150 200 250 300 350 400 450 500 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 JS Request Size ECMAScript 3 ECMAScript 5 ECMAScript 4 abondoned
- 9. lagash.com ¿Cómo era programar la web en 2004?
- 10. if { ?> <? ?> } else { ?> form input input form }
- 12. if { echo { } } else { echo form input input form } Markup: ciudadano de primera clase Contenido “escapeado” por defecto en compilación
- 13. if { salute } else { $content = <askNameForm text=“What’s your name” />; } echo $content; Componentización del markup
- 14. 2011 : Contexto • Cantidad de “mobile users”s acercando a “desktop users” • Notificaciones y eventos real time • “Dynamic Web Applications” & “Single Page Applications” • Necesidad de evitar roundtrips para el rendering de HTML • Necesidad de una forma mas sencilla de desarrollar aplicaciones complejas
- 15. ReactJS En 2011 un desarrollador que trabajaba en Facebok-Ads negocia con su jefe seis meses para intentar portar XHP a JavaScript. Ese desarrollador es Jordan Walke
- 16. 6 meses mas tarde… • React es integrado en el news-feed de Facebook • 1 año después: • Es integrado al news-feed de Instagram • En 2013 • Se anuncia como Open Source en JSConf • En 2015 • Se libera React Native, la versión para desarrollo de aplicación móviles y de escritorio.
- 18. lagash.com ¿Pero qué problema resuelve React?
- 19. DOM rendering (server side) Hola Sergio!
- 20. DOM mutation (client side) Hola Sergio!
- 21. Implementación naive: reemplazar DOM
- 22. Muchos problemas!! • DOM guarda mucho estado • Foco y selección de los inputs • Posición del scroll • iFrames • Parte de ese estado está oculto o es inaccesible
- 23. Solución: re-usar nodos n1 n2 n3 n4 n1 n2 n3 n4 n5
- 24. Solución: re-usar nodos n1 n2 n3 n4 n1 n2 n3 n4n5
- 25. Diff algorithms
- 27. Diff Algorithms • Los algoritmos que existían eran de un orden O(n3) • n es la cantidad de elementos a comparar • 1000 elementos requiere 1000 millones de comparaciones. • A una velocidad de 1GHz, esto es algo así como: • 1000 segundos => 17 minutos!
- 28. Reconciliation • React utiliza un algoritmo heurístico de un orden o(n) asumiendo dos cosas: • Dos elementos de diferente tipo producen árboles diferentes • El desarrollador puede indicar que elementos se mantendrán estables (pruning) https://facebook.github.io/react/docs/reconciliation.html
- 29. Pruning n1 n2 n3 n4 n5 n6 n7 n8 bool shouldComponentUpdate(props, state);
- 31. Virtual DOM n1 n2 n3 n4 n1 n2 n3 n4n5 n6 n7 n5 n6 n7 Mutations
- 33. lagash.com Quick demo such wow much component very reactive so ES6
- 35. Props • Es la “configuración” del componente • Recibida desde un componente de orden superior • Son inmutables • Un componente no puede cambiar sus propias propiedades • Si puede cambiar las propiedades que le pasa a componentes de orden inferior
- 36. State • Representa los datos variables del componente • Es mutable • setState(newState) • No todos los componentes requieren de estado • Stateless components
- 37. Aspectos comunes • Ambos son objetos JS planos • Cambios en cualquiera de ellos disparan un Render() • Determinismo • Misma combinación de props y state debe producir la misma salida
- 39. Embrace the challengelagash.com Tres fases principales Initialization State Changes Prop Changes
- 41. Embrace the challengelagash.com State Changes
- 42. Embrace the challengelagash.com Props Changes
- 45. function newMessageHandler(message) { var chatTab = ChatTabs.getChatTab(message.threadID); chatTab.appendMessage(message); } Agregar el mensaje al tab de chat
- 46. function newMessageHandler(message) { UnseenCount.incrementUnseen(); var chatTab = ChatTabs.getChatTab(message.threadID); chatTab.appendMessage(message); if (chatTab.hasFocus) { UnseenCount.decrementUnseen(); } } Incrementar mensajes no vistos Decrementar si el usuario está viendo el chat
- 48. function newMessageHandler(message) { UnseenCount.incrementUnseen(); var chatTab = ChatTabs.getChatTab(message.threadID); chatTab.appendMessage(message); var messagesView = Messages.getOpenView(); var threadID = MessagesView.getThreadID(); if (threadID == message.threadID) { messagesView.appendMessage(message); } if (chatTab.hasFocus || threadID == message.threadID) { UnseenCount.incrementUnseen(); } } Agregar el mensaje a la vista principal de mensajes
- 51. El problema de MVC, MVVM, MVP, MV* Notifies changes / updates notifies user actions retireves, creates & updates spawn views notifies model changes
- 52. El problema de MVC, MVVM, MVP, MV*
- 57. Flux • Almacena el estado de la aplicación. • “Registra” callbacks al dispatcher para ser notificado de los eventos (acciones) que ocurrieron. • Modifica el estado “Dispara” nuevas acciones como producto de las interacciones del usuario • Coordina los cambios de estado (“traffic control”) • Evita la existencia de efectos “cascada”
- 58. Flux
- 59. lagash.com Flux demo such wow much dispatched very reactive so flux
- 60. Stores dissected • Encapsulan el estado de la aplicación • Desde afuera del store nunca se accede al estado directamente • Componentes y vistas acceden mediante métodos • Los cambios de estado son comunicados emitiendo eventos • extends EventEmitter • Implementan un método para “atender” las acciones que llegan desde el dispatcher • handleActions(action) • Deben registarse con el dispatcher para recibir acciones • dispatcher.register(store.handleActions())
- 61. Todo esto podríamos “reducirlo” a… (state, action) => state
- 62. Todo esto podríamos “reducirlo” a… (acc, val) => acc
- 63. Todo esto podríamos “reducirlo” a… reduce((acc, val) => acc)
- 64. ¡Es un reducer!
- 65. const actions = [ { id: 1, type: “CREATE_TODO”, text: “Aprender ReactJS” }, { id: 2, type: “CREATE_TODO”, text: “Aprender Flux” }, { id: 3, type: “CREATE_TODO”, text: “Aprender Redux” }, { type: “DELETE_TODO”, id: 2 }
- 66. actions.reduce(todosReducer, []) [ { id: 1, text: "Aprender ReactJS", complete: false }, { id: 3, text: "Aprender Redux", complete: false }, ]
- 68. Redux • Inventado por Dan Abramov, el creador de… • React Hot Loader • create-react-app • React DnD
- 69. lagash.com Redux demo such wow much reduced very reactive so redux
- 75. Learn once, write anywhere. • React Native facts… • Compila JSX a código nativo • Permite integrar componentes nativos escritos en otros lenguajes • Swift, Objective-C, Java • Muy buenas herramientas • create-react-native-app • HOT RELOADING!!
- 76. lagash.com React Native quick demo such wow much mobile very reactive so native
- 79. Stack Reconciler • Actualmente usado en producción por todas las aplicaciones React • Escrito bajo el paradigma “object oriented” • Host components • Composite components • Los updates de UI se hacen de manera recursiva todos los composite components
- 80. Limitaciones • Jerarquías muy profundas + CPU limitado pueden generar efectos no deseados • No hay forma de distinguir que trabajo computacional es mas prioritario • No hay forma de dividir el trabajo computacional en partes
- 81. El futuro (cercano) según Mark…
- 87. Fiber Reconciler • Re-write del algoritmo de reconciliación orientado a que los desarrolladores piensen en la priorización desde el diseño • Provee las capacidades para: • Priorizar trabajo (scheduling) • Particionar trabajo (work chunks)
- 92. Argentina | Buenos Aires +54 (11) 4982 4185 info@lagash.com Chile | Santiago de Chile +56 (2) 2231 9428 info_chile@lagash.com Colombia | Bogotá +57 (1) 750 5276 info_colombia@lagash.com México | México DF +52 (55) 6394 0617 info_mexico@lagash.com USA | Seattle - US +1 844 4 Lagash infousa@lagash.com Uruguay | Montevideo +598 2623 2546 info_uy@lagash.com Let’s keep in touch