Fault Tolerant UX

FA U LT T O L E R A N
T U X D A N G E B H A R D T @ d g e b

& > < > a > z in r O
m D > 30 3

<html /> J AVA S C R I P T

< M A R K U P / >

C E U X F I R S T

T U X = = T R A N S A C T I O N A L U X

T R A N S A C T I O
N A L U X • Atomic • Consistent • Isolated • Durable

AT O M I C “ A L L O
R N O T H I N G ”

C O N S I S T E N T
M O V E S B E T W E E N VA L I D S TAT E S

I S O L AT E D A L L
O W S C O N C U R R E N T C H A N G E S

D U R A B L E C H A
N G E S P E R S I S T

A p p l i c a t i o
n s M U S T N O T V i o l a t e t h e R u l e s o f Tr a n s a c t i o n a l U X O R E L S E

T U X = = F O R G I V I N G U X

A p p l i c a t i o
n s S H O U L D Tr y t o P ro v i d e a F o rg i v i n g U X ~ p l e a s e ~

T R A N S I T I O N
A L P E R S I S T E N C E

U N D O / R E D O

O F F L I N E S U P
P O RT

[ Offline ] Ember ToDos

A S Y N C H R O N O
U S ( N O N - B L O C K I N G ) I N T E R FA C E

Syncing… Ember ToDos

E N G I N E E R I N
G FA U LT T O L E R A N C E

E M B E R P R O V I
D E S S I M P L E , E L E G A N T PAT T E R N S F O R B U I L D I N G A C O N S I S T E N T U X

E M B E R D ATA P R O
V I D E S S I M P L E , E L E G A N T PAT T E R N S F O R B U I L D I N G A C O N S I S T E N T + D U R A B L E U X

E M B E R D ATA Atomic Consistent Isolated
Durable = R E Q U I R E S C U S T O M I Z AT I O N Transitional Persistence Undo / Redo Offline Support Asynchronous Interfaces

R E T H I N K A S S
U M P T I O N S A N D P R I M I T I V E S

DISPARATE SOURCES

DISPARATE DATA

COMMON INTERFACES

NORMALIZED DATA

EVENTED CONNECTIONS

PROMISIFIED METHODS doThing

A S TA N D A L O N E
L I B R A RY F O R C O O R D I N AT I N G A C C E S S T O D ATA S O U R C E S A N D K E E P I N G T H E I R C O N T E N T S S Y N C H R O N I Z E D .

PRIMARY INTERFACES { } REQUESTABLE TRANSFORMABLE

REQUESTABLE find add remove update patch findLink addLink removeLink findLinked

TRANSFORMABLE transform(operation)

NORMALIZED DATA JSON Patch transformations: [{"op":"remove",! "path":["planet","f82eed41-3e63-4061-953f-23f74192dcdd"]}! {"op":"add",! "path":["planet","107dc357-7df5-422f-b9d7-817244716e86"],! “value”:{“name”:”Mercury",!
"id":"107dc357-7df5-422f-b9d7-817244716e86"}}]!

CONNECTORS { } REQUEST TRANSFORM

SYNCHRONOUS EVENT HANDLING 1 2 3 4 5 6

1 2 3 4 5 6 7 ??? P P
= Promise SYNCHRONOUS EVENT HANDLING

PROMISE-AWARE EVENTS 1 2 3 4 5 6 7 8
P P P P P = Promise Async Blocking

PROMISE-AWARE EVENTS 1 2 3 ??? 4 5 6 7
P = Promise P P Async Non-Blocking

COMMON LIBRARY

{ } MEMORY JSON API LOCAL STORAGE + MORE +
ORBIT COMMON LIB   SOURCES

{ } MODELS KEYS RELATIONSHIPS + MORE + ORBIT COMMON
LIB   SCHEMA

+ = ember-orbit

EO.Store all filter retrieve ! find add remove patch findLink
addLink removeLink { } { } Synchronous Asynchronous ember-orbit

Star = EO.Model.extend({! name: attr('string'),! planets: hasMany('planet', {inverse: 'sun'})! });!
! Planet = EO.Model.extend({! name: attr('string'),! classification: attr('string'),! sun: hasOne('star', {inverse: 'planets'})! }); EO.Model ember-orbit

URLS DRIVE APPLICATION STATE

SOURCES DRIVE MODEL STATE ember-orbit

A P P L I C AT I O N
PAT T E R N S

CLIENT-FIRST DEVELOPMENT

PLUGGABLE SOURCES

DATA SYNCHRONIZATION

EDITING CONTEXTS

UNDO / REDO

Twitter: @orbitjs  IRC: #orbitjs  Github: https://github.com/orbitjs Soon: orbitjs.com

T H A N K S ! @ d g
e b

Fault Tolerant UX

Fault Tolerant UX

More Decks by Dan Gebhardt

Other Decks in Programming

Featured

Transcript