Facebook está revolucionando la forma de desarrollar nuevas experiencias para nuestros usuarios. Aplicaciones móviles, de escritorio y web bajo un mismo paradigma para gobernarlas a todas. Conceptos nuevos en el manejo de estado como Flux y Redux nos ayudan a tacklear la complejidad inherente de las apps modernas. Esta charla es una inmersión técnica a la revolución que ya comenzó y que está cambiando definitivamente la forma en que pensamos el software de consumo masivo.
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.
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
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
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
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
47.
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
49.
50.
51. El problema de MVC, MVVM, MVP, MV*
Notifies changes / updates
notifies user
actions
retireves,
creates &
updates
spawn
views
notifies
model
changes
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”
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())
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
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)
