FRP with JavaScript (RxJS)

A presentation made on JusBrasil TED Talks that explains how Functional Reactive Programming (FRP) works in JavaScript using RxJS

Transcript

1. Functional Reactive Programming FRP with JavaScript
2. First of all.. What the "R" means?
3. The "R" • Iterators • Observers • Events
4. Reactive… to what? Everything :) • Events • Load • Failure • Users
5. WHAT THE HELL IS FUNCTIONAL PROGRAMMING? The "F" - Functional
6. The "F" - @shankarcabus
7. var waysToCode = [ {name: "imperative"}, {name: "crazyStuf"}, {name: "pog"}, {name: "functional"} ]; waysToCode. map(wtc => wtc.name). filter(wtc => wtc === "functional"). map(winner => winner.upperCase()) The "F" - It's life :)
8. Then… FRP ? It's a new pretty way to do event-driven programming ;]
9. FRP Events » Streams Handlers » Behaviours Streams = Observables Observables is a new type of Collections
10. FRP Now we can map, reduce, filter, merge… all cool functional methods (and more) in a Collection that receives data over time (in a non-fixed interval)! And keep, or not, receiving data from any source till the end of the days! HAHAHA
11. Meteor.js, Knockout, Bacon.js, RxJS, … In JavaScript?
12. RxJS • It's from Microsoft :/ • It's open-source :) • Great people work on this \o/ • Let's accept that everybody can do good sometimes :)
13. Why should we use? • Less code? • More reliable code? • Simpler tests? • Simplify life?
14. JusBrasil's auto-complete Simpler tests? function autocomplete(){ this.$inputElement = this.$('input', this.context); this.$('.results', this.context).on('click', '.auto-item', {AC:this}, function(e) { e.data.AC.onItemSelected( (e.data.AC.selectedItem = $(this)), e ); return; }).on('mouseenter','.auto-item',{AC:this},function(e){ e.stopPropagation(); var autoComplete = e.data.AC; autoComplete.selectedItem && autoComplete.selectedItem.removeClass('selected'); autoComplete.selectedItem = $(this).addClass('selected hover'); }).on('mouseleave', '.auto-item', {AC:this}, function(e){ var autoComplete = e.data.AC; autoComplete.selectedItem.removeClass('hover'); }); this.$inputElement.on('keydown', bind(this, function(event) { var code = event.keyCode; if ( code === this.KEYCODE.UP || code === this.KEYCODE.DOWN || code === this. KEYCODE.ESCAPE ){ if ( code === this.KEYCODE.ESCAPE ){ this.$inputElement.blur(); return; } this.selectedItem.removeClass('selected'); var resultList = this.$('.auto-item',this.context); var idx = resultList.index(this.selectedItem); var nextIdx = idx + (code === this.KEYCODE.DOWN ? 1 : -1); if ( nextIdx >= resultList.length ) nextIdx = 0; this.selectedItem = resultList.eq(nextIdx); this.selectedItem.addClass('selected'); return false; } else { if ( code === this.KEYCODE.ENTER ){ this.onItemSelected(this.selectedItem, event); } else if ( code === this.KEYCODE.BACKSPACE ){ this.onBackspace(); } } if ( this.keyAssist(code) ){ clearTimeout(this.serverCallTimeout); if (this.ajaxObject && typeof this.ajaxObject === 'object'){ this.ajaxObject.hasOwnProperty('abort') && this.ajaxObject.abort(); } var that = this; var executionTime = 50; this.serverCallTimeout = setTimeout(function(){ var trim = false; that.fieldAssist(that.$('input', that.context), 'query', trim); if ( !that.beforeSearch({ 'query' : that.query }) ) { return; } var executeJS = true; that.ajaxObject = that.serverCall('list') .kwargs(that.getKwArgs()) .success(bind(that, function(data){ that.afterSearch({ 'query' : that.query, 'result' : data }); }), executeJS) .noloading() .send(); }, executionTime); } })) };
15. Could be like this function autocomplete(){ var self = this, input = self.$('input', this.context), keypresses = Rx.Observables.fromEvent(input, 'keypress'), resultSet = keypresses. throttle(50). map(function(){ Rx.Observable.fromPromise( self.serverCall('list').kwargs(self.getKwArgs()).noloading().send() ).takeUntil(keypresses) }). mergeAll(); resultSet.forEach(function(data){ self.afterSearch({ 'result' : data }); resultSet.dispose(); }); };
16. http://youtu.be/XRYN2xt11Ek - Netflix http://youtu.be/GY43urynx2Q - Spotify http://youtu.be/ZOCCzDNsAtI - Basho (Riak) http://youtu.be/sTSQlYX5DU0 - Erik Meijer (MS) http://jhusain.github.io/learnrx/ - FRP Lessons http://www.reactivemanifesto.org/ Must see :)
17. Questions? Come on, shame isn't an option!
18. That's all.. Thanks! You're a nice audience o/ @rafaelverger