Operating Heavily Dynamic UIs� ngVikings 28.05.2019

@Michael_Hladky

RxJS - Advanced Patterns:

Operating Heavily Dynamic UIs

@Michael_Hladky

ngVikings 2018�My first talk on a conference

@Michael_Hladky

Agenda

• The Problem
• Reactive Micro Architecture
• Event Sourcing, CQRS and their relation
• Orchestrate rendering and UI-interaction
• Where and when to optimize performance

@Michael_Hladky

The Problem

@Michael_Hladky

The Problem

• State

• Background processes

• User interactions

@Michael_Hladky

Showcase The Problem

{ }

@Michael_Hladky

I’m Michael Hladky, �contact me via mail

SELF EMPLOYED

Trainings

Workshops

Public / On-site

@Michael_Hladky

github.com/BioPhoton�michel@hladky.at�@Michael_Hladky

@Michael_Hladky

I’m Michael Hladky, �read me on twitter

CURRENT FOCUS

RxJS�Redux�Angular

@Michael_Hladky

github.com/BioPhoton�michel@hladky.at�@Michael_Hladky

@Michael_Hladky

Reactive Micro Architecture

@Michael_Hladky

Architecture Sections

C

O

S

H

E

Constants

Base Observables

Side Effects

Subscription

Helper

Custom Operators

P

@Michael_Hladky

Constants

{ }

C

O

S

H

E

P

@Michael_Hladky

Base Observables

C

O

S

H

E

P

Source Observables

State �Observables

Interaction �Observables

Intermediate Observables

@Michael_Hladky

Side Effects

C

O

S

H

E

UI Input

UI Output

Background Processes

P

@Michael_Hladky

Subscriptions

C

O

S

H

E

P

{{ value$ | async }}

merge( [

renderingSideEffect$,

updateState$

] )

.pipe(

takeUntil(onTrigger$)

)

.subscribe()

@Michael_Hladky

Helper

C

O

S

H

E

P

@Michael_Hladky

Custom Operators

C

O

S

H

E

Creation methods

Operators

P

@Michael_Hladky

Implement Reactive Micro Architecture

{ }

@Michael_Hladky

Event Sourcing

@Michael_Hladky

Event Sourcing:�Capture all changes to an application state as a sequence of events.

Martin Fowler

“

”

Event Sourcing

@Michael_Hladky

No mutation of state

@Michael_Hladky

100% reproducible state

@Michael_Hladky

Command Query Responsibility Segregation�(CQRS)

@Michael_Hladky

CQRS:�Every method should either be a command, or a query, �but not both.

Bertrand Meyer

“

”

CQRS

Command

Query

Responsibility Segregation

@Michael_Hladky

CQRS

[ ]

Command

Query

Responsibility Segregation

Rel. DB

Oo. DB

Responsibility Segregation

@Michael_Hladky

CQRS

Command

Query

Responsibility Segregation

Write

Read

@Michael_Hladky

Separate �State Management and Side Effects

{ }

@Michael_Hladky

Orchestrate UI �interaction and rendering

@Michael_Hladky

Orchestrate rendering and UI interaction

INPUT

OUTPUT

@Michael_Hladky

Performance Optimization

@Michael_Hladky

Do it LAST

Render less often

AnimationFrameScheduler

Sample frequent commands

Debounce user interaction

Array first class functions �over RxJS

@Michael_Hladky

Thanks for your time!�

My name is Michael, if you have any questions just ping me.

​

@Michael_Hladky

RxJS Advanced Patterns - Operating Heavily Dynamic UIs - ngVikings 2019

michael@hladky.at

@Michael_Hladky

bit.ly/rx-marble-design-system-repo

@Michael_Hladky