© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.

Efficient Client Communication with Differential Synchronization and JSON Patch

By Brian Cavalier and Craig Walls

What’s the problem with REST?

Nothing, REST is awesome

What’s the problem with how we typically use REST in practice?

Agenda

• Motivation • Differential Synchronization (DS) • JSON Patch • DS + JSON Patch • DS w/Spring and JavaScript • The future

What’s the problem with how we typically use REST in practice?

Isn’t “typical REST” good enough?

• “Typical REST”: 1 request per entity per operation type • create 2 entities, update 3, delete 1 = 6 requests

• Expensive for mobile: connection latency, battery, data ($$$) • Doesn’t exploit return payload

Motivation: Goals

• More efficient data transfer • More efficient use of mobile radios, networks and batteries • Take advantage of WebSocket & messaging • Data synchronization with multiple clients • Offline / disconnected

How can we get data from a Spring back-end all the way to

the pixels more efficiently?

Differential Synchronization

Differential Sync

• Algorithm for syncing N copies of a document • Potentially supports any kind of document/data

• As long as diff & patch algorithms are available • Text, DOM, JSON

• Nice properties • Efficient: Transfer only differences • Symmetrical: same algorithm at each node • Recoverable: disconnected/offline clients, lost messages

• Published by Neil Fraser in 2009 • https://neil.fraser.name/writing/sync/

Differential Sync

doc docshadow

diff

diff

patch

patch

live edits

live edits

Differential Sync

doc shadow docshadow

diff

diff

patch

patch

live edits

live edits

Differential Sync

• Cooperative synchronization loop • Distributed or local • Uses diff & patch algorithms

JSON Patch

JSON Patch

• JSON-formatted Patch for structured documents • RFC 6902, plus related JSON Pointer RFC 6901

• https://tools.ietf.org/html/rfc6902 • https://tools.ietf.org/html/rfc6901

• Suitable for sending via HTTP Patch • Defines operations, format, algorithm, and mime type

• application/json-patch+json • Can coexist w/handlers at same url via Content-Type routing • Does not define diff algorithm • Sensible requirement: patch(diff(a, b), a) === b

JSON Patch

json![{"value":"a"},{"value":"b"},{"value":"c"}]!

+ patch!

[{"op":"add","path":"/3","value":{"value":"d"}},!{“op":"remove","path":"/1"}]!

= new json!

[{"value":"a"},{"value":"c"},{"value":"d"}]

JSON Patch

json!{"name":{"first":"Brian","last":"Cavalier"},"occupation":"JavaScript

Engineer"}!

+ patch!

[{"op":"replace","path":"/occupation","value":"JavaScript Ranger"}]!

= new json!

{"name":{"first":"Brian","last":"Cavalier"},"occupation":"JavaScript Ranger"}

JSON Patch

• Moves the operation type inside request payload • create 2 entities, update 3, delete 1 = 1 request

• Moves the identifier inside request payload • Potentially patch many entity types in a single request

• Patches are atomic • If any part of a patch fails, whole patch must fail (as per RFC) • Think: data integrity

“Typical REST”

POST /todos {“description”: “Try JSON Patch”, “complete”: false} PUT /todos/1 {“description”: “…”, “complete”: true} PATCH /todos/2 {“complete”: true} DELETE /todos/3

JSON Patch

PATCH /todos [ {“op”: “add”, “path”: “-“, “value”: { “description”: “Try JSON Patch”, “complete”: true}}, {“op”: “replace”, “path”: “/1”, “value”: { “description”: “…”, “complete”: true}}, {“op”: “replace”, “path”: “/2/complete”, “value”: true}}, {“op”: “remove”, “path”: “/3”}} ]

“Typical REST”

POST /person { “name”: “Brian” } PUT /todos/1 { “description”: “…”, “complete”: true } PATCH /meetings/2 { “agenda”: “…” } DELETE /todos/3

Pie in the sky JSON Patch

PATCH / [ {“op”: “add”, “path”: “/person/-“, “value”: { “name”: “Brian” }}, {“op”: “replace”, “path”: “/todos/1”, “value”: { “description”: “…”, “complete”: true }}, {“op”: “replace”, “path”: “/meetings/2/agenda”, “value”: “…” }}, {“op”: “remove”, “path”: “/todos/3” }} ]

JSON Patch

• Reduce requests • “Typical” REST:

• # Requests = Entity type x Operation type • JSON Patch + HTTP Patch

• # Requests = 1 • Reduce payload size: Transfer only deltas

Demo

Introducing jiff.js

• JavaScript library for JSON diff & patch • https://github.com/cujojs/jiff

• Diffs arbitrary JSON or JavaScript object graphs • inc. objects containing arrays containing objects containing…

• Patches arbitrary JSON or JavaScript object graphs atomically • Supports advanced features: inverse patches, rebase, contextual

(“smart”) patching

jiff.js

var jiff = require(‘jiff’); var rest = require(‘rest’); !var changedData = jiff.clone(data); !// … data changes via user interactions !var patch = jiff.diff(data, changedData); !rest({ method: ‘PATCH’, entity: patch });

Hmmmm …. Differential synchronization requires diff and patch algorithms

JSON Patch defines a patch format and algorithm

Differential Sync + JSON Patch What if we put these two things together to synchronize

structured data?

Differential Sync

data model shadow data

modelshadow

diff

diff

patch

patch

changeschanges

JSON Patch

JSON Patch

Spring ServerClient (web browser, phone, etc.)

Demo

Differential Synchronization in Server-Side Spring

Applying JSON Patch to the Java-based Domain

Path to SpEL

JSON Patch Path SpEL

/0 [0]

/complete .complete

/1/description [1].description

/clients/3/address/zip .clients[3].address.zip

Challenges with JSON Patch and Java

• How do you “remove” or “move” a property? • How do you “move” a list item to a different index? • How do you “add” a list item to a specific index? • How do you avoid saving the entire list when patching a list? • How do you delete an item as the result of a “delete” op? • What if a “remove” is only intended for a particular view?

Introducing Spring Sync

• GitHub: http://github.com/spring-projects/spring-sync • Maven/Gradle: org.springframework.sync:spring-sync:0.5.0.BUILD-

SNAPSHOT • JsonPatch

• Applies a JSON Patch to a Java object graph

• DiffSync • Applies Differential Synchronization algorithm (leveraging JsonPatch)

• DiffSyncController • Handles PATCH requests for “application/json-patch+json” • Returns a JSON Patch to update client

• @EnableDifferentialSynchronization

Enabling Spring Sync

@Configuration @EnableDifferentialSynchronization public class DiffSyncConfig extends DiffSyncConfigurerAdapter { ! @Autowired private PagingAndSortingRepository<Todo, Long> repo; @Override public void addPersistenceCallbacks( PersistenceCallbackRegistry registry) { ! registry.addPersistenceCallback( new JpaPersistenceCallback<Todo>(repo, Todo.class)); ! } }

Differential Synchronization in JavaScript

Network

Differential Sync in JavaScript

DOM User Interface

JavaScript objects, arrays, etc

Spring Server

patchpatch

patch patch

Differential Sync in JavaScript

• Synchronize from the Spring data model to the pixels • Decouple change frequency from communication frequency:

• fast sync = responsive, but network/resource intense • slow sync = slower UI updates, but less network/resource

intense • Current Status

• Incubator JavaScript implementation based on cujojs/jiff.js

When you have a system based on patches, you can do some interesting things

Streaming changes w/WebSocket

42

Demo

Patch Algebra

44

Patch Algebra

• Inverse patches • think Undo & Redo with no application specific logic

• Merge and Rebase • Apply parallel changes from multiple parties without locking

• jiff.js supports inverse, rebase

Demo

Challenges

• DS in an Entity-oriented world • What constitutes a document?

• Each participant must maintain a shadow copy of the document • Lists and arrays are tricky • Conflict resolution (not a big deal in practice?)

• Hypothesis: Conflicts no more likely to occur than REST • DS in itself does not solve conflict resolution, but neither does

REST

Today

• Spring Sync • http://github.com/spring-projects/spring-sync • org.springframework.sync:spring-sync:0.5.0.BUILD-SNAPSHOT

• JSON Patch + diff in JavaScript • https://github.com/cujojs/jiff

• Experimental Spring support for Differential Sync and JSON Patch over HTTP Patch

• https://github.com/royclarkson/spring-rest-todos

The Future

• Continue evolution of Spring Sync and JavaScript DS implementations

• Further Integrate with Spring ecosystem • Messaging & WebSocket • Smart patching

• Offline/disconnected client support • Guidance (when to use it, how to tune it, etc.)