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
210
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
300
Why Bacon is actually good for your health
gianu
3
200
Other Decks in Programming
See All in Programming
はじめてみよう量子プログラミング
itokoichi01
0
210
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
170
Prolog入門
qnighy
4
1k
Jakarta EE meets AI
ivargrimstad
1
520
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Swiftコードバトル必勝法
toshi0383
0
170
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
Featured
See All Featured
Unsuck your backbone
ammeep
667
57k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Documentation Writing (for coders)
carmenintech
65
4.3k
The Invisible Customer
myddelton
119
13k
A designer walks into a library…
pauljervisheath
201
24k
Designing for Performance
lara
604
68k
Building Applications with DynamoDB
mza
90
6k
Automating Front-end Workflow
addyosmani
1365
200k
What's in a price? How to price your products and services
michaelherold
242
11k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
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