Functional and Reactive Jetpack for Javascript

While working on my WebRTC enabled side project, I noticed that many asynchronous processes which can be easily explained are really tough to implement using traditional imperative programming with object structuring. Intuitively we understand what it means. It means that we need to define new abstractions to effectively deal with asynchrony.
In this talk, I want to share with you new kinds of glue for structuring our programs, which I learned while taking bits of two other programming paradigms—functional and reactive—and using them in javascript.

Transcript

1. FUNCTIONAL & REACTIVE JETPACK for  Javascript.
2. Dmytrii Shchadei @metrofun
3. INTRO TODO Dmytrii Shchadei @metrofun
4. FUNCTIONAL & REACTIVE JETPACK for  Javascript.
6. WebRTC
7. ⚙ ⚙ ⚙ SDP  /  ICE SDP  /  ICE DATACHANNEL CASE STUDY: SEND FILE P2P
9. Evénts
10. WHY IMPERATIVE OBJECT ORIENTED PROGRAMMING IS HARD? Combina5on  of  interfaces  creates  new  interfaces Implicit  dependencies  on  closure  variables  and  context Number  of  states  grows  as  a  product  of  its  building  blocks  ones
11. DECLARATIVE PROGRAMMING PART1 FUNCTIONAL PROGRAMMING
12. NO MUTABLE DATA Higher-­‐order  func5ons  (e.g.  map,  filter,  reduce  etc) No  states  due  to  no  assignments No  loops/switch  statements  (condi5ons  are  immutable) Recursion  instead  of  loops  (kudos  to  TCO,  haha  Java)
13. REFERENTIAL TRANSPARENCY No  Math.random   No  Date.now   … NO  SIDE  EFFECTS IDEMPOTENT Arguments  modifica5on   Excep5ons   …
14. UNIX PHILOSOPHY Make  each  program  do  one  thing  well.     Expect  the  output  of  every  program   to  become  the  input  to  another Douglas  McIlroy   The  inventor  of  Unix  pipes   “
15. DECLARATIVE PROGRAMMING PART2 REACTIVE PROGRAMMING
16. How to compose side effects? E R R R O A S Y C N
17. Generalize & Unify Value  +  Value  =  Collec5on Value  +  Async  =  Callbacks Value  +  Async  +  Errors  =  Promise Value  +  Value  +  Async  +  Errors  =  ?
18. Interface  Observable  <T> Interface  Iterator  <T> boolean  hasNext() T  next() Interface  ?  <T> onCompleted(  func5on  ) onNext(  func5on(  T  )  ) onError(  func5on(  Error  )  ) Let’s derive… Interface  Promise onError(  func5on(  Error  )  )   …
19. How does it fit the whole picture? SINGLE VALUE MULTIPLE VALUES PULL SYNC INTERACTIVE Value Collection PUSH ASYNC REACTIVE Promise Observable
20. What we received? Inversion  of  control  –  reac5veness  (less  memory)   Errors  are  first  class  ci5zens   Side  effects  are  encapsulated  so  we  can  use  FP
21. Observables + Higher Order Functions RxJS
22. CASE STUDY: TRANSFER PAGE
23. let  dataOb  =  /*  data  stream  of  ArrayBuffer  chunks  from  WebRTC  */…   let  metaOb    =  /*  single  meta  object  with  filename  &  size  from  Signal  Server  */… let  sentSizeOb  =  dataOb.scan(/*ini5al  value*/0,  (sum,  data)    =>  sum  +  data.byteLength); BEAUTY OF PROPER ABSTRACTION let  progressOb  =  sentSizeOb.combineLatest(metaOb,        (size,  meta)  =>  size  /  meta.size  *  100).subscribe(/*update  UI*/…); let  speedOb  =  sentSizeOb.skip(1).combineLatest(dataOb.take(1).map((size)  =>  {5me:  Date.now(),  size}),          (sum,  first)  =>  (sum  -­‐  first.size)  /  (Date.now()  -­‐  first.5me)).subscribe(/*update  UI*/…); let  5meleiOb  =  speedOb.combineLatest(sentSizeOb,metaOb,          (speed,  sizeSent,  meta)  =>  (meta.size  -­‐  sizeSent)  /  speed).subscribe(/*update  UI*/…);
24. Your  Mouse  is  a  Database Erik  Meijer     author  of  Reac=ve  Extensions “ (100,  30) (0,  0) (170,  -­‐10) (260,  50)
25. DECLARATIVE PROGRAMMING PART3 FRP?
26. FP + RP !== FRP
28. As  far  as  I  can  tell,  Rx  and  Bacon.js  lack  both  of  the  two   fundamental  proper5es  on  which  I  based  the  original  FRP.    I  think  an  accurate  descrip5on  of  Rx  and  Bacon.js  is   "composi5onal  event  systems  inspired  by  FRP". “ Conal  Ellio?   inventor  of  FRP
30. FRP (kinda SVG) RxJS, BaconJS (kinda BMP) Denota5on:  x(t)  =  t            y(t)  =  1            t  ∈  [0,  3] Sequence:  [{x:  1,  y:  0},            {x:1,  y:1},            {x:1,  y:2},            {x:1,  y:3}] x x y y
31. FRP IS DEAD LONG LIVE COMPOSITIONAL EVENT SYSTEMS
32. Dziękuję! Pytania? gmetrofun@gmail.com @metrofun TELE FILE htp://telefile.me