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.

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