Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Functional Reactive Systems

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.

Nate Abele

September 30, 2016
Tweet

More Decks by Nate Abele

Other Decks in Programming

Transcript

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

    frameworks (Li3, CakePHP) ▸ AngularUI Router ▸ Architect @ Radify ▸ [email protected] ▸ @nateabele
  2. 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
  3. FUNCTIONAL REACTIVE SYSTEMS TERMINOLOGY ▸ Functional: ¯\_(ϑ)_/¯ see Wikipedia ▸

    Reactive: Time ▸ Systems: This talk === front-end only
  4. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL var people = [ { name:

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

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

    i = 0; i < people.length; i++) { result.push(people[i].name); doSomethingElse(); <—— Badness }
  7. FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL import { prop, map } from

    'ramda'; const names = map(prop('name')); names(people);
  8. 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)
  9. FUNCTIONAL REACTIVE SYSTEMS REACTIVE ▸ The observer pattern ▸ aka

    publish/subscribe ▸ aka streams ▸ aka observables
  10. FUNCTIONAL REACTIVE SYSTEMS PROMISES ▸ Asynchronous ▸ A (possible) future

    value ▸ Exactly one value ▸ Immutable ▸ Automatic flattening
  11. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE USE CASE ▸ HTTP requests ▸

    DOM events ▸ Websockets ▸ Iterators ▸ Arrays ▸ etc.
  12. FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE EXAMPLES clickStream .map(e => ({ x:

    e.clientX, y: e.clientY })) .subscribe(console.log.bind(console, ‘Coords:’));
  13. 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 ▸…
  14. 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 */ })
  15. FIN