Functional Reactive Programming for web apps

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.ampliﬁedapp.com/talks github.com/ampliﬁedapp/jsconfuy-‐2015 hep:/ /meetupjs.herokuapp.com/

Slide 57

Slide 57 text

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