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
340
Why Bacon is actually good for your health
gianu
3
210
Other Decks in Programming
See All in Programming
WindowInsetsだってテストしたい
ryunen344
1
190
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
360
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
180
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
920
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
340
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
440
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
190
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
290
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Navigating Team Friction
lara
187
15k
Facilitating Awesome Meetings
lara
54
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Adopting Sorbet at Scale
ufuk
77
9.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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