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

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