Thin client SPAs? Stream UI using web standards (CodeNight)
0 likes528 views
This document discusses thin client single page applications (SPAs) using web standards like JSON and JSON-Patch over HTTP and WebSocket. It introduces PuppetJs, a pattern and library for data synchronization between a server-side application and thin client. Key points covered include the benefits of thin clients like reduced code/complexity, real-time views, and integrity through a single source of truth on the server. Challenges around connection, latency and staying in sync are also addressed. The presenter demonstrates PuppetJs functionality and implementations in various technologies.
Thin client SPAs? Stream UI using web standards (CodeNight)
- 1. Thin client SPAs? Stream UI using web standards MARCIN WARPECHOWSKI, STARCOUNTER CODENIGHT STOCKHOLM, 2016-06-09
- 2. 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
- 3. Fat client SPAs STATELESS STATE #2STATE #1 SERVER APP CLIENT APP REST INTERFACE JSON REST CLIENT
- 4. 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.
- 5. Problems of fat client - heavy code - duplicate logic - increased complexity - validation on both ends - glue code
- 6. Thin client should be among the considered solutions nyctaxi.herokuapp.com
- 7. Pattern for data synchronization. Uses JSON and JSON-Patch over HTTP and WebSocket. PuppetJs
- 8. Standards PuppetJs Pattern for data synchronization. Uses JSON and JSON-Patch over HTTP and WebSocket.
- 9. S T A T E SERVER APP WITH VIEW-MODEL JSON VIEW PuppetJs binds server-side view-models to HTML
- 10. Puppet flow
- 11. Demo time
- 12. JSON is low-res - JSON has just 6 types of value: - string - number - boolean - null - object - array PRIMITIVE COMPOSITE
- 13. 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
- 14. What UI can you represent with JSON? - nested views - namespaces - lists of values - lists of views OBJECT ARRAY
- 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
- 18. Challenges for thin client - connection - latency - going out of sync
- 19. 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
- 20. Sthlm-Frankfurt-Sthlm in 42 ms Meaning: 23 roundtrips per second
- 21. In 200 ms to NY and back Meaning: 5 roundtrips per second
- 22. Latency mitigation - horizontal partitioning “sharding” - (moving ownership of the rows) - replication
- 23. 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
- 24. Without Operational Transformation CLIENT SERVER “ABCDE” “ABCDE” “ABCE” “ACDE” “ACD”“ACE” C = Del 4 S = Del 2 S = Del 2 C = Del 4 TIME
- 25. With Operational Transformation CLIENT SERVER TIME “ABCDE” “ABCDE” “ABCE” “ACDE” “ACD”“ACE” C = Del 4 S = Del 2 S’ = Del 2 C’ = Del 3
- 26. 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
- 27. Thanks! More info on .io Twitter: @starcounterdb, @warpech