FRP with JavaScript (RxJS)

FRP with JavaScript (RxJS)

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

97381109baea93594baa2785dc0c99af?s=128

Rafael Verger

July 18, 2014
Tweet

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