Run results for: Different Styles of Object Diffs in JS

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36

Browser: Chrome 73

Operating system: Mac OS X 10.14.3

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
DeepDiff (beforeText, afterText)	67970.1 Ops/sec
MongoDBDiff.diff(beforeText, afterText)	55740.7 Ops/sec
MongoDBDiff.diff *.toJS()	33716.3 Ops/sec
ImmutableDiff two mostly shared objects	148909.9 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js'></script>
<script src='https://s3.amazonaws.com/www.deanius.com/javascripts/mongodb-diff.umd.js'></script>
<script src='https://s3.amazonaws.com/www.deanius.com/javascripts/immutablediff.umd.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/deep-diff/0.3.3/deep-diff.min.js'></script>

Script Preparation code:

var beforeText = {"_id":"DZqGmqL6T9TBN6KXp","title":"Foofoo","createdAt":1475201145611,"createdBy":"Pe92xcgNnbi3yAebn","updatedBy":"Pe92xcgNnbi3yAebn","updatedAt":1475201156823,"artifactType":"creation","type":"canvas","status":"active","pages":[{"title":"Page 1","_id":"NMGnvMihjvB4XxZa7","createdAt":1475201145612,"items":{"_order":["dsbDxZQr7zMZ9JKYF"],"dsbDxZQr7zMZ9JKYF":{"_id":"dsbDxZQr7zMZ9JKYF","version":"1.0.0","style":{"text_align":"center","padding_left":12,"padding_right":12,"padding_top":28,"padding_bottom":28,"opacity":1},"settings":{"subtitle":false},"type":"headline","text":{"en":{"text":"<p>The word</p>"}}}}}],"settings":{"viewType":"free-form"}};
var afterText = {"_id":"DZqGmqL6T9TBN6KXp","title":"Foofoo","createdAt":1475201145611,"createdBy":"Pe92xcgNnbi3yAebn","updatedBy":"Pe92xcgNnbi3yAebn","updatedAt":1475201226516,"artifactType":"creation","type":"canvas","status":"active","pages":[{"title":"Page 1","_id":"NMGnvMihjvB4XxZa7","createdAt":1475201145612,"items":{"_order":["dsbDxZQr7zMZ9JKYF","J7y7NPf2WWema4sjy"],"dsbDxZQr7zMZ9JKYF":{"_id":"dsbDxZQr7zMZ9JKYF","version":"1.0.0","style":{"text_align":"center","padding_left":12,"padding_right":12,"padding_top":28,"padding_bottom":28,"opacity":1},"settings":{"subtitle":false},"type":"headline","text":{"en":{"text":"<p>The word</p>"}}},"J7y7NPf2WWema4sjy":{"_id":"J7y7NPf2WWema4sjy","version":"1.0.0","style":{"padding_left":12,"padding_right":12,"padding_top":18,"padding_bottom":18},"settings":{"title":false,"description":false,"caption":false},"type":"text","text":{"en":{"text":"<p>My first text</p>"}}}}}],"settings":{"viewType":"free-form"}};

var newEl = {"_id":"J7y7NPf2WWema4sjy","version":"1.0.0","style":{"padding_left":12,"padding_right":12,"padding_top":18,"padding_bottom":18},"settings":{"title":false,"description":false,"caption":false},"type":"text","text":{"en":{"text":"<p>My first text</p>"}}}
var beforeTextI = Immutable.fromJS(beforeText);
var afterTextI = beforeTextI.setIn(['items', 'J7y7NPf2WWema4sjy'], newEl)

Tests:

DeepDiff (beforeText, afterText)
DeepDiff(beforeText, afterText)
MongoDBDiff.diff(beforeText, afterText)
MongoDBDiff.diff(beforeText, afterText)
MongoDBDiff.diff *.toJS()
MongoDBDiff.diff(beforeTextI.toJS(), afterTextI.toJS())
ImmutableDiff two mostly shared objects
idiff(beforeTextI, afterTextI)

Run results for: Different Styles of Object Diffs in JS

DeepDiff (beforeText, afterText)

MongoDBDiff.diff(beforeText, afterText)

MongoDBDiff.diff *.toJS()

ImmutableDiff two mostly shared objects