Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Puppet
MAKE STATEFUL APPS
EASIER THAN STATELESS
Marcin Warpechowski

Starcounter - Sep 2015
What is Puppet
Protocol for remote JSON data synchronization.
Uses JSON-Patch over HTTP or WebSocket,
with optional Operat...
What do we use it for?
UI
server-driven view-models
SPOILER ALERT
What is Puppet
Pattern
Protocol for remote JSON data synchronization.
Uses JSON-Patch over HTTP or WebSocket,
with optiona...
What is Puppet
Pattern
Standards
Protocol for remote JSON data synchronization.
Uses JSON-Patch over HTTP or WebSocket,
wi...
What is Puppet
Pattern
Standards
OK, that’s ours
but based on a well-researched principle
Protocol for remote JSON data sy...
Why JSON
• ECMA and IETF standard (ECMA-404, RFC 7159)
• 7 kinds of values: string, number, object, array, true, false, nu...
Why JSON
• ECMA and IETF standard (ECMA-404, RFC 7159)
• 7 kinds of values: string, number, object, array, true, false, nu...
Why JSON-Patch
• IETF standard (RFC 6902)
• 3 major operations: add, replace, remove
• 3 helper operations: copy, move, te...
Why JSON-Patch
• 3 major operations: add, replace, remove
• 3 helper operations: copy, move, test
• a JSON-Patch is a JSON...
Puppet flow
1. Get HTML representation of the page
2. Get JSON representation of the page
3. Send any change as JSON-Patch ...
Puppet solves problems
• communicating changes to tree-structured data between two
peers
• in our case: synchronizing UI s...
Benefits of Puppet for the UI
SECURITY
No hackable code in the client
COMPOSABILITY
JSON trees can be nested
MITIGATING NET...
Triggering changes
• when the client sends a change, this is just an intent
• it is up to the server to accept, process an...
Triggering changes
• Altering FirstName$ or LastName$ on the client 

can cause the server to change the FullName
• Alteri...
Why HTTP
• W3C and IETF standard (multiple RFC)
• ability to ask for representation as JSON and HTML
• ability to send cha...
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 th...
Why WebSocket
Why Operational Transformation
• web reality: the client and the server are doing concurrent
changes asynchronously (most ...
Without Operational Transformation
CLIENT SERVER
“ABCDE” “ABCDE”
“ABCE” “ACDE”
“ACD”“ACE”
C = Del 4 S = Del 2
S = Del 2 C ...
With Operational Transformation
CLIENT SERVER
TIME
“ABCDE” “ABCDE”
“ABCE” “ACDE”
“ACD”“ACE”
C = Del 4 S = Del 2
S’ = Del 2...
What Puppet is not
• RPC
• Collaboration tool
What Puppet is not
• RPC
• Collaboration tool
But can be used as such
Puppet implementations
JavaScript:

PuppetJS
Framework agnostic (tested with
Polymer, Angular and plain JS)
Oriented for t...
Demo
• Procurement
• trigger server change of InvoiceRow Total in Chrome console:



var	
  o	
  =	
  document.querySelect...
Future topics
• Puppet does not replace REST, it enhances it
• Puppet shares some mindset with DDP, Falcor, ShareJS
• Deta...
GitHub: https://github.com/puppetjs/puppetjs (see Wiki)
Twitter: @starcounterdb, @warpech
Thanks! More info on
.io
Nächste SlideShare
Wird geladen in …5
×

Puppet – Make stateful apps easier than stateless

Stateful apps are considered hard and unpractical. The truth is the opposite! With the correct technology, you can develop a thick client SPA with state entirely controlled on the server. Forget writing countless lines of glue code and the callback hell. Welcome to the DRY world of JSON-Patch and PuppetJS!

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Puppet – Make stateful apps easier than stateless

  1. 1. Puppet MAKE STATEFUL APPS EASIER THAN STATELESS Marcin Warpechowski
 Starcounter - Sep 2015
  2. 2. What is Puppet Protocol for remote JSON data synchronization. Uses JSON-Patch over HTTP or WebSocket, with optional Operational Transformation.
  3. 3. What do we use it for? UI server-driven view-models SPOILER ALERT
  4. 4. What is Puppet Pattern Protocol for remote JSON data synchronization. Uses JSON-Patch over HTTP or WebSocket, with optional Operational Transformation.
  5. 5. What is Puppet Pattern Standards Protocol for remote JSON data synchronization. Uses JSON-Patch over HTTP or WebSocket, with optional Operational Transformation.
  6. 6. What is Puppet Pattern Standards OK, that’s ours but based on a well-researched principle Protocol for remote JSON data synchronization. Uses JSON-Patch over HTTP or WebSocket, with optional Operational Transformation.
  7. 7. 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)
  8. 8. 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)
  9. 9. 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
  10. 10. 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
  11. 11. Puppet flow 1. 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
  12. 12. 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)
  13. 13. Benefits of Puppet for the UI SECURITY No hackable code in the client COMPOSABILITY JSON trees can be nested MITIGATING NETWORK LATENCY Client sends the data as you type. Server already has the data when you press OK TEMPLATING SYSTEMS Polymer, Angular, Handlebars, etc bind JSON nicely to HTML MORPHABILITY UI can respond to changes by replacing parts of the tree DEEP URLS Links morph the state if opened in the same tab. They reload the page only if you open a new tab
  14. 14. 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
  15. 15. 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)
  16. 16. 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
  17. 17. HTML representation
  18. 18. JSON representation
  19. 19. JSON-Patch representation
  20. 20. 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
  21. 21. Why WebSocket
  22. 22. 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
  23. 23. Without Operational Transformation CLIENT SERVER “ABCDE” “ABCDE” “ABCE” “ACDE” “ACD”“ACE” C = Del 4 S = Del 2 S = Del 2 C = Del 4 TIME
  24. 24. With Operational Transformation CLIENT SERVER TIME “ABCDE” “ABCDE” “ABCE” “ACDE” “ACD”“ACE” C = Del 4 S = Del 2 S’ = Del 2 C’ = Del 3
  25. 25. What Puppet is not • RPC • Collaboration tool
  26. 26. What Puppet is not • RPC • Collaboration tool But can be used as such
  27. 27. Puppet implementations JavaScript:
 PuppetJS Framework 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
  28. 28. 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$++
  29. 29. Future topics • Puppet does not replace REST, it enhances it • Puppet shares some mindset with DDP, Falcor, ShareJS • Detailed view into OT
  30. 30. GitHub: https://github.com/puppetjs/puppetjs (see Wiki) Twitter: @starcounterdb, @warpech Thanks! More info on .io

×