Thin client SPAs. Stream UI using web standards
-
Upload
starcounter -
Category
Engineering
-
view
182 -
download
2
Transcript of Thin client SPAs. Stream UI using web standards
![Page 1: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/1.jpg)
Thin client SPAs Stream UI using web standards
MARC IN WARPECHOW SK I , S TARCOUNTER
INFOSHARE GDAŃSK , 18 .05 .2016
![Page 2: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/2.jpg)
Thin client SPAs Stream UI using web standards
MARC IN WARPECHOW SK I , S TARCOUNTER
INFOSHARE GDAŃSK , 18 .05 .2016
![Page 3: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/3.jpg)
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
![Page 4: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/4.jpg)
Topics today- application protocols
- user interface
![Page 5: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/5.jpg)
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
![Page 6: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/6.jpg)
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.
![Page 7: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/7.jpg)
Problems of fat client- heavy code
- duplicate logic
- increased complexity
- validation on both ends
- glue code
![Page 8: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/8.jpg)
Thin client should be among the considered solutions
nyctaxi.herokuapp.com
![Page 9: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/9.jpg)
Pattern for data synchronization.
Uses JSON and JSON-Patch over HTTP and WebSocket.
PuppetJs
![Page 10: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/10.jpg)
Standards
PuppetJsPattern for data synchronization.
Uses JSON and JSON-Patch over HTTP and WebSocket.
![Page 11: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/11.jpg)
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
![Page 12: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/12.jpg)
Puppet flow
![Page 13: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/13.jpg)
Demo time
![Page 14: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/14.jpg)
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
![Page 15: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/15.jpg)
Benefits to productivity- no client side app, no glue code between apps
- works great with JavaScript and Web Components
- composable nested views
![Page 16: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/16.jpg)
Benefits to performance and UX
- morphing views
- real-time view of the data
- client patches mitigate network latency
![Page 17: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/17.jpg)
Benefits to integrity- security
- server is the single source of truth
- operational transformation
![Page 18: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/18.jpg)
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
![Page 19: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/19.jpg)
Thanks! More info on
.io
Twitter: @starcounterdb, @warpech
![Page 20: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/20.jpg)
Appendix
![Page 21: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/21.jpg)
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)
![Page 22: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/22.jpg)
Why JSON• ubiquitous (every platform supported)
![Page 23: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/23.jpg)
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
![Page 24: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/24.jpg)
Why HTTP• Content negotiation: text/html, application/json, application/json-
patch+json
![Page 25: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/25.jpg)
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
![Page 26: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/26.jpg)
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
![Page 27: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/27.jpg)
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
![Page 28: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/28.jpg)
What UI can you represent with JSON?
- nested views - namespaces
- lists of values - lists of views
OBJECT
ARRAY
![Page 29: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/29.jpg)
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
![Page 30: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/30.jpg)
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
![Page 31: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/31.jpg)
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
![Page 32: Thin client SPAs. Stream UI using web standards](https://reader031.fdocuments.in/reader031/viewer/2022021506/587f59981a28ab0d378b6efd/html5/thumbnails/32.jpg)
Fat client SPAs
SERVER APP CL I ENT APPRES T INTERFACE JSON RES T
C L I ENT