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!

1. Puppet
MAKE STATEFUL APPS
EASIER THAN STATELESS
Marcin Warpechowski
Starcounter - Sep 2015

2. What is Puppet
Protocol for remote JSON data synchronization.
Uses JSON-Patch over HTTP or WebSocket,
with optional Operational Transformation.

3. What do we use it for?
UI
server-driven view-models
SPOILER ALERT

4. What is Puppet
Pattern
Protocol for remote JSON data synchronization.
Uses JSON-Patch over HTTP or WebSocket,
with optional Operational Transformation.

5. What is Puppet
Pattern
Standards
Protocol for remote JSON data synchronization.
Uses JSON-Patch over HTTP or WebSocket,
with optional Operational Transformation.

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. HTML representation

18. JSON representation

19. JSON-Patch representation

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. Why WebSocket

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. 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. 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. What Puppet is not
• RPC
• Collaboration tool

26. What Puppet is not
• RPC
• Collaboration tool
But can be used as such

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. 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. Future topics
• Puppet does not replace REST, it enhances it
• Puppet shares some mindset with DDP, Falcor, ShareJS
• Detailed view into OT

30. GitHub: https://github.com/puppetjs/puppetjs (see Wiki)
Twitter: @starcounterdb, @warpech
Thanks! More info on
.io