rxserver by Dr. Jan-Jan

# my (software) story

* 1st: naughts-and-crosses "AI" in QBasic
						* Hacking MS-DOS and games 
						* Solving and plotting algebra in Pascal 
						* PID controllers in assembler on EPROM 
						* Neural Network training parallisation in C (PVM) 
						* Neuronal dynamics modelling in NEURON 
						* Dynamic circuit modelling Matlab 
						* Industrial Information Technology mega-project lead 
						* Founded SaaS Startup (RoR) 
						* CEO/CTO for hire 
						* Fullstack Javascript 
						* One morning I felt like learning reactive programming (rxjs) [[1]](http://thecodebarbarian.com/rest-apis-with-observables.html)[[2]](https://glebbahmutov.com/blog/node-server-with-rx-and-cycle/)

Note:

* my career seems an ADD case study

* javascript on the server
						* developer productivity: writing webservers
						* asynchronous

<hr />

<h2>ReactiveX <img src="lib/Rx_Logo_S.png" style="height: 1.2em;" /></h2>

* "<span style="color: lightgrey">An API for</span> asynchronous programming with observable streams"
						* "<span style="color: lightgrey">ReactiveX is a</span> combination <span style="color: lightgrey">of the best ideas from the</span> Observer <span style="color: lightgrey">pattern, the</span> Iterator <span style="color: lightgrey">pattern, and</span> functional <span style="color: lightgrey">programming</span>"

* *available in your favourite language* = transferable skillset

Note:

* show of hands: how many you
							1. have heard of?
							2. have you tried?
							3. have you used in anger?

* node productivity:
							* package ecosystem
							* testing
							* can write simple, easy to read & reason about code
						* node: event-driven, non-blocking I/O model that makes it lightweight and efficient

* rxjs: lodash for async

<h2><img src="lib/Rx_Logo_S.png" style="height: 1.2em;" /> easy to reason about transformations in time</h2>

<div style="display: flex">
							<div style="flex: 1">
								<img src="lib/multiple-clickstreams.png" style="height: 60%; margin: 0" />
								<p style="font-size: 0.5rem; margin-top: 0px;">
								<a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754"><img src="lib/cc.png" style="height: 1em;" /> taken from a great tutorial by Andre Staltz</a>
								</p>
							</div>
							<div style="flex: 1">
								<ul>
								 	<li>functions over observable streams</li>
									<li>abstract away low-level threading, synchronization, and concurrency issues</li>
									<li>great for multiple sources of events, e.g., frontend
										<img src="lib/angular.png" style="height: 1em"/>
										<img src="lib/redux-observable.png" style="height: 1em"/>
										<g-emoji class="g-emoji" alias="eye" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f441.png" ios-version="9.1" style="height: 1em">👁️</g-emoji>
									</li>
								</ul>

<p style="margin-top: 2em; color: lightgrey">disclaimer: easy to test pure functions, but less so the interactions</p>
							</div>
						</div>

## proof of concept: turn event into stream (using Subject)

```
						const Rx = require('rx')
						const http$ = new Rx.Subject()
						```

```
						const sendHello = ({ res }) => {
							res.writeHead(200, { 'Content-Type': 'text/plain' });
							res.end('Hello World\n');
						}
						```

```
						http$
							.do(({ req }) => console.log(`req.url = ${req.url}`))
							.subscribe(sendHello) // required to be able to see items being emitted by Observable
						```

```
						const serverCallback = (req, res) => {
						  http$.onNext({ req, res }) // insert event into stream as item
						}
						```

```
						const http = require("http")
						http.createServer(serverCallback)
							.listen(3000);
						```

## turn PoC into a library (inspired by Cycle.js)

* split responsibility:

```
						const middle = http$ => http$.do(e => console.log('request to', e.req.url))

const write = http$ => http$.subscribe(sendHello)

// const subscription = write(middle(http$))
						```

* neaten it all up

```
						function makeEffect() { // wrapper of read and write effects
							const http$ = new Rx.Subject()

return {
								write,
								serverCallback: (req, res) => http$.onNext({ req, res }),
								read: http$
							}
						}

const rxServerCallback = (middle) => {
							const effect = makeEffect()
							const subscription = effect.write(middle(effect.read))
							return effect.serverCallback
						}
						```

```
						const http = require("http")
						http.createServer(rxServerCallback(middle))
							.listen(3000);
						```

## real-life expectations: rxserver

```
						const routes = [
						  {
								url: '/name/:name',
								handler: ({ params, query }) => ({
									body: Promise.resolve(`Hello ${params.name} with ${JSON.stringify(query)}`),
								}),
						  },
						  {
								url: 'stream',
								method: 'PUT',
								handler: async () => await fs.createReadStream(__dirname + '/index.js'),
						  }
						]
						```

```
						const http = require("http")
						const rxserver = require("rxserver")
						const { logger, parseUrl } = rxserver

const middleware = ({ http$ }) => ({ // cater for multiple kinds of streams
						  http$: http$
						    .do(logger)
						    .catchMap(parseUrl) // "map" operator with error catching
						    .route(routes), // psuedo route operator
						})

const { httpServerCallback } = rxserver.createServerCallbacks(middle)
						http.createServer(httpServerCallback)
							.listen(3000);
						```

## sendHello → sendResponse 4 static || stream

```
						const contentType = op => {

if (typeof op === 'string' || typeof op.body === 'string') return 'text/plain'
						  if (op.hasOwnProperty('_readableState')) return 'application/octet-stream'
						  return 'application/json'
						}

const writeRes = (res, statusCode, body, cntntTp) => {

const contentType = cntntTp || _contentType(body)
							res.writeHead(statusCode, { 'Content-Type': contentType })
							if (contentType === 'application/octet-stream') {
								body.pipe(res)
							} else {
								res.end(typeof body === 'string' ? body : JSON.stringify(body))
							}
						}
						```

```
						const next = async ({ res, op }) => {

const statusCode = op ? op.statusCode || (op.body && op.body.error ? 500 : 200) : 404
						  try {
						    const body = op ? await (op.body || op) : { error: 'url not found' }
						    writeRes(res, statusCode, body, op.contentType)
						  }
						  catch (err) {
						    writeRes(res, err.statusCode || 500, err.message)
						  }
						}
						```