My Gentle Introduction to RxJS

My Gentle Introduction to RxJS

• 1.
  My gentle introduction toRxJS
• 2.
  About me Mattia Occhiuto   Front-endSoftware Engineer @ Tuotempo s.r.l. Twitter  @MattiaOch Github  mattiaocchiuto
• 3.
  Reactive Systems   “ Systemsbuilt as Reactive Systems are more flexible, loosely- coupled and scalable. This makes them easier to develop and amenable to change. They are significantly more tolerant of failure and when failure does occur they meet it with elegance rather than disaster. Reactive Systems are highly responsive, giving users effective interactive feedback.     from www.reactivemanifesto.org
• 4.
  So... Responsive - systemrespond in a timely manner where possible Resilient - system stays responsive in case of failure Elastic - scalable Message driven - based on async messages Reactive Systems are:
• 5.
  Reactive Programming “ reactiveprogramming is a programming paradigm  oriented around data flows  and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow.     from wikipedia
• 6.
  graphically ... using asynchronousdata streams more declarative more reusability more testability increase separation on concerns A B A B Proactive Passive Listenable Reactive From Cycle.js documentation
• 7.
  Why we needit ? Nowadays Modern Web Applications are complex systems composed of asynchronous data coming from many different sources:   user interaction (DOM-events) AJAX call device event (GPS) web socket web workers reactive user interface (Model/View sync) etc...
• 8.
  RxJS - The Observablesway Iterator                     +                   Observer var arr = ['a', 'b', 'c']; var iter = arr[Symbol.iterator](); iter.next() > { value: 'a', done: false } iter.next() > { value: 'b', done: false } iter.next() > { value: 'c', done: false } iter.next() > { value: undefined, done: true } var el = document.getElementById("button"); el.addEventListener("click", doSomething);
• 9.
  RxJS - The Observablesway In short, an  Observable is an event stream which can emit zero or more events, and may or may not finish. If it finishes, then it does so by either emitting an error or a special “complete” event
• 10.
  And What aboutoperators? Array [1, 2, 3, 4, 5]   .map   .filter   .reduce   .each   ... Stream {...1..2.....3...4......5..}   .map   .filter   .reduce   .each   ...(and > 120 other operators)   Both are collection and both of course has powerful operators!
• 11.
  And What aboutoperators?
• 12.
  How they lookslike var source = Rx.Observable.fromEvent($input, 'keyup') var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (e) { console.log('Error: ' + e); }, function () { console.log('Completed'); } ); subscription.dispose(); data pushed centralised error handling notification on complete disposable
• 13.
  Who is the rightsource? Easily: everything More precisely (?): every data structure or async data source
• 14.
  RxJS here weare! Reactive programming Events as collection of data Manipulation over Array-like "operators"
• 15.
  Let's code! https://github.com/mattiaocchiuto/talks/blob/master/RxJS/
• 16.
  Conslusion Cons: too many operatorsthat can lead to the same results and to remember! learning curve not enough examples and tutorial (at least for me)
• 17.
  Conslusion Pros: great abstraction forasync and events data/operations easy way to compose async data stream support for many languages: [Java, .Net, Scala, C#, Clojure, C++, Ruby, Python, Swift, etc..] performance => for big array processing, it remove intermediate array allocation super powerful operators
• 18.
  Questions?
• 19.
  Thanks!