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
Reading Rails 1.0 Source Code
okuramasafumi
0
250
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
私の後悔をAWS DMSで解決した話
hiramax
4
210
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
180
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
3
62
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Cult of Friendly URLs
andyhume
79
6.6k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Invisible Side of Design
smashingmag
301
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Into the Great Unknown - MozCon
thekraken
40
2k
Balancing Empowerment & Direction
lara
3
630
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