Expressing your UI in JSON – plain, data binding, advanced data binding
0 likes2,017 views
The document discusses a workflow for web app development using Puppet and JSON instead of traditional REST APIs, highlighting inefficiencies and redundancy in REST implementations. It suggests that server-driven view models and JSON patching can enhance the client-side experience by allowing progressive development. The text also provides practical examples and encourages community contributions to a Github repository for further exploration of Starcounter's capabilities.
![What exactly can be modelled with JSON?
TYPE SAMPLE VALUE WHAT IT’S GOOD FOR
object {“MainMenu”: {}, “PagesList”: {}, “CurrentPage”: {}} Nested UI regions
array {“PagesList”: [{“Url”: “/page1”, “Label”: “Page 1”}] Lists, tables, graphs
string “/page1” Text labels, most of the form fields, URLs
number 1, 1.00 Numeric values, buttons
boolean true, false Checkboxes, buttons
null null Not used in Puppet at the moment](https://image.slidesharecdn.com/expressinguiinjson2015-10-151013140817-lva1-app6892/85/Expressing-your-UI-in-JSON-plain-data-binding-advanced-data-binding-11-320.jpg)
Expressing your UI in JSON – plain, data binding, advanced data binding
- 1. Expressing UI in JSON A PRODUCTIVE WORKFLOW FOR WEB APPS DEVELOPMENT USING PUPPET INSTEAD OF REST API
- 2. Imagine a simple web app Home New Invoice Invoices Name Quantity Price Total Customer A 10 100 100 Invoices #1 100 Customer Name Customer A Add row Save changes Cancel changes Delete invoice # Name Total 1 Customer A 100 2 Customer B 99
- 3. Usual web app UI workflow (thick client) BUSINESS REQUIREMENTS UI WIREFRAME DEV DESIGNDEV DESIGN SERVER-SIDE (C#, PHP, ETC) CLIENT-SIDE (HTML + JS) APP DECIDE ON REST REFINE THE VISUALS
- 4. Problems with REST API REST API is a stateless representation of a resource (data, document, application logic). Devs try to make REST APIs future-proof, to fit every purpose. Which encourages redundancy. In result, REST APIs have too much data than the client app needs. Which makes it slow.
- 5. Problems with changing of the REST API The REST API is contract that needs to be satisfied on both ends. • It requires a lot of glue code and testing. • Application logic needs to be on both ends. Requirement changes that change this contract cost a lot. I am not saying that REST is bad, but it has its flaws if you want super fast and super easy client side apps.
- 6. Starcounter web app UI workflow (Puppet) BUSINESS REQUIREMENTS UI WIREFRAME DEV DESIGN SERVER-SIDE (C#) CLIENT-SIDE (HTML) APP DECIDE ON JSON REFINE THE VISUALS JSON
- 7. How Puppet works Server-driven view-models Client reflects the current state of the session User changes are proposed to server Server changes are pushed to client JSON-PATCH & WEBSOCKET JSON More info on starcounter.io
- 8. Progressive development of the client BEFORE THE WIREFRAME BECOMES THE APP
- 9. Progressive development of the client BEFORE THE WIREFRAME BECOMES THE APP WORKING SERVER CAN BE OPERATED USING JSON-PATCH ENABLED JSON EDITOR ON THE CLIENT
- 10. Your JSON can be used before client is done Present InvoiceDemo 1. using JSON-Patch without template (just starcounter-debug-aid) 2. progressively adding HTML template
- 11. What exactly can be modelled with JSON? TYPE SAMPLE VALUE WHAT IT’S GOOD FOR object {“MainMenu”: {}, “PagesList”: {}, “CurrentPage”: {}} Nested UI regions array {“PagesList”: [{“Url”: “/page1”, “Label”: “Page 1”}] Lists, tables, graphs string “/page1” Text labels, most of the form fields, URLs number 1, 1.00 Numeric values, buttons boolean true, false Checkboxes, buttons null null Not used in Puppet at the moment
- 12. What do we use it for? We are gathering practical examples in github.com/StarcounterSamples/KitchenSink Pull requests are welcome!
- 13. Starcounter data binding in JSON 1. All JSON-by-example properties are bound to .json.cs 2. Properties matching the data model are bound implicitly to the data object 3. Advanced: Use “Bind” helper to bind setters/getters in .json.cs
- 14. Twitter: @starcounterdb, @warpech Thanks! Try out Starcounter, let us know your thoughts! Follow us on .io