Expressing your UI in JSON – plain, data binding, advanced data binding
-
Upload
starcounter -
Category
Software
-
view
1.067 -
download
3
Transcript of Expressing your UI in JSON – plain, data binding, advanced data binding
Expressing UI in JSONA PRODUCT IVE WORKFLOW FOR WEB APPS DEVELOPMENT
US ING PUPPET INS TEAD OF RES T AP I
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
Usual web app UI workflow (thick client)
BUS INESS REQU IREMENT S
U I W IREFRAME
DEV DES IGNDEV DES IGN
SERVER - S IDE (C# , PHP, E TC )
CL I ENT - S IDE (HTML + J S )
APP
DEC IDE ON RES T REF INE THE V I SUAL S
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.
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.
Starcounter web app UI workflow (Puppet)
BUS INESS REQU IREMENT S
U I W IREFRAME
DEV DES IGN
SERVER - S IDE (C# )
CL I ENT - S IDE (HTML)
APP
DEC IDE ON JSON REF INE THE V I SUAL S
JSON
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 clientJ SON -PATCH & WEBSOCKET
JSON
More info on starcounter.io
Progressive development of the client
BEFORE THE W IREFRAME BECOMES THE APP
WORK ING SERVER C AN BE OPERATED US ING JSON -PATCH EN ABLED JSON ED I T OR ON THE C L I ENT
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
What exactly can be modelled with JSON?
T YPE S AMPLE VAL UE WHAT I T ’ S GOOD FOR
object {“MainMenu”:{},“PagesList”:{},“CurrentPage”:{}} Nested UI regions
array {“PagesList”:[{“Url”:“/page1”,“Label”:“Page1”}] 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
What do we use it for?
We are gathering practical examples in github.com/StarcounterSamples/KitchenSink
Pull requests are welcome!
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
Twitter: @starcounterdb, @warpech
Thanks! Try out Starcounter, let us know your thoughts!
Follow us on
.io