Thin client SPAs Stream UI using web standards

MARC IN WARPECHOW SK I , S TARCOUNTER

INFOSHARE GDAŃSK , 18 .05 .2016

Thin client SPAs Stream UI using web standards

MARC IN WARPECHOW SK I , S TARCOUNTER

INFOSHARE GDAŃSK , 18 .05 .2016

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

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

- show some code

- questions

github.com/puppetjs/puppetjsinfoshare.mysampleapp.com

Topics today- application protocols

- user interface

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

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

- operational transformation

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

Appendix

No standards were harmed during the making of this presentation

• JSON (ECMA-404, RFC 7159)

• JSON-Patch (RFC 6902)

• HTTP (W3C and IETF, multiple RFC)

• WebSocket (RFC 6455)

Why JSON• ubiquitous (every platform supported)

Why JSON-Patch• 3 major operations: add, replace, remove

• 3 helper operations: copy, move, test

• a JSON-Patch is a JSON document itself

• reduces traffic

Why HTTP• Content negotiation: text/html, application/json, application/json-

patch+json

Why WebSocket• in contrast to HTTP, there are no message headers

• important when message is smaller than the header

• messages are delivered in the same order as they are sent

• ability to push

Standards

OK, that’s oursbut based on a well-researched principle

Pattern for remote JSON data synchronization.

Uses JSON-Patch over HTTP or WebSocket,

with optional Operational Transformation.

PuppetJs

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

Why Operational Transformation• 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

• how does it work: 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

Fat client SPAs

SERVER APP CL I ENT APPRES T INTERFACE JSON RES T

C L I ENT