Reactive Functional Programming and RxJS

Presented by: @tomfriedhof

Code Examples: https://actvl.mp/38w5RVr

Tom Friedhof

What I'm going to cover:

  • What is functional programming?
  • Design patterns surrounding composability
  • Declarative vs Imperative
  • Reactive UI's using RxJS

What I'm not going to cover:

  • Flux Architecture
  • Redux / NGRX State Management
  • Front-end frameworks like React or Angular

Dipping our toe into Reactivity with Rx!

TypeScript / es6

Optional static type-checking along with the latest ECMAScript features.

  • Interfaces
  • Inheritance
  • Encapsulation
  • Strictly Typed

Functional Programming

is a paradigm of building software using composable functions

Composability

Ubiquitous Design Pattern

"Composition over inheritance"

This is an OOP principle

Examples of composition on OOP

  • Polymorphism
  • Dependency Injection
  • Liskov substitution principle

Unix Pipes


$ ps aux | grep www-data
						

Micro-services

docker-compose.yml

php:
    image: php:7.4.1

nginx:
    image: nginx:1.15.3-alpine

database:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: lamp
      MYSQL_PASSWORD: lamp
      MYSQL_DATABASE: lamp
						

Functional Programming

is a paradigm of building software using composable functions

Pure Functions

Pure Functions

  • Given the same input, always return the same output
  • No side-effects

Pure Function


function add(a, b) {
	return a + b;
}
						

Impure Function


const c = 3;
function impureAdd(a, b) {
	return a + b + c;
}
						

Impure Functions interact with the outside world, pure functions do not.

Demo 1 + 2

Bonus: Currying

Currying is when you break down a function that takes multiple arguments into a series of functions that each take only one argument.

Adding to the previous value


let val = calc.addPure(1, 1);
val = calc.addPure(5, val);
val = calc.addPure(7, val);
						

Pipe previous value to next operation (Composing)


1 | calc.addPure(1) | calc.addPure(5) | calc.addPure(7)
						

Demo 3 + 4 + 5

Function composition is the process of combining two or more functions in order to produce a new function or perform some computation.


const result = R.compose(R.divide(150), R.multiply(5), add(10));
let val = result(5);
						
Functional programming is declarative, not imperative

Declarative - Spreadsheet formulas

Imperative - jQuery

Functional Programming (Review)

  • Pure functions
  • No outside (shared) state
  • No side effects
  • Declarative, not imperative

Light Switch
+
Light Bulb

Imperative


// Psuedo jquery example
$('#switch').click(() => {
	$('#bulb').toggle();
});
						

Declarative


// @file light-switch.js
let switchPower = localStorage.getItem('switchPower') || false;
$('#switch').click(() => {
  localStorage.setItem('switchPower', !switchPower);
});
						

// @file bulb.js
let switchPower = localStorage.getItem('switchPower') || false;
$('#bulb').addClass(switchPower ? 'bulb-on' : 'bulb-off');
						

Pass the UI State into the UI

UI decides how to render based on parameter passed in (state).

How can one make the UI react to application state change?

Observables

Observables

In ReactiveX an observer subscribes to an Observable. Then that observer reacts to whatever item or sequence of items the Observable emits.

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

RxJS

Demo 6 + 7

RxJS is mainly about the operators!

Demo 8 + 9


const result$ = combineLatest(seconds$.pipe(
    map((x: number) => x * 5)
), clickEvents$);
						

Review

  • RxJS enables the ability to easily react to state change via subscriptions
  • UI Controller is in complete control of its own view… components are Declarative and react to something, not commanded to do something.
  • State is just a parameter to a view render
  • Decouple components on a page by using a state system and have all the components react to state change

Next Steps (Flux pattern)

Flux Pattern

  • Angular - NGRX Store
  • React - Redux

Questions?

Send me an email:

tom@activelamp.com

or Tweet @tomfriedhof