Tweet
Tweet

Slide 1

Slide 1 text

Dynamics of Change Why Reactivity matters @andrestaltz

Slide 2

Slide 2 text

Reactive?


Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Product Cart Invoice Coupon Payment User profile Sale Vendor

Slide 5

Slide 5 text

Cart Invoice

Slide 6

Slide 6 text

Cart Invoice When a new 
 product is added... ...update the total
 amount charged.

Slide 7

Slide 7 text

Cart Invoice

Slide 8

Slide 8 text

Cart Invoice

Slide 9

Slide 9 text

fun addProduct(product: Product) {
 // ...
 Invoice.updateInvoicing(product)
 } Cart Invoice

Slide 10

Slide 10 text

package my.project import my.project.Invoice public object Cart { fun addProduct(product: Product) { // ... Invoice.updateInvoicing(product) } }

Slide 11

Slide 11 text

fun addProduct(product: Product) {
 // ...
 Invoice.updateInvoicing(product)
 } Cart Invoice Proactive
 Responsible for the change Passive
 Unaware of the dependency

Slide 12

Slide 12 text

fun addProduct(product: Product) {
 // ...
 Invoice.updateInvoicing(product)
 } Cart Invoice incrementCounter must be public

Slide 13

Slide 13 text

Cart Invoice Passive Programming

Slide 14

Slide 14 text

Cart Invoice Cart.onProductAdded { product -> this.updateInvoicing(product) }

Slide 15

Slide 15 text

package my.project import my.project.Cart public object Invoice { fun updateInvoicing(product: Product) { // ... } fun setup() { Cart.onProductAdded { product -> this.updateInvoicing(product) } } }

Slide 16

Slide 16 text

Cart.onProductAdded { product -> this.updateInvoicing(product) } Listenable
 Unaware of the dependency Reactive
 Responsible 
 for the change Cart Invoice

Slide 17

Slide 17 text

add Product event must be public Cart Invoice Cart.onProductAdded { product -> this.updateInvoicing(product) }

Slide 18

Slide 18 text

Cart Invoice Reactive Programming

Slide 19

Slide 19 text

Cart Invoice Passive Programming Cart Invoice Reactive Programming Remote setters and updates Events, observation, and self-updates

Slide 20

Slide 20 text

"Product added" event 
 in the Cart Update invoice method 
 in the Invoice Passive public Reactive public

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Product Cart Invoice Coupon Payment User profile Sale Vendor

Slide 23

Slide 23 text

How does it work? What does it affect?

Slide 24

Slide 24 text

Cart Invoice Coupon Payment Sale

Slide 25

Slide 25 text

Cart Invoice Coupon Payment Sale What does it affect?

Slide 26

Slide 26 text

Cart Invoice Coupon Payment Sale What does it affect? Look inside

Slide 27

Slide 27 text

Cart Invoice Coupon Payment Sale How does it work?

Slide 28

Slide 28 text

Cart Invoice Coupon Payment Sale How does it work? Find usages of its methods

Slide 29

Slide 29 text

Cart Invoice Coupon Payment Sale

Slide 30

Slide 30 text

Cart Invoice Coupon Payment Sale What does it affect?

Slide 31

Slide 31 text

Cart Invoice Coupon Payment Sale What does it affect? Find usages of its events

Slide 32

Slide 32 text

Cart Invoice Coupon Payment Sale How does it work?

Slide 33

Slide 33 text

Cart Invoice Coupon Payment Sale How does it work? Look inside

Slide 34

Slide 34 text

Passive Reactive How does it work? Find usages Look inside What does it affect? Look inside Find usages

Slide 35

Slide 35 text

Passive Reactive How does it work? Find usages Look inside What does it affect? Look inside Find usages

Slide 36

Slide 36 text

Cart Invoice Irresponsible
 modules
 Passive everywhere

Slide 37

Slide 37 text

Example How do you set up analytics events?

Slide 38

Slide 38 text

Analytics LoginPage ProfilePage FrontPage Analytics.sendEvent()

Slide 39

Slide 39 text

Analytics LoginPage ProfilePage FrontPage

Slide 40

Slide 40 text

Analytics LoginPage ProfilePage FrontPage Cross-cutting concern? Aspect-oriented programming!

Slide 41

Slide 41 text

package my.project public object LoginPage { fun init() { // ... } }

Slide 42

Slide 42 text

pointcut opened(): call(void LoginPage.init()) after(): opened() { Analytics.sendEvent("Just opened LoginPage"); } "Pointcut" "Advice" package my.project public object LoginPage { fun init() { // ... } }

Slide 43

Slide 43 text

pointcut opened(): call(void LoginPage.init()) after(): opened() { Analytics.sendEvent("Just opened LoginPage"); } "Pointcut" "Advice" package my.project public object LoginPage { fun init() { // ... } } After the execution of the program hits "opened", run that "advice" snippet

Slide 44

Slide 44 text

package my.project public object LoginPage { fun init() { // ... this.broadcastEvent("opened") } fun addListener(event: String, listener: () -> Unit) { // ... } } Reactive, with events

Slide 45

Slide 45 text

package my.project.utils import my.project.LoginPage public object Analytics { fun sendEvent(msg: String) { // ... } fun setup() { LoginPage.addListener("opened", { () -> this.sendEvent("Just opened LoginPage") }) } } Reactive, with events

Slide 46

Slide 46 text

Problem Still using passive programming

Slide 47

Slide 47 text

package my.project import my.project.Cart public object Invoice { fun updateInvoicing(product: Product) { // ... } fun setup() { Cart.onProductAdded { product -> this.updateInvoicing(product) } } }

Slide 48

Slide 48 text

package my.project import my.project.Cart public object Invoice { fun updateInvoicing(product: Product) { // ... } fun setup() { Cart.onProductAdded { product -> this.updateInvoicing(product) } } }

Slide 49

Slide 49 text

Cart Invoice

Slide 50

Slide 50 text

Cart Invoice Setup Update

Slide 51

Slide 51 text

No setter or update methods?

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Cart Book Book Shoes

Slide 55

Slide 55 text

Cart Book Book Shoes Invoice €23,50 €72,40 =SUM(Cart.Products)

Slide 56

Slide 56 text

Cart Book Book Shoes Book Shoes Watch Invoice €23,50 €72,40 €346,90 =SUM(Cart.Products)

Slide 57

Slide 57 text

Cart Book Shoes Watch Invoice €23,50 €72,40 €346,90 =SUM(Cart.Products)

Slide 58

Slide 58 text

Cart Book Shoes Watch Invoice €23,50 €72,40 €346,90 =SUM(Cart.Products) Delayed =DELAY(Invoice, 1000ms) €23,50 €72,40 €346,90

Slide 59

Slide 59 text

Cart Book Shoes Watch Invoice €23,50 €72,40 €346,90 =SUM(Cart.Products) Delayed =DELAY(Invoice, 1000ms) €23,50 €72,40 €346,90 Functional and Reactive Programming RxJava RxJS ReactiveCocoa

Slide 60

Slide 60 text

€23,50 €72,40 €346,90 A stream of values over time

Slide 61

Slide 61 text

€23,50 €72,40 €346,90 A stream of values over time "A magical spreadsheet cell"

Slide 62

Slide 62 text

package my.project import my.project.Cart public object Invoice { fun updateInvoicing(product: Product) { // ... } fun setup() { Cart.onProductAdded { product -> this.updateInvoicing(product) } } }

Slide 63

Slide 63 text

package my.project import my.project.Cart public object Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 64

Slide 64 text

Problem Singletons everywhere


Slide 65

Slide 65 text

package my.project import my.project.Cart public object Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } } Singleton Singleton

Slide 66

Slide 66 text

Passive everywhere => irresponsible modules Reactive everywhere => Singletons everywhere

Slide 67

Slide 67 text

Passive is good for: Data structures Dependency injection

Slide 68

Slide 68 text

Dependencies What? versus How?

Slide 69

Slide 69 text

package my.project import my.project.Cart public object Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } } "What"

Slide 70

Slide 70 text

package my.project import my.project.Cart public object Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } } "How"

Slide 71

Slide 71 text

package my.project import my.project.Cart public object Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } } Bad

Slide 72

Slide 72 text

Cart Invoice Passive
 Unaware of the dependency

Slide 73

Slide 73 text

Reactive
 Responsible 
 for the change Cart Invoice

Slide 74

Slide 74 text

How does it work? Reactive: look inside What does it depend on? Passive: unaware of the
 dependency Passively Reactive: 
 the best of two worlds

Slide 75

Slide 75 text

package my.project import my.project.Cart public object Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 76

Slide 76 text

package my.project public object Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 77

Slide 77 text

package my.project public Invoice { fun getInvoice(): Observable { val invoice = Cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 78

Slide 78 text

package my.project public Invoice { public var cart: Cart? = null fun getInvoice(): Observable? { val invoice = this.cart?.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 79

Slide 79 text

package my.project public Invoice { public var cart: Cart? = null fun getInvoice(): Observable? { val invoice = this.cart?.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 80

Slide 80 text

package my.project public Invoice { public var cart: Cart? = null fun getInvoice(): Observable? { val invoice = this.cart?.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 81

Slide 81 text

package my.project public Invoice { fun getInvoice(cart: Cart): Observable { val invoice = cart.productAddedObservable .fold(0) { total, product -> total + product.price } return invoice } }

Slide 82

Slide 82 text

package my.project fun invoice(cart: Cart): Observable { return cart.productAddedObservable .fold(0) { total, product -> total + product.price } }

Slide 83

Slide 83 text

package my.project fun invoice(p: Observable): Observable { return p .fold(0) { total, product -> total + product.price } }

Slide 84

Slide 84 text

package my.project fun invoice(p: Observable): Observable { return p .fold(0) { total, product -> total + product.price } }

Slide 85

Slide 85 text

Input is a stream Function Output is a stream

Slide 86

Slide 86 text

Input is a stream Function Output is a stream The dependency of the output 
 is the input

Slide 87

Slide 87 text

Input is a stream Function Output is a stream We can make this a pure function

Slide 88

Slide 88 text


 stream Function stream
 Observer Side effect
 (e.g. Analytics.sendEvent)

Slide 89

Slide 89 text

stream Function stream
 Observer Write 
 Click stream Read

Slide 90

Slide 90 text

stream Function Write Read stream Function stream stream Function stream

Slide 91

Slide 91 text

stream Function Write Read stream Function stream stream Function stream Pure logic Effects

Slide 92

Slide 92 text

Cycle.js.org A functional and reactive JavaScript framework 
 for cleaner code

Slide 93

Slide 93 text

import xs from 'xstream' import Cycle from '@cycle/xstream-run' import {div, button, p, makeDOMDriver} from '@cycle/dom' function main(sources) { let dec$ = sources.DOM.select('.dec').events('click').mapTo(-1); let inc$ = sources.DOM.select('.inc').events('click').mapTo(+1); let action$ = xs.merge(inc$, dec$); let count$ = action$.fold((x,y) => x + y, 0); let vdom$ = count$.map(count => div([ button('.dec', 'Decrement'), button('.inc', 'Increment'), p(`Counter: ${count}`) ]) ); let sinks = { DOM: vdom$ }; return sinks; } Cycle.run(main, { DOM: makeDOMDriver('#main-container') });

Slide 94

Slide 94 text

import xs from 'xstream' import Cycle from '@cycle/xstream-run' import {div, button, p, makeDOMDriver} from '@cycle/dom' function main(sources) { let dec$ = sources.DOM.select('.dec').events('click').mapTo(-1); let inc$ = sources.DOM.select('.inc').events('click').mapTo(+1); let action$ = xs.merge(inc$, dec$); let count$ = action$.fold((x,y) => x + y, 0); let vdom$ = count$.map(count => div([ button('.dec', 'Decrement'), button('.inc', 'Increment'), p(`Counter: ${count}`) ]) ); let sinks = { DOM: vdom$ }; return sinks } Cycle.run(main, { DOM: makeDOMDriver('#main-container') })

Slide 95

Slide 95 text

import xs from 'xstream' import Cycle from '@cycle/xstream-run' import {div, button, p, makeDOMDriver} from '@cycle/dom' function main(sources) { let dec$ = sources.DOM.select('.dec').events('click').mapTo(-1) let inc$ = sources.DOM.select('.inc').events('click').mapTo(+1) let action$ = xs.merge(inc$, dec$); let count$ = action$.fold((x,y) => x + y, 0); let vdom$ = count$.map(count => div([ button('.dec', 'Decrement'), button('.inc', 'Increment'), p(`Counter: ${count}`) ]) ); let sinks = { DOM: vdom$ }; return sinks } Cycle.run(main, { DOM: makeDOMDriver('#main-container') })

Slide 96

Slide 96 text

import xs from 'xstream' import Cycle from '@cycle/xstream-run' import {div, button, p, makeDOMDriver} from '@cycle/dom' function main(sources) { let dec$ = sources.DOM.select('.dec').events('click').mapTo(-1) let inc$ = sources.DOM.select('.inc').events('click').mapTo(+1) let action$ = xs.merge(inc$, dec$) let count$ = action$.fold((x,y) => x + y, 0) let vdom$ = count$.map(count => div([ button('.dec', 'Decrement'), button('.inc', 'Increment'), p(`Counter: ${count}`) ]) ); let sinks = { DOM: vdom$ }; return sinks } Cycle.run(main, { DOM: makeDOMDriver('#main-container') })

Slide 97

Slide 97 text

import xs from 'xstream' import Cycle from '@cycle/xstream-run' import {div, button, p, makeDOMDriver} from '@cycle/dom' function main(sources) { let dec$ = sources.DOM.select('.dec').events('click').mapTo(-1) let inc$ = sources.DOM.select('.inc').events('click').mapTo(+1) let action$ = xs.merge(inc$, dec$) let count$ = action$.fold((x,y) => x + y, 0) let vdom$ = count$.map(count => div([ button('.dec', 'Decrement'), button('.inc', 'Increment'), p(`Counter: ${count}`) ]) ); let sinks = { DOM: vdom$ } return sinks } Cycle.run(main, { DOM: makeDOMDriver('#main-container') })

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

stream Function Write Read stream Function stream stream Function stream Stream I/O in Haskell 1.0 Dataflow languages Visual programming

Slide 100

Slide 100 text

Cart Invoice Passive Programming Cart Invoice Reactive Programming Remote setters and updates Events, observation, and self-updates

Slide 101

Slide 101 text

Passive Reactive How does it work? Find usages Look inside What does it affect? Look inside Find usages

Slide 102

Slide 102 text

stream Function Write Read stream Function stream stream Function stream Functional programming Moving effects to the edges of the system

Slide 103

Slide 103 text

Thank you 
 & Questions?