Functional Reactive Systems

7fca546408cc6d46ab158f06baed2535?s=47 Nate Abele
September 30, 2016

Functional Reactive Systems

This talk gives an intro to using functional programming (with the Ramda JS library) with observables (a la RxJS) to compose powerful application logic that is easy to reason about and easy to test.

7fca546408cc6d46ab158f06baed2535?s=128

Nate Abele

September 30, 2016
Tweet

Transcript

  1. FUNCTIONAL REACTIVE SYSTEMS LIBERTYJS 2016

  2. FUNCTIONAL REACTIVE SYSTEMS YOUR HOST: NATE ABELE ▸ Some PHP

    frameworks (Li3, CakePHP) ▸ AngularUI Router ▸ Architect @ Radify ▸ nate@radify.io ▸ @nateabele
  3. FUNCTIONAL REACTIVE SYSTEMS ATTENDEE LICENSE AGREEMENT ▸ Permission granted to

    watch this talk, without restriction ▸ Including but not limited to the right to apply knowledge, learn new things & combine… or disregard entirely ▸ THE TALK IS PROVIDED “AS-IS”, WITHOUT WARRANTY OF ANY KIND ▸ INCLUDING BUT NOT LIMITED TO ▸ MERCHANTABILITY ▸ FITNESS FOR ANY PARTICULAR PURPOSE ▸ NONINFRINGEMENT
  4. BUZZWORD BINGO

  5. FUNCTIONAL REACTIVE SYSTEMS TERMINOLOGY ▸ Functional: ¯\_(ϑ)_/¯ see Wikipedia ▸

    Reactive: Time ▸ Systems: This talk === front-end only
  6. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL ▸High-order function composition ▸Separate data from

    behavior ▸Purity
  7. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL LIBRARIES ▸ Underscore ▸ LoDash

  8. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL LIBRARIES ▸ Underscore ▸ LoDash LIES

  9. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL LIBRARIES ▸ Ramda ▸ Underscore ▸

    LoDash LIES
  10. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL var people = [ { name:

    "Alice" }, { name: "Bob" }, { name: "Dave" }, { name: "Sally" } ]; // -> ["Alice", "Bob", "Dave", "Sally"]
  11. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL var result = []; for (var

    i = 0; i < people.length; i++) { result.push(people[i].name); }
  12. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL var result = []; for (var

    i = 0; i < people.length; i++) { result.push(people[i].name); doSomethingElse(); <—— Badness }
  13. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL people.map(person => person.name)

  14. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL import { prop } from 'ramda';

    people.map(prop(‘name'));
  15. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL import { prop, map } from

    'ramda'; const names = map(prop('name')); names(people);
  16. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL: UNDER THE HOOD import { curry

    } from 'ramda'; const prop = curry((name, obj) => { return obj[name]; }); // prop(name)(obj) === prop(name, obj) // === prop()()(name)()()(obj)
  17. FUNCTIONAL REACTIVE SYSTEMS REACTIVE ▸ The observer pattern ▸ aka

    publish/subscribe ▸ aka streams ▸ aka observables
  18. OBSERVABLES PROMISES VS. FIGHT

  19. FUNCTIONAL REACTIVE SYSTEMS PROMISES ▸ Asynchronous ▸ A (possible) future

    value ▸ Exactly one value ▸ Immutable ▸ Automatic flattening
  20. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLES ▸ Synchronous or asynchronous ▸ Zero

    to ∞ values ▸ No automatic flattening
  21. FUNCTIONAL REACTIVE SYSTEMS PROMISE USE CASES ▸ HTTP requests ▸

    <Bullet point intentionally left blank>
  22. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE USE CASE ▸ HTTP requests ▸

    DOM events ▸ Websockets ▸ Iterators ▸ Arrays ▸ etc.
  23. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE CAPABILITIES ▸ Cancel! ▸ Retry ▸

    Replay
  24. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE CAPABILITIES ▸ <Bullet point intentionally left

    blank>
  25. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE LIBRARIES ▸ BaconJS ▸ HighlandJS ▸

    CycleJS ▸ RxJS ▸ Angular 2
  26. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE EXAMPLES var clickStream = Observable.fromEvent(element, ‘click’);

    clickStream.subscribe(console.log.bind(console, ‘Clicked!’));
  27. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE EXAMPLES clickStream .map(e => ({ x:

    e.clientX, y: e.clientY })) .subscribe(console.log.bind(console, ‘Coords:’));
  28. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE OPERATORS ▸buffer ▸bufferCount ▸bufferTime ▸bufferToggle ▸bufferWhen

    ▸combineAll ▸combineLatest ▸concat ▸concatAll ▸concatMap ▸concatMapTo ▸count ▸ debounce ▸ debounceTime ▸ defaultIfEmpty ▸ delay ▸ delayWhen ▸ dematerialize ▸ distinctUntilChanged ▸ do ▸ every ▸ expand ▸ filter ▸ first ▸groupBy ▸ignoreElements ▸last ▸let ▸map ▸mapTo ▸merge ▸mergeMap ▸partition ▸pluck ▸publish ▸race ▸repeat ▸retry ▸retryWhen ▸sample ▸scan ▸share ▸single ▸skip ▸skipUntil ▸…
  29. EXAMPLE: TYPEAHEAD

  30. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE EXAMPLES const rxFetch = (url) =>

    Observable.fromPromise( fetch(url).then(res => res.json()) ); Observable.fromEvent(input, 'change') .distinctUntilChanged() .debounceTime(400) .flatMapLatest(term => rxFetch('/search?q=' + term) .subscribe((results) => { /* Update */ })
  31. TESTING & DEBUGGING

  32. None
  33. FIN