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.

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
33. FIN