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
230
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
200
Other Decks in Programming
See All in Programming
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
370
PT AI без купюр
v0lka
0
190
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
630
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
860
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
290
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
470
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Writing Fast Ruby
sferik
628
61k
Thoughts on Productivity
jonyablonski
69
4.7k
Visualization
eitanlees
146
16k
Git: the NoSQL Database
bkeepers
PRO
430
65k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Designing for humans not robots
tammielis
253
25k
The World Runs on Bad Software
bkeepers
PRO
68
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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