Functional Reactive Programming for web apps

1. for Web Apps FUNCTIONAL REACTIVE PROGRAMMING
2. Sergio  Rafael  Gianazza Leonardo  Garcia  Crespo “gianu” “lenny” @sgianazza @leogcrespo github.com/gianu github.com/leoasis
7. ♥
8. ♥
9. ♥ FRP
10. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Demo Conclusiones
11. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones Demo
12. Aplicaciones mas interactivas Aplicaciones mas interactivas
13. Manipulacion de estado manipulacion de estado
14. T  =  S(S-­‐1) T  =  Número  de  transiciones   S  =  CanLdad  de  estados
15. vista  =  f(estado)
16. estado mutable estado mutable
17. function doSomething(data, callback) { data.valueThatITrust = 42; callback(); utilityFn(data); console.log(data.valueThatITrust); // What's the output? }
18. multiples formas de causar cambios multiples formas de causar cambios
19. Modelo mental modelo mental
20. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones Demo
21. MVC MVC Model  View  Controller Controller Model View
22. MVC MVC Estado  mutable
23. MVC MVC Estado  mutable Data  Binding
24. MVC MVC Estado  mutable Data  Binding Eventos  ad  hoc
25. MVC MVC Estado  mutable Data  Binding Eventos  ad  hoc Cambios  en  cascada
26. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones Demo
27. ¿Que es FRP? ¿Que es FRP?
28. var a = 1; var b = 2; var c = a + b; b = 3; console.log(c); // Imperativo = 3, reactivo = 5
29. map map
30. reduce reduce
31. scan scan
32. merge merge
33. arquitectura arquitectura
34. MVI MVI Model  View  Intent Model View Intent
35. click keydow n input API  rcv Lmeout
36. intent intent click keydow n input API  rcv Lmeout
37. intent intent click keydow n input API  rcv Lmeout actions actions
38. intent intent click keydow n input API  rcv Lmeout reduce update(acLon,  state) actions actions
39. intent intent click keydow n input API  rcv Lmeout reduce actions actions iniLal  state update(acLon,  state)
40. intent intent click keydow n input API  rcv Lmeout reduce actions actions iniLal  state states states update(acLon,  state)
41. intent intent click keydow n input API  rcv Lmeout reduce map view(state,  inputs) actions actions states states iniLal  state view elements view elements update(acLon,  state)
42. intent intent click keydow n input API  rcv Lmeout reduce map view(state,  inputs) render actions actions states view elements states view elements DOM DOM iniLal  state update(acLon,  state)
43. intent intent click keydow n input API  rcv Lmeout reduce map view(state,  inputs) render actions actions states view elements states view elements DOM DOM iniLal  state update(acLon,  state)
44. +
45. EJEMPLO EJEMPLO
46. ejemplo ejemplo input   subm it API  receive reduce map
47. ejemplo ejemplo intent.createBlogPost input   subm it API  receive reduce map actions actions {  type:  CREATE_POST  }   {  type:  RECEIVE_POST  }
48. ejemplo ejemplo intent.createBlogPost input   subm it API  receive reduce map actions actions states states {  posts:  []  } {  type:  CREATE_POST  }   {  type:  RECEIVE_POST  } {  posts:  [  {  name:  “New  post”}  ]} update(acLon,  state)
49. ejemplo ejemplo intent.createBlogPost input   subm it API  receive reduce map view(state,  inputs) actions actions states view elements states view elements {  posts:  []  } {  type:  CREATE_POST  }   {  type:  RECEIVE_POST  } <Posts  posts={posts}  /> {  posts:  [  {  name:  “New  post”}  ]} update(acLon,  state)
50. ejemplo ejemplo intent.createBlogPost input   subm it API  receive reduce map view(state,  inputs) render actions actions states view elements states view elements DOM DOM {  posts:  []  } {  type:  CREATE_POST  }   {  type:  RECEIVE_POST  } <Posts  posts={posts}  /> {  posts:  [  {  name:  “New  post”}  ]} update(acLon,  state)
51. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones Demo
52. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones Demo
53. MVI MVI intent intent click keydow n input API  rcv Lmeout reduce map update view(state,  inputs) render actions actions states view elements states view elements DOM DOM iniLal  state
54. VENTAJAs VENTAjas
55. desventajas desventajas
56. recursos blog.amplifiedapp.com/talks github.com/amplifiedapp/jsconfuy-­‐2015 hep:/ /meetupjs.herokuapp.com/
57. Gracias! and  keep  rockin’! Sergio  Rafael  Gianazza Leonardo  Garcia  Crespo