PuppetMAKE S TATEFUL APPS EAS I ER THAN S TATELESS

Marcin WarpechowskiStarcounter - Sep 2015

What is PuppetProtocol for remote JSON data synchronization.

Uses JSON-Patch over HTTP or WebSocket,

with optional Operational Transformation.

What do we use it for?

UI

server-driven view-models

SPOILER ALERT

What is PuppetPatternProtocol for remote JSON data synchronization.

Uses JSON-Patch over HTTP or WebSocket,

with optional Operational Transformation.

What is PuppetPattern

StandardsProtocol for remote JSON data synchronization.

Uses JSON-Patch over HTTP or WebSocket,

with optional Operational Transformation.

What is PuppetPattern

Standards

OK, that’s oursbut based on a well-researched principle

Protocol for remote JSON data synchronization.

Uses JSON-Patch over HTTP or WebSocket,

with optional Operational Transformation.

Why JSON• ECMA and IETF standard (ECMA-404, RFC 7159)

• 7 kinds of values: string, number, object, array, true, false, null

• this simplicity encourages thin client

• ubiquitous (every platform supported)

Why JSON• ECMA and IETF standard (ECMA-404, RFC 7159)

• 7 kinds of values: string, number, object, array, true, false, null

• this simplicity encourages thin client

• ubiquitous (every platform supported)

Why JSON-Patch• IETF standard (RFC 6902)

• 3 major operations: add, replace, remove

• 3 helper operations: copy, move, test

• a JSON-Patch is a JSON document itself

• reduces traffic

Why JSON-Patch• 3 major operations: add, replace, remove

• 3 helper operations: copy, move, test

• a JSON-Patch is a JSON document itself

• reduces traffic

Puppet flow1. Get HTML representation of the page

2. Get JSON representation of the page

3. Send any change as JSON-Patch (WebSocket or HTTP)

4. Send clicks on links as HTTP GET type JSON-Patch

Elements in italic are not on the diagram

Puppet solves problems• communicating changes to tree-structured data between two

peers

• in our case: synchronizing UI state between the server and the client

• removes the need for glue code (a real data object is synced)

• going out of sync (Operational Transformation)

Benefits of Puppet for the UISECUR I T Y No hackable code in the client

COMPOS AB I L I T Y JSON trees can be nested

MIT IGAT ING NET WORK L ATENCY Client sends the data as you type. Server already has the data when you press OK

TEMPL AT ING S Y S TEMS Polymer, Angular, Handlebars, etc bind JSON nicely to HTML

MORPHAB I L I T Y UI can respond to changes by replacing parts of the tree

DEEP URL S Links morph the state if opened in the same tab. They reload the page only if you open a new tab

Triggering changes• when the client sends a change, this is just an intent

• it is up to the server to accept, process and react to this intent

• ...or to reject it

Triggering changes• Altering FirstName$ or LastName$ on the client

can cause the server to change the FullName

• Altering Price$ or Quantity$ on the client can cause the server to change the Total

• Pressing a button can be sent as incrementation of a number or change from false -> true

• Any change can result in morphing of the view (alteration of small or big part of JSON tree)

Why HTTP• W3C and IETF standard (multiple RFC)

• ability to ask for representation as JSON and HTML

• ability to send changes as JSON-Patch or JSON

• ability to morph documents

HTML representation

JSON representation

JSON-Patch representation

Why WebSocket• W3C and IETF standard (RFC 6455)

• messages don’t have headers

• important when message is smaller than the header

• messages delivered in order

• ability to push

Why WebSocket

Why Operational Transformation• web reality: the client and the server are doing concurrent

changes asynchronously (most of the time out-of-sync)

• goal: apply patches correctly without freezing UI or disallowing server push

• how does it work: transforms any remote operation over operations that were generated locally

Without Operational Transformation

CL I ENT SERVER

“ABCDE” “ABCDE”

“ABCE” “ACDE”

“ACD”“ACE”

C = Del 4 S = Del 2

S = Del 2 C = Del 4

T IME

With Operational Transformation

CL I ENT SERVER

T IME

“ABCDE” “ABCDE”

“ABCE” “ACDE”

“ACD”“ACE”

C = Del 4 S = Del 2

S’ = Del 2 C’ = Del 3

What Puppet is not• RPC

• Collaboration tool

What Puppet is not• RPC

• Collaboration toolBut can be used as such

Puppet implementationsJavaScript:PuppetJSFramework agnostic (tested with Polymer, Angular and plain JS)

Oriented for the role of the client (server usage samples in development)

Web Components:puppet-client Native Web Component API

Plays well with Polymer

C#:Starcounter Oriented for the role of the server

Working on releasing it as NuGet package that can be used as a server or as a client

Demo• Procurement

• trigger server change of InvoiceRow Total in Chrome console:var  o  =  document.querySelector('puppet-­‐client').obj.workspaces[0] o.Procurement.CurrentPage.Procurement.PurchaseOrderItems[0].Price$++

• Chatter

• push new Chat message from Chrome console:o.Chatter.CurrentPage.Chatter.ChatMessage.Text$  =  "Hi  from  console!” o.Chatter.CurrentPage.Chatter.Send$++

Future topics• Puppet does not replace REST, it enhances it

• Puppet shares some mindset with DDP, Falcor, ShareJS

• Detailed view into OT

GitHub: https://github.com/puppetjs/puppetjs (see Wiki)

Twitter: @starcounterdb, @warpech

Thanks! More info on

.io