Adventures in Reactive Programming with Angular and Rx.js

Joris Kraak

joriskraak bauglir

Research Department of GN Store Nord A/S

Manufacturer of Hearing Aids, Headsets, etc…

Offices in Copenhagen, Chicago, Eindhoven

ReSound LiNX 3D

LiNX 3D Line-Up

Bluetooth Connected & Remotely Adjustable

Team of Ph.D. Students at Eindhoven University of Technology

Probabilistic Modelling & Machine Learning for Personalized Signal Processing

Scientific Computing

MATLAB Logo Python Logo

The Situation

Mike Sorrentino a.k.a The Situation

The Situation

RESTful HTTP/WebSocket API in Julia

wss://localhost:8000/group_of_variables/variable_name

GET

{
  "name": "Variable Name",
  "slug": "variable_name",
  "configuration": {
    "type": "number",
    "library": [0, 5],
    "value": 2.5
  }
}
                
PATCH
{ "value": 5 }

Same format for WebSockets

The Situation

Dynamic UIs dependent on available back-end

The solution should

be reactive,

handle multiple (late) ‘Subscribers’,

recover from errors,

prevent duplicate connections,

be ‘component’ based.

Reactive?

ReactiveX Logo RxJS

Multiple (Late) ‘Subscribers’?

WebSocketSubject

ReplaySubject(1)

Recover from Errors?

Observables stop emitting after errors

Reconnectable

Create custom Subject?

Prevent Duplicate Connections?

Connection Manager

Tried to implement as an @ngrx/store

Use a Map wrapped in an Angular service

Component Based?

Wrap an ExposedVariableConnection




            

type-based components

  • Free range strings
  • Sets of strings
  • Numbers in a range
  • ‘Routers’
  • Unknown variable types

Building the UI

exposed-variable-control

exposed-variable-connector combined with a `type`-based component

Demo

Focusing on ‘data’ makes decoupling a lot easier

Sometimes you have to build your own Observable or Subject

A library of reusable components is a blessing

Route communication between sibling components through parent or service

Credits

Social Media Icons
Dan Leech - https://simpleicons.org
LiNX 3D Line-Up
GN Hearing A/S
Julia Logo
Stefan Karpinski
‘MATLAB Logo’
Jarekt - Wikimedia Commons
Python Logo
Python Software Foundation
I Love the Web ( CC BY )
Mozilla
Angular Logo ( CC BY )
Google
React Logo ( CC BY )
Facebook
Redux Logo ( CC0 )
Matthew Johnston
London Underground Map from 1908
WikiMedia Commons
ReactiveX Logo
Microsoft ( CC BY 3.0 )
Auto WebSocket reconnection with RxJS
Igor Tokarev
Dragon's Blood Tree
Reddit
Kyle Broflovski
South Park Archives