Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Functional Reactive Programming for web apps
Search
Sergio Rafael Gianazza
April 23, 2015
Programming
0
240
Functional Reactive Programming for web apps
Sergio Rafael Gianazza
April 23, 2015
Tweet
Share
More Decks by Sergio Rafael Gianazza
See All by Sergio Rafael Gianazza
Meetup.js - React.js
gianu
1
350
Why Bacon is actually good for your health
gianu
3
210
Other Decks in Programming
See All in Programming
AIコーディングAgentとの向き合い方
eycjur
0
250
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
私の後悔をAWS DMSで解決した話
hiramax
4
180
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
1k
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
1
200
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
旅行プランAIエージェント開発の裏側
ippo012
1
590
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing Experiences People Love
moore
142
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Typedesign – Prime Four
hannesfritz
42
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Visualization
eitanlees
147
16k
Balancing Empowerment & Direction
lara
3
610
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
for Web Apps FUNCTIONAL REACTIVE PROGRAMMING
Sergio Rafael Gianazza Leonardo Garcia Crespo “gianu” “lenny” @sgianazza @leogcrespo
github.com/gianu github.com/leoasis
None
None
None
None
♥
♥
♥ FRP
Temario Problema Problema con las soluciones actuales Solución Funcional Demo
Conclusiones
Temario Problema Problema con las soluciones actuales Solución Funcional Conclusiones
Demo
Aplicaciones mas interactivas Aplicaciones mas interactivas
Manipulacion de estado manipulacion de estado
T = S(S-‐1) T = Número de transiciones S
= CanLdad de estados
vista = f(estado)
estado mutable estado mutable
function doSomething(data, callback) { data.valueThatITrust = 42; callback(); utilityFn(data); console.log(data.valueThatITrust);
// What's the output? }
multiples formas de causar cambios multiples formas de causar cambios
Modelo mental modelo mental
Temario Problema Problema con las soluciones actuales Solución Funcional Conclusiones
Demo
MVC MVC Model View Controller Controller Model View
MVC MVC Estado mutable
MVC MVC Estado mutable Data Binding
MVC MVC Estado mutable Data Binding Eventos ad hoc
MVC MVC Estado mutable Data Binding Eventos ad hoc Cambios
en cascada
Temario Problema Problema con las soluciones actuales Solución Funcional Conclusiones
Demo
¿Que es FRP? ¿Que es FRP?
var a = 1; var b = 2; var c
= a + b; b = 3; console.log(c); // Imperativo = 3, reactivo = 5
map map
reduce reduce
scan scan
merge merge
arquitectura arquitectura
MVI MVI Model View Intent Model View Intent
click keydow n input API rcv Lmeout
intent intent click keydow n input API rcv Lmeout
intent intent click keydow n input API rcv Lmeout actions
actions
intent intent click keydow n input API rcv Lmeout reduce
update(acLon, state) actions actions
intent intent click keydow n input API rcv Lmeout reduce
actions actions iniLal state update(acLon, state)
intent intent click keydow n input API rcv Lmeout reduce
actions actions iniLal state states states update(acLon, state)
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)
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)
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)
+
EJEMPLO EJEMPLO
ejemplo ejemplo input subm it API receive reduce map
ejemplo ejemplo intent.createBlogPost input subm it API receive reduce
map actions actions { type: CREATE_POST } { type: RECEIVE_POST }
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)
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)
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)
Temario Problema Problema con las soluciones actuales Solución Funcional Conclusiones
Demo
Temario Problema Problema con las soluciones actuales Solución Funcional Conclusiones
Demo
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
VENTAJAs VENTAjas
desventajas desventajas
recursos blog.amplifiedapp.com/talks github.com/amplifiedapp/jsconfuy-‐2015 hep:/ /meetupjs.herokuapp.com/
Gracias! and keep rockin’! Sergio Rafael Gianazza Leonardo Garcia Crespo