Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Expressing UI in JSON
A PRODUCTIVE WORKFLOW FOR WEB APPS DEVELOPMENT
USING PUPPET INSTEAD OF REST API
Imagine a simple web app
Home New Invoice
Invoices
Name Quantity Price Total
Customer A 10 100 100
Invoices #1
100
Custome...
Usual web app UI workflow (thick client)
BUSINESS REQUIREMENTS
UI WIREFRAME
DEV DESIGNDEV DESIGN
SERVER-SIDE 

(C#, PHP, ET...
Problems with REST API
REST API is a stateless representation of a resource (data, document,
application logic).
Devs try ...
Problems with changing of the REST API
The REST API is contract that needs to be satisfied on both ends.
• It requires a lo...
Starcounter web app UI workflow (Puppet)
BUSINESS REQUIREMENTS
UI WIREFRAME
DEV DESIGN
SERVER-SIDE 

(C#)
CLIENT-SIDE
(HTML...
How Puppet works
Server-driven view-models
Client reflects the current state of the session
User changes are proposed to se...
Progressive development of the client
BEFORE THE WIREFRAME BECOMES THE APP
Progressive development of the client
BEFORE THE WIREFRAME BECOMES THE APP
WORKING SERVER CAN BE OPERATED USING
JSON-PATCH...
Your JSON can be used before client is done
Present InvoiceDemo
1. using JSON-Patch without template (just starcounter-deb...
What exactly can be modelled with JSON?
TYPE SAMPLE VALUE WHAT IT’S GOOD FOR
object {“MainMenu”:	{},	“PagesList”:	{},	“Cur...
What do we use it for?
We are gathering practical examples in
github.com/StarcounterSamples/KitchenSink
Pull requests are ...
Starcounter data binding in JSON
1. All JSON-by-example properties are bound to .json.cs
2. Properties matching the data m...
Twitter: @starcounterdb, @warpech
Thanks! Try out Starcounter,
let us know your thoughts!
Follow us on
.io
Upcoming SlideShare
Loading in …5
×

Expressing your UI in JSON – plain, data binding, advanced data binding

1,850 views

Published on

Did you know that UI of a web app can be expressed using a simple, schemaless JSON? Since it supports only a few primitive data types, it is a great format for the boundary between the application logic and the view.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Expressing your UI in JSON – plain, data binding, advanced data binding

  1. 1. Expressing UI in JSON A PRODUCTIVE WORKFLOW FOR WEB APPS DEVELOPMENT USING PUPPET INSTEAD OF REST API
  2. 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. 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. 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. 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. 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. 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. 8. Progressive development of the client BEFORE THE WIREFRAME BECOMES THE APP
  9. 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. 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. 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. 12. What do we use it for? We are gathering practical examples in github.com/StarcounterSamples/KitchenSink Pull requests are welcome!
  13. 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. 14. Twitter: @starcounterdb, @warpech Thanks! Try out Starcounter, let us know your thoughts! Follow us on .io

×