Functional Reactive Programming
with
Bacon.js
CHI SONO
FRANCESCO AGATI
PROGRAMMATORE JAVASCRIPT E RUBY
LAVORO IN VEESPO
PREAMBOLO
JAVASCRIPT
E'
SINGLE THREAD
SINGLE THREAD
UN UNICO THREAD
PER GESTIRE
EVENTI, ANIMAZIONI,
MANIPOLAZIONE DEL DOM
INPUT,OUTPUT
ESECUZIONE DEL CODICE
SINGLE THREAD
COSA SUCCEDE
SE INSERISCO
UN CLICLO FOR DA 1 A 1 MILIONE
IN UN SITO CON MOLTE
ANIMAZIONI?
EVENT LOOP
OGNI BROWSER HA UNA QUEUE
DOVE VENGONO ACCODATE
TUTTI GLI EVENTI E
LE OPERAZIONI CHE DEVONO ESSERE
ESEGUITE
(COMPRESO IL CODICE JAVASCRIPT)
EVENT LOOP
SPEZZANDO
TUTTE LE ATTIVITA'
IN TANTE PICCOLE OPERAZIONI ASINCRONE
IL BROWSER RESTA SEMPRE
RESPONSIVO
EVENT LOOP
TUTTE LE OPERAZIONI
DI I/O SINCRONO
E L'ESECUZIONE DI CODICE
BLOCCANO L'EVENT LOOP
RENDENDO IL BROWSER BLOCCATO
EVENT LOOP
PER QUESTO TUTTE
LE OPERAZIONI
DI I/O
SONO SEMPRE
ASINCRONE
EVENT LOOP
QUINDI
MAI BLOCCARE
L'EVENT LOOP
PER RENDERE LA NOSTRA INTERFACCIA
SEMPRE RESPONSIVA
60 FpS
(FRAME PER SECOND)
PERCHE' UN'INTERFACCIA
SIA SEMPRE FLUIDA
LE ANIMAZIONI DEVO ESSERE
DI 60 FPS
60 FPS
1 SECONDO = 1000 ms
1000ms / 60 = 16.6 ms
?
EVENT LOOP
PER NON BLOCCARE L'EVENT LOOP
E RISPETTARE I 60 FPS
IL NOSTRO CODICE
JAVASCRIPT
NON DEVE MAI SUPERARE
I 16ms
DI ESECUZIONE
EVENT LOOP
IL CODICE VA SPEZZETTATO
IN TANTE PICCOLE
FUNZIONI CHE VENGONO
ACCODATE
NELLA QUEUE DI ESECUZIONE
DEL BROWSER
EVENT LOOP
TRADOTTO????????
CALLBACKS
COSA C'E' DI PEGGIO
DI DOVER SPEZZARE
IL NOSTRO CODICE
IN FUNZIONI ATOMICHE DI 16ms
E INSERIRLE IN UNA QUEUE
CHE VERRA
ESEGUITA DALL'EVENT LOOP?
?
DOVER GESTIRE
1000 CONNESSIONI AL SECONDO
CON UN LINGUAGGIO SERVER SIDE
SINGLE THREAD
CHE NON SUPPORTA
GREEN THREADS, FIBER, CORUTINES,
CONTINUATIONS
A BUON INTENDITORE
POCHE PAROLE
FUNCTIONAL PROGRAMMING
NELLA PROGRAMMAZIONE FUNZIONALE
LE FUNZIONI
VENGONO GESTITE COME OGGETTI
FUNCTIONAL PROGRAMMING
LE FUNZIONI POSSO ESSERE
- PASSATE COME ARGOMENTI DI ALTRE FUNZIONI
- GENERATE DA ALTRE FUNZIONI
- COMPOSTE IN FUNZIONI COMPLESSE
FUNCTIONAL PROGRAMMING
[1,2,3,4,5]
.map (el) -> el + 100
.filter (el) -> el > 102
.sort (a,b) -> a - b
.map (el) -> el + 100
.filter (el) -> el > 102
.sort (a,b) -> a - b
FUNCTIONAL PROGRAMMING
sum_gen = (a) -> (b) -> (c) -> (d) -> a + b + c + d
sum_6 = sum_gen (1)(2)(3)
sum_6(4) === 10
FUNCTIONAL PROGRAMMING
COME LE PIPE IN LINUX
ls -l | grep "Aug" | sort +4n | more
POSSIAMO COMPORRE LE FUNZIONI
FUNCTION COMPOSITION
process_data = compose(map, filter, sort, reverse)
process_data([1,2,3,4,5])
FUNCTION COMPOSITION
LE FUNCTION COMPOSITION
CREANO DELLE PIPELINE
PER TRASFORMARE
E FILTRARE
I DATI N INGRESSO
FRP
(FUNCTIONAL REACTIVE PROGRAMMING)
GESTIRE
VALORI CHE CAMBIANO NEL TEMPO
CON I PATTERN
DELLA PROGRAMMAZIONE
FUNZIONALE
FRP
CONVERTIRESINGOLI EVENTI IN STREAM
$("#plus").asEventStream('click')
FRP
CONVERTIREEVENTI IN VALORI
$("#plus")
.asEventStream('click')
.map(1)
FRP
COMBINARE PIU' EVENTIIN UN UNICO STREAM
plus = $("#plus").asEventStream('click').map(1)
minus = $("#minus").asEventStream('click').map(-1)
stream = plus.merge(minus)
minus = $("#minus").asEventStream('click').map(-1)
stream = plus.merge(minus)
FRP
ACCUMULARE E TRASFORMARE EVENTI
sum = (a,b) -> a + b
stream.scan(0,sum).onValue (value) -> console.log(value)
FRP
ACCUMULARE E TRASFORMARE EVENTI
stream.bufferWithTimeOrCount(200,5)
FRP
FILTRARE GLI EVENTI
greater_than_six = (value) -> value > 6
stream.filter(greater_than_six)
FRP
CREARE UNA PIPELINE DI EVENTI ASINCRONI
team_id = Bacon.constant('inter')
players = team_id.flatMap (id) ->
Bacon.fromPromise($.get('/players/' + id + '.json'))
FRP
LA FRP E' UN ASTRAZIONE
CHE PERMETTE
DI GESTIRE GLI EVENTI
ALL'INTERNO DI PIPELINE
CON I PATTERN CLASSICI
DELLA PROGRAMMAZIONE FUNZIONALE
(map, filter,compose....)
FRP
LO SWITCH TRA
SINCRONO E ASINCRONO
VIENE GESTITO NELLA
STESSA PIPELINE
QUESTIONS
?
deck
By francesco agati