Thin client SPAs? Stream UI using web standards (CodeNight)

Thin client SPAs?
Stream UI using web standards
MARCIN WARPECHOWSKI, STARCOUNTER
CODENIGHT
STOCKHOLM, 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/puppetjs
codenight.mysampleapp.com

Fat client SPAs
STATELESS STATE #2STATE #1
SERVER APP CLIENT APP
REST
INTERFACE
JSON
REST
CLIENT

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
PuppetJs
Pattern for data synchronization.
Uses JSON and JSON-Patch over
HTTP and WebSocket.

S T A T E
SERVER APP
WITH VIEW-MODEL
JSON VIEW
PuppetJs binds server-side view-models to HTML

JSON is low-res
- JSON has just 6 types of value:
- string
- number
- boolean
- null
- object
- array
PRIMITIVE
COMPOSITE

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
STRING
NUMBER
BOOLEAN

What UI can you represent with JSON?
- nested views
- namespaces
- lists of values
- lists of views
OBJECT
ARRAY

Beneﬁts to productivity
- no client side app, no glue code between apps
- works great with JavaScript and Web Components
- composable nested views

Beneﬁts to performance and UX
- morphing views
- real-time view of the data
- client patches mitigate network latency

Beneﬁts 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 ms
Meaning: 23 roundtrips per second

In 200 ms to NY and back
Meaning: 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
CLIENT SERVER
“ABCDE” “ABCDE”
“ABCE” “ACDE”
“ACD”“ACE”
C = Del 4 S = Del 2
S = Del 2 C = Del 4
TIME

With Operational Transformation
CLIENT SERVER
TIME
“ABCDE” “ABCDE”
“ABCE” “ACDE”
“ACD”“ACE”
C = Del 4 S = Del 2
S’ = Del 2 C’ = Del 3

Puppet implementations
JavaScript: github.com/puppetjs/puppetjs
Web Components: github.com/PuppetJs/puppet-polymer-client
C#: github.com/starcounter/starcounter
Sample apps:
Hello World: github.com/warpech/HelloWorld
KitchenSink: github.com/StarcounterSamples/KitchenSink

Thanks! More info on
.io
Twitter: @starcounterdb, @warpech

Thin client SPAs? Stream UI using web standards (CodeNight)

More Related Content

What's hot

Viewers also liked

Similar to Thin client SPAs? Stream UI using web standards (CodeNight)

Recently uploaded

Thin client SPAs? Stream UI using web standards (CodeNight)