FUNCTIONAL REACTIVE SYSTEMS LIBERTYJS 2016 

FUNCTIONAL REACTIVE SYSTEMS YOUR HOST: NATE ABELE ▸ Some PHP frameworks (Li3, CakePHP) ▸ AngularUI Router ▸ Architect @ Radify ▸ [email protected] ▸ @nateabele 

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 

BUZZWORD BINGO 

FUNCTIONAL REACTIVE SYSTEMS TERMINOLOGY ▸ Functional: ¯\_(ϑ)_/¯ see Wikipedia ▸ Reactive: Time ▸ Systems: This talk === front-end only 

FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL ▸High-order function composition ▸Separate data from behavior ▸Purity 

FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL LIBRARIES ▸ Underscore ▸ LoDash 

FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL LIBRARIES ▸ Underscore ▸ LoDash LIES 

FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL LIBRARIES ▸ Ramda ▸ Underscore ▸ LoDash LIES 

FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL var people = [ { name: "Alice" }, { name: "Bob" }, { name: "Dave" }, { name: "Sally" } ]; // -> ["Alice", "Bob", "Dave", "Sally"] 

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

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

FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL people.map(person => person.name) 

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

FUNCTIONAL REACTIVE SYSTEMS FUNCTIONAL import { prop, map } from 'ramda'; const names = map(prop('name')); names(people); 

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) 

FUNCTIONAL REACTIVE SYSTEMS REACTIVE ▸ The observer pattern ▸ aka publish/subscribe ▸ aka streams ▸ aka observables 

OBSERVABLES PROMISES VS. FIGHT 

FUNCTIONAL REACTIVE SYSTEMS PROMISES ▸ Asynchronous ▸ A (possible) future value ▸ Exactly one value ▸ Immutable ▸ Automatic flattening 

FUNCTIONAL REACTIVE SYSTEMS OBSERVABLES ▸ Synchronous or asynchronous ▸ Zero to ∞ values ▸ No automatic flattening 

FUNCTIONAL REACTIVE SYSTEMS PROMISE USE CASES ▸ HTTP requests ▸ 

FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE USE CASE ▸ HTTP requests ▸ DOM events ▸ Websockets ▸ Iterators ▸ Arrays ▸ etc. 

FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE CAPABILITIES ▸ Cancel! ▸ Retry ▸ Replay 

FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE CAPABILITIES ▸ 

FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE LIBRARIES ▸ BaconJS ▸ HighlandJS ▸ CycleJS ▸ RxJS ▸ Angular 2 

FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE EXAMPLES var clickStream = Observable.fromEvent(element, ‘click’); clickStream.subscribe(console.log.bind(console, ‘Clicked!’)); 

FUNCTIONAL REACTIVE SYSTEMS OBSERVABLE EXAMPLES clickStream .map(e => ({ x: e.clientX, y: e.clientY })) .subscribe(console.log.bind(console, ‘Coords:’)); 

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 ▸… 

EXAMPLE: TYPEAHEAD 

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 */ }) 

TESTING & DEBUGGING 

No content

FIN