Thin client SPAs. Stream UI using web standards
0 likes386 views
- 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.
Thin client SPAs. Stream UI using web standards
- 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