Post on 18-Jan-2017
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