rx-presentation

View Github Repository Open presentation in a new window

m0ru

See all presentation from m0ru

rx-presentation

0 0

rx-presentation

HTML-presentation on ReactiveX (and the ModelViewIntent-architecture) made with RevealJS

On Github m0ru / rx-presentation

ReactiveX

Logo taken from http://reactivex.io.

key-arrows Space - next F - Enter/Leave Fullscreen o - Overview

Senator Ted Stevens (Alaska)

And again, the Internet is not something that you just dump something on. It's not a big truck. It's a series of tubes.

Image and quote taken from https://en.wikipedia.org/wiki/Series_of_tubes

"code as if you're a plumber" magical journey into pipe and stream land

Streams

of Events and Data

ongoing events ordered in time

Two Views

as variable data(t) that changes over time

vs

as stream data$ of events/data-packets

everything is stream (measurements, clicks, pull/push-notifications, updates,...) "...could go even as far as to say {click/slide-change}"

The Reactive Mantra

From: "The introduction to Reactive Programming you've been missing" by @andrestaltz

Marble Diagrams

From http://reactivex.io/documentation/observable.html

From "The introduction to Reactive Programming you've been missing" by @andrestaltz

Examples

Async

Iterable (Sync/"Pull"): 

getDataFromLocalMemory()
  .skip(10)
  .take(5)
  .map(s => s + ' transformed' )
  .forEach(it => console.log('next: ' + it ))

Observable (Async/"Push"): 

getDataFromNetwork()
  .skip(10)
  .take(5)
  .map(s => s + ' transformed' )
  .subsribe(it => console.log('next: ' + it ))

adapted from http://reactivex.io/intro.html

Demo

Multi-client TodoMVC

Architecture

needed, so demo is somewhat clear

Technologies

build with:

@ImmutableJS: rx operations expect you to return new instances

Pros & Cons

FRP

Functional Reactive Programming

  • predictable
    • side-effect free
    • clean code-structure
  • asynchrony and concurrency
  • abstraction → less code
  • caveat: learning curve

Notes @clean-code: pipelines from start to end @learning-curve: new paradigm of thinking (functional and reactive)

Cross-Plattform

RxJava, RxJS, RxAngular, RxAndroid, RxPY, Rx.rb, Rx.NET (C#), RxCocoa (iOS), UniRx (C#, Unity), RxScala, RxClojure, RxCpp, RxGroovy, RxJRuby, RxKotlin, RxSwift, RxNetty (Client-server framework)

from http://reactivex.io/languages.html

Rx-Angular: wrapper for $observe and creating callbacks

Social Proof / Bandwagon

  • Microsoft
  • Netflix
  • Github
  • Trello
  • SoundCloud
  • Couchbase
  • ...

From http://reactivex.io/

Start Reading

  • Reactivex.io: great marble diagrams, documents the Rx-standard shared across all implementations
  • xgrommx: live code-samples, documents all of RxJS = std + some convenience methods
p. 1
ReactiveX Logo taken from http://reactivex.io. key-arrows Space - next F - Enter/Leave Fullscreen o - Overview