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!

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

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;
}
						

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);
						

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);
						

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');
						

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.

RxJS

Demo 6 + 7

RxJS is mainly about the operators!

Demo 8 + 9

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

Next Steps (Flux pattern)

Flux Pattern

• Angular - NGRX Store
• React - Redux