Thin client SPAs? Stream UI using web standards

MARC IN WARPECHOW SK I , S TARCOUNTER

CODEN IGHT S T OCKHOLM, 2016 -06 -09

Agenda- discuss fat vs thin client architectural styles of web apps

- present a thin client pattern and library called “PuppetJs”

- show some code

- questions all the time

github.com/puppetjs/puppetjscodenight.mysampleapp.com

Fat client SPAs

S TATELESS S TATE #2S TATE #1

SERVER APP CL I ENT APPRES T INTERFACE JSON RES T

C L I ENT

Typical problems in REST and ROA

- Long-running transactions. I want to work in isolation until I am ready to commit or roll back my changes.

- Data redundancy. I don’t want to send or get more information than needed.

- Cache invalidation. I want to work on current state.

Problems of fat client- heavy code

- duplicate logic

- increased complexity

- validation on both ends

- glue code

Thin client should be among the considered solutions

nyctaxi.herokuapp.com

Pattern for data synchronization.

Uses JSON and JSON-Patch over HTTP and WebSocket.

PuppetJs

Standards

PuppetJsPattern for data synchronization.

Uses JSON and JSON-Patch over HTTP and WebSocket.

S T A T E

SERVER APP W I TH V I EW -MODEL JSON V IEW

PuppetJs binds server-side view-models to HTML

Puppet flow

Demo time

JSON is low-res- JSON has just 6 types of value:

- string

- number

- boolean

- null

- object

- array

PR IM I T I VE

COMPOS I TE

What UI can you represent with JSON?

- text labels and inputs - URLs - Markdown - HTML

- amounts - buttons - geographic coordinates

- checkboxes - toggle buttons - disabled inputs - conditional displaying of things

S TR ING

NUMBER

BOOLEAN

What UI can you represent with JSON?

- nested views - namespaces

- lists of values - lists of views

OBJECT

ARRAY

Benefits to productivity- no client side app, no glue code between apps

- works great with JavaScript and Web Components

- composable nested views

Benefits to performance and UX

- morphing views

- real-time view of the data

- client patches mitigate network latency

Benefits to integrity- security

- server is the single source of truth

Challenges for thin client- connection

- latency

- going out of sync

Connection: always ON- already true for POS, e-commerce, social media, etc

- already true for remote desktop

- solution: have a server on premise, replicate the DB to a master server

Sthlm-Frankfurt-Sthlm in 42 msMeaning: 23 roundtrips per second

In 200 ms to NY and backMeaning: 5 roundtrips per second

Latency mitigation- horizontal partitioning “sharding” - (moving ownership of the

rows)

- replication

Going out of sync?• web reality: the client and the server are doing concurrent

changes asynchronously (most of the time out-of-sync)

• goal: apply patches correctly without freezing UI or disallowing server push

• solution: Operational Transformation - algorithm that transforms any remote operation over operations that were generated locally

Without Operational Transformation

CL I ENT SERVER

“ABCDE” “ABCDE”

“ABCE” “ACDE”

“ACD”“ACE”

C = Del 4 S = Del 2

S = Del 2 C = Del 4

T IME

With Operational Transformation

CL I ENT SERVER

T IME

“ABCDE” “ABCDE”

“ABCE” “ACDE”

“ACD”“ACE”

C = Del 4 S = Del 2

S’ = Del 2 C’ = Del 3

Puppet implementationsJavaScript: github.com/puppetjs/puppetjs

Web Components: github.com/PuppetJs/puppet-polymer-client

C#: github.com/starcounter/starcounter

Sample apps:Hello World: github.com/warpech/HelloWorldKitchenSink: github.com/StarcounterSamples/KitchenSink

Thanks! More info on

.io

Twitter: @starcounterdb, @warpech