$30 off During Our Annual Pro Sale. View Details »

Functional Reactive Programming for web apps

Functional Reactive Programming for web apps

Sergio Rafael Gianazza

April 23, 2015
Tweet

More Decks by Sergio Rafael Gianazza

Other Decks in Programming

Transcript

  1. for Web Apps FUNCTIONAL REACTIVE PROGRAMMING

  2. Sergio  Rafael  Gianazza Leonardo  Garcia  Crespo “gianu” “lenny” @sgianazza @leogcrespo

    github.com/gianu github.com/leoasis
  3. None
  4. None
  5. None
  6. None
  7. ♥ FRP

  8. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Demo

    Conclusiones
  9. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones

    Demo
  10. Aplicaciones mas interactivas Aplicaciones mas interactivas

  11. Manipulacion de estado manipulacion de estado

  12. T  =  S(S-­‐1) T  =  Número  de  transiciones   S

     =  CanLdad  de  estados
  13. vista  =  f(estado)

  14. estado mutable estado mutable

  15. function doSomething(data, callback) { data.valueThatITrust = 42; callback(); utilityFn(data); console.log(data.valueThatITrust);

    // What's the output? }
  16. multiples formas de causar cambios multiples formas de causar cambios

  17. Modelo mental modelo mental

  18. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones

    Demo
  19. MVC MVC Model  View  Controller Controller Model View

  20. MVC MVC Estado  mutable

  21. MVC MVC Estado  mutable Data  Binding

  22. MVC MVC Estado  mutable Data  Binding Eventos  ad  hoc

  23. MVC MVC Estado  mutable Data  Binding Eventos  ad  hoc Cambios

     en  cascada
  24. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones

    Demo
  25. ¿Que es FRP? ¿Que es FRP?

  26. var a = 1; var b = 2; var c

    = a + b; b = 3; console.log(c); // Imperativo = 3, reactivo = 5
  27. map map

  28. reduce reduce

  29. scan scan

  30. merge merge

  31. arquitectura arquitectura

  32. MVI MVI Model  View  Intent Model View Intent

  33. click keydow n input API  rcv Lmeout

  34. intent intent click keydow n input API  rcv Lmeout

  35. intent intent click keydow n input API  rcv Lmeout actions

    actions
  36. intent intent click keydow n input API  rcv Lmeout reduce

    update(acLon,  state) actions actions
  37. intent intent click keydow n input API  rcv Lmeout reduce

    actions actions iniLal  state update(acLon,  state)
  38. intent intent click keydow n input API  rcv Lmeout reduce

    actions actions iniLal  state states states update(acLon,  state)
  39. 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)
  40. 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)
  41. 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)
  42. +

  43. EJEMPLO EJEMPLO

  44. ejemplo ejemplo input   subm it API  receive reduce map

  45. ejemplo ejemplo intent.createBlogPost input   subm it API  receive reduce

    map actions actions {  type:  CREATE_POST  }   {  type:  RECEIVE_POST  }
  46. 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)
  47. 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)
  48. 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)
  49. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones

    Demo
  50. Temario Problema Problema  con  las  soluciones  actuales Solución  Funcional Conclusiones

    Demo
  51. 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
  52. VENTAJAs VENTAjas

  53. desventajas desventajas

  54. recursos blog.amplifiedapp.com/talks github.com/amplifiedapp/jsconfuy-­‐2015 hep:/ /meetupjs.herokuapp.com/

  55. Gracias! and  keep  rockin’! Sergio  Rafael  Gianazza Leonardo  Garcia  Crespo