Slide 1

Slide 1 text

for Web Apps FUNCTIONAL REACTIVE PROGRAMMING

Slide 2

Slide 2 text

Sergio  Rafael  Gianazza Leonardo  Garcia  Crespo “gianu” “lenny” @sgianazza @leogcrespo github.com/gianu github.com/leoasis

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

♥ FRP

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Aplicaciones mas interactivas Aplicaciones mas interactivas

Slide 13

Slide 13 text

Manipulacion de estado manipulacion de estado

Slide 14

Slide 14 text

T  =  S(S-­‐1) T  =  Número  de  transiciones   S  =  CanLdad  de  estados

Slide 15

Slide 15 text

vista  =  f(estado)

Slide 16

Slide 16 text

estado mutable estado mutable

Slide 17

Slide 17 text

function doSomething(data, callback) { data.valueThatITrust = 42; callback(); utilityFn(data); console.log(data.valueThatITrust); // What's the output? }

Slide 18

Slide 18 text

multiples formas de causar cambios multiples formas de causar cambios

Slide 19

Slide 19 text

Modelo mental modelo mental

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

MVC MVC Model  View  Controller Controller Model View

Slide 22

Slide 22 text

MVC MVC Estado  mutable

Slide 23

Slide 23 text

MVC MVC Estado  mutable Data  Binding

Slide 24

Slide 24 text

MVC MVC Estado  mutable Data  Binding Eventos  ad  hoc

Slide 25

Slide 25 text

MVC MVC Estado  mutable Data  Binding Eventos  ad  hoc Cambios  en  cascada

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

¿Que es FRP? ¿Que es FRP?

Slide 28

Slide 28 text

var a = 1; var b = 2; var c = a + b; b = 3; console.log(c); // Imperativo = 3, reactivo = 5

Slide 29

Slide 29 text

map map

Slide 30

Slide 30 text

reduce reduce

Slide 31

Slide 31 text

scan scan

Slide 32

Slide 32 text

merge merge

Slide 33

Slide 33 text

arquitectura arquitectura

Slide 34

Slide 34 text

MVI MVI Model  View  Intent Model View Intent

Slide 35

Slide 35 text

click keydow n input API  rcv Lmeout

Slide 36

Slide 36 text

intent intent click keydow n input API  rcv Lmeout

Slide 37

Slide 37 text

intent intent click keydow n input API  rcv Lmeout actions actions

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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)

Slide 42

Slide 42 text

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)

Slide 43

Slide 43 text

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)

Slide 44

Slide 44 text

+

Slide 45

Slide 45 text

EJEMPLO EJEMPLO

Slide 46

Slide 46 text

ejemplo ejemplo input   subm it API  receive reduce map

Slide 47

Slide 47 text

ejemplo ejemplo intent.createBlogPost input   subm it API  receive reduce map actions actions {  type:  CREATE_POST  }   {  type:  RECEIVE_POST  }

Slide 48

Slide 48 text

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)

Slide 49

Slide 49 text

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:  [  {  name:  “New  post”}  ]} update(acLon,  state)

Slide 50

Slide 50 text

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:  [  {  name:  “New  post”}  ]} update(acLon,  state)

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

VENTAJAs VENTAjas

Slide 55

Slide 55 text

desventajas desventajas

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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