- The document discusses thin client vs fat client architectures for web applications. Thin clients keep application logic and state on the server, using standards like JSON and JSON Patch over HTTP and WebSockets to synchronize the client-side view. - PuppetJs is presented as a pattern and library that implements a thin client approach, binding server-side view models to HTML and keeping state synchronized between client and server through patching. - Operational transformation is discussed as a technique to resolve conflicts when the client and server make concurrent changes.

1. Thin client SPAs
Stream UI using web standards
MARCIN WARPECHOWSKI, STARCOUNTER
INFOSHARE
GDAŃSK, 18.05.2016

2. Thin client SPAs
Stream UI using web standards
MARCIN WARPECHOWSKI, STARCOUNTER
INFOSHARE
GDAŃSK, 18.05.2016

3. 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/puppetjs
infoshare.mysampleapp.com

4. Topics today
- application protocols
- user interface

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

6. 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.

7. Problems of fat client
- heavy code
- duplicate logic
- increased complexity
- validation on both ends
- glue code

8. Thin client should be among the considered
solutions
nyctaxi.herokuapp.com

9. Pattern for data synchronization.
Uses JSON and JSON-Patch over
HTTP and WebSocket.
PuppetJs

10. Standards
PuppetJs
Pattern for data synchronization.
Uses JSON and JSON-Patch over
HTTP and WebSocket.

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

12. Puppet flow

13. Demo time

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

15. Benefits to productivity
- no client side app, no glue code between apps
- works great with JavaScript and Web Components
- composable nested views

16. Benefits to performance and UX
- morphing views
- real-time view of the data
- client patches mitigate network latency

17. Benefits to integrity
- security
- server is the single source of truth
- operational transformation

18. 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

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

20. Appendix

21. 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)

22. Why JSON
• ubiquitous (every platform supported)

23. 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

24. Why HTTP
• Content negotiation: text/html, application/json, application/json-
patch+json

25. 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

26. Standards
OK, that’s ours
but based on a well-researched principle
Pattern for remote JSON data synchronization.
Uses JSON-Patch over HTTP or WebSocket,
with optional Operational Transformation.
PuppetJs

27. 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

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

29. 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

30. Without Operational Transformation
CLIENT SERVER
“ABCDE” “ABCDE”
“ABCE” “ACDE”
“ACD”“ACE”
C = Del 4 S = Del 2
S = Del 2 C = Del 4
TIME

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

32. Fat client SPAs
SERVER APP CLIENT APP
REST
INTERFACE
JSON
REST
CLIENT