Open Tech Foundation introduces a new JavaScript library to assist with object diffing and patching. Demos and more are included.
Welcome, I am here to introduce the new JavaScript library for object diffing & patching. @opentf/obj-diff Live Demo with Visualization Features Deep Objects Diffing Patching Supports comparing custom object types TypeScript Support Cross-Platform Supported Types Primitives Undefined Null Number String Boolean BigInt Objects Plain Objects, e.
g. {} Array Date Map Set Let's begin with some basics, and we will go through our examples to see the existing solutions and their issues. Diffing The diffing is the method used to compare objects, change detection, or object tracking. The diff result is called patches. It allows us to send fewer data to the backend to apply the patches. Patching The patching is the method used to re-create the modified object at the other end using the original object + Patches . Accuracy Here, we are going to find out how accurate our library is, and we need similar, popular libraries to compare against them. So, let's pick three popular libraries. Microdiff just-diff deep-object-diff Let us first create a test file. import { diff } from '@opentf/obj-diff'; import mDiff from "microdiff"; import { diff as jDiff } from "just-diff"; import { detailedDiff } from "deep-object-diff"; function run { try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } } Let's start our complete testing. 1. Simple with no difference between objects run; Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: 2. Simple with a single difference run; Micro Diff: , type: "CHANGE", value: 2, oldValue: 1, } ] Just Diff: , value: 2, } ] deep-object-diff: { added: {}, deleted: {}, updated: { a: 2, }, } diff: , v: 2, } ] 3. Primitives const a=; const b=; run; Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: All Working fine - no issues. 4. Number properties const a=; const b=; run; Micro Diff: , type: "CHANGE", value: Infinity, oldValue: -Infinity, } ] Just Diff: , value: NaN, }, { op: "replace", path: , value: Infinity, } ] deep-object-diff: { added: {}, deleted: {}, updated: { "0": NaN, "2": Infinity, }, } diff: , v: Infinity, } ] As you can see the just-diff & deep-object-diff incorrectly reporting the NaN value changed. 5. Simple, deep objects const a={ a: { b: { c: }, d: null }, text: 'Hello' } const b={ a: { b: { c: }, }, text: 'Hello World' } run; Micro Diff: , value: 4, }, { type: "CREATE", path: , value: 5, }, { type: "REMOVE", path: , oldValue: null, }, { path: , type: "CHANGE", value: "Hello World", oldValue: "Hello", } ] Just Diff: , }, { op: "replace", path: , value: "Hello World", }, { op: "add", path: , value: 4, }, { op: "add", path: , value: 5, } ] deep-object-diff: { added: { a: { b: { c: { '3': 4, '4': 5 } }, }, }, deleted: { a: { d: undefined, }, }, updated: { text: "Hello World", }, } diff: , v: 4, }, { t: 1, p: , v: 5, }, { t: 0, p: , }, { t: 2, p: , v: "Hello World", } ] All Working fine - no issues. 6. Different object types const a={ a: 1, b: 2, c: 3 } const b= run; Micro Diff: , oldValue: 1, }, { type: "REMOVE", path: , oldValue: 2, }, { type: "REMOVE", path: , oldValue: 3, }, { type: "CREATE", path: , value: 1, }, { type: "CREATE", path: , value: 2, }, { type: "CREATE", path: , value: 3, } ] Just Diff: , }, { op: "remove", path: , }, { op: "remove", path: , }, { op: "add", path: , value: 1, }, { op: "add", path: , value: 2, }, { op: "add", path: , value: 3, } ] deep-object-diff: { added: { "0": 1, "1": 2, "2": 3, }, deleted: { a: undefined, b: undefined, c: undefined, }, updated: {}, } diff: , v: , } ] As you can see, the other libraries are reporting changes within the original object, but the actual object type was changed from plain object to Array. Note: The empty path array { p: } in our diff result denotes the Root path. 7. Passing null as object const a={ a: 1, b: 2, c: 3 } const b=null run; Micro Diff: Error: newObj is not an Object. Just Diff: Error: both arguments must be objects or arrays deep-object-diff: { added: {}, deleted: {}, updated: null, } diff: , v: null, } ] 8. Commonly used object types: Maps & Sets const a={ obj: { m: new Map, s: new Set } } const b={ obj: { m: new Map, s: new Set } } run; Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: , v: Map { "x": 1, "y": 0, }, }, { t: 2, p: , v: Set { 1, 2, 3, 4, 5, }, } ] Performance For performance evaluation, we have created a benchmark file with some objects in our repo. The following table is the output. ┌───┬──────────────────┬─────────┬───────────────────┬────────┬─────────┐ │ │ Task Name │ ops/sec │ Average Time │ Margin │ Samples │ ├───┼──────────────────┼─────────┼───────────────────┼────────┼─────────┤ + 0 │ diff │ 252,694 │ 3957.346814404028 │ ±1.60% │ 25270 │ │ 1 │ microdiff │ 218,441 │ 4577.892286564301 │ ±0.92% │ 21845 │ │ 2 │ deep-object-diff │ 121,385 │ 8238.188318642591 │ ±1.66% │ 12139 │ │ 3 │ just-diff │ 105,292 │ 9497.35384615396 │ ±1.66% │ 10530 │ │ 4 │ deep-diff │ 160,802 │ 6218.820533549017 │ ±1.59% │ 16081 │ └───┴──────────────────┴─────────┴───────────────────┴────────┴─────────┘ Conclusion I hope I have justified the Fast & Accurate aspect of the library. We have FAQs section; you can learn more there. Please try to use it in your next project, and feel free to send us your feedback & issues you encounter via GitHub issues. Please don't forget to check out our important Articles: Introducing Our New JavaScript Standard Library You Don’t Need JavaScript Native Methods! Happy coding! 🚀 🙏 Thanks for reading. Welcome, I am here to introduce the new JavaScript library for object diffing & patching. @opentf/obj-diff @opentf/obj-diff Live Demo with Visualization Live Demo with Visualization Features Features Deep Objects Diffing Patching Supports comparing custom object types TypeScript Support Cross-Platform Deep Objects Diffing Deep Objects Diffing Patching Patching Supports comparing custom object types Supports comparing custom object types diffWith TypeScript Support TypeScript Support Cross-Platform Cross-Platform Supported Types Supported Types Primitives Undefined Null Number String Boolean BigInt Objects Plain Objects, e.g. {} Array Date Map Set Primitives Undefined Null Number String Boolean BigInt Undefined Null Number String Boolean BigInt Undefined Undefined Null Null Number Number String String Boolean Boolean BigInt BigInt Objects Plain Objects, e.g. {} Array Date Map Set Plain Objects, e.g. {} Array Date Map Set Plain Objects, e.g. {} Plain Objects, e.g. {} {} Array Array Date Date Map Map Set Set Let's begin with some basics, and we will go through our examples to see the existing solutions and their issues. Diffing The diffing is the method used to compare objects, change detection, or object tracking. The diff result is called patches . patches It allows us to send fewer data to the backend to apply the patches. Patching The patching is the method used to re-create the modified object at the other end using the original object + Patches . original Patches Accuracy Here, we are going to find out how accurate our library is, and we need similar, popular libraries to compare against them. So, let's pick three popular libraries. Microdiff just-diff deep-object-diff Microdiff Microdiff Microdiff just-diff just-diff just-diff deep-object-diff deep-object-diff deep-object-diff Let us first create a test file. import { diff } from '@opentf/obj-diff'; import mDiff from "microdiff"; import { diff as jDiff } from "just-diff"; import { detailedDiff } from "deep-object-diff"; function run { try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } } import { diff } from '@opentf/obj-diff'; import mDiff from "microdiff"; import { diff as jDiff } from "just-diff"; import { detailedDiff } from "deep-object-diff"; function run { try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } try { console.log; console.log); console.log; } catch { console.log; } } Let's start our complete testing. 1. Simple with no difference between objects run; run; Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: 2. Simple with a single difference run; run; Micro Diff: , type: "CHANGE", value: 2, oldValue: 1, } ] Just Diff: , value: 2, } ] deep-object-diff: { added: {}, deleted: {}, updated: { a: 2, }, } diff: , v: 2, } ] Micro Diff: , type: "CHANGE", value: 2, oldValue: 1, } ] Just Diff: , value: 2, } ] deep-object-diff: { added: {}, deleted: {}, updated: { a: 2, }, } diff: , v: 2, } ] 3. Primitives const a=; const b=; run; const a=; const b=; run; Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: All Working fine - no issues. 4. Number properties const a=; const b=; run; const a=; const b=; run; Micro Diff: , type: "CHANGE", value: Infinity, oldValue: -Infinity, } ] Just Diff: , value: NaN, }, { op: "replace", path: , value: Infinity, } ] deep-object-diff: { added: {}, deleted: {}, updated: { "0": NaN, "2": Infinity, }, } diff: , v: Infinity, } ] Micro Diff: , type: "CHANGE", value: Infinity, oldValue: -Infinity, } ] Just Diff: , value: NaN, }, { op: "replace", path: , value: Infinity, } ] deep-object-diff: { added: {}, deleted: {}, updated: { "0": NaN, "2": Infinity, }, } diff: , v: Infinity, } ] As you can see the just-diff & deep-object-diff incorrectly reporting the NaN value changed. just-diff deep-object-diff NaN 5. Simple, deep objects const a={ a: { b: { c: }, d: null }, text: 'Hello' } const b={ a: { b: { c: }, }, text: 'Hello World' } run; const a={ a: { b: { c: }, d: null }, text: 'Hello' } const b={ a: { b: { c: }, }, text: 'Hello World' } run; Micro Diff: , value: 4, }, { type: "CREATE", path: , value: 5, }, { type: "REMOVE", path: , oldValue: null, }, { path: , type: "CHANGE", value: "Hello World", oldValue: "Hello", } ] Just Diff: , }, { op: "replace", path: , value: "Hello World", }, { op: "add", path: , value: 4, }, { op: "add", path: , value: 5, } ] deep-object-diff: { added: { a: { b: { c: { '3': 4, '4': 5 } }, }, }, deleted: { a: { d: undefined, }, }, updated: { text: "Hello World", }, } diff: , v: 4, }, { t: 1, p: , v: 5, }, { t: 0, p: , }, { t: 2, p: , v: "Hello World", } ] Micro Diff: , value: 4, }, { type: "CREATE", path: , value: 5, }, { type: "REMOVE", path: , oldValue: null, }, { path: , type: "CHANGE", value: "Hello World", oldValue: "Hello", } ] Just Diff: , }, { op: "replace", path: , value: "Hello World", }, { op: "add", path: , value: 4, }, { op: "add", path: , value: 5, } ] deep-object-diff: { added: { a: { b: { c: { '3': 4, '4': 5 } }, }, }, deleted: { a: { d: undefined, }, }, updated: { text: "Hello World", }, } diff: , v: 4, }, { t: 1, p: , v: 5, }, { t: 0, p: , }, { t: 2, p: , v: "Hello World", } ] All Working fine - no issues. 6. Different object types const a={ a: 1, b: 2, c: 3 } const b= run; const a={ a: 1, b: 2, c: 3 } const b= run; Micro Diff: , oldValue: 1, }, { type: "REMOVE", path: , oldValue: 2, }, { type: "REMOVE", path: , oldValue: 3, }, { type: "CREATE", path: , value: 1, }, { type: "CREATE", path: , value: 2, }, { type: "CREATE", path: , value: 3, } ] Just Diff: , }, { op: "remove", path: , }, { op: "remove", path: , }, { op: "add", path: , value: 1, }, { op: "add", path: , value: 2, }, { op: "add", path: , value: 3, } ] deep-object-diff: { added: { "0": 1, "1": 2, "2": 3, }, deleted: { a: undefined, b: undefined, c: undefined, }, updated: {}, } diff: , v: , } ] Micro Diff: , oldValue: 1, }, { type: "REMOVE", path: , oldValue: 2, }, { type: "REMOVE", path: , oldValue: 3, }, { type: "CREATE", path: , value: 1, }, { type: "CREATE", path: , value: 2, }, { type: "CREATE", path: , value: 3, } ] Just Diff: , }, { op: "remove", path: , }, { op: "remove", path: , }, { op: "add", path: , value: 1, }, { op: "add", path: , value: 2, }, { op: "add", path: , value: 3, } ] deep-object-diff: { added: { "0": 1, "1": 2, "2": 3, }, deleted: { a: undefined, b: undefined, c: undefined, }, updated: {}, } diff: , v: , } ] As you can see, the other libraries are reporting changes within the original object, but the actual object type was changed from plain object to Array . plain object Array Note : The empty path array { p: } in our diff result denotes the Root path. Note { p: } Root 7. Passing null as object const a={ a: 1, b: 2, c: 3 } const b=null run; const a={ a: 1, b: 2, c: 3 } const b=null run; Micro Diff: Error: newObj is not an Object. Just Diff: Error: both arguments must be objects or arrays deep-object-diff: { added: {}, deleted: {}, updated: null, } diff: , v: null, } ] Micro Diff: Error: newObj is not an Object. Just Diff: Error: both arguments must be objects or arrays deep-object-diff: { added: {}, deleted: {}, updated: null, } diff: , v: null, } ] 8. Commonly used object types: Maps & Sets const a={ obj: { m: new Map, s: new Set } } const b={ obj: { m: new Map, s: new Set } } run; const a={ obj: { m: new Map, s: new Set } } const b={ obj: { m: new Map, s: new Set } } run; Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: , v: Map { "x": 1, "y": 0, }, }, { t: 2, p: , v: Set { 1, 2, 3, 4, 5, }, } ] Micro Diff: Just Diff: deep-object-diff: { added: {}, deleted: {}, updated: {}, } diff: , v: Map { "x": 1, "y": 0, }, }, { t: 2, p: , v: Set { 1, 2, 3, 4, 5, }, } ] Performance For performance evaluation, we have created a benchmark file with some objects in our repo. The following table is the output. ┌───┬──────────────────┬─────────┬───────────────────┬────────┬─────────┐ │ │ Task Name │ ops/sec │ Average Time │ Margin │ Samples │ ├───┼──────────────────┼─────────┼───────────────────┼────────┼─────────┤ + 0 │ diff │ 252,694 │ 3957.346814404028 │ ±1.60% │ 25270 │ │ 1 │ microdiff │ 218,441 │ 4577.892286564301 │ ±0.92% │ 21845 │ │ 2 │ deep-object-diff │ 121,385 │ 8238.188318642591 │ ±1.66% │ 12139 │ │ 3 │ just-diff │ 105,292 │ 9497.35384615396 │ ±1.66% │ 10530 │ │ 4 │ deep-diff │ 160,802 │ 6218.820533549017 │ ±1.59% │ 16081 │ └───┴──────────────────┴─────────┴───────────────────┴────────┴─────────┘ ┌───┬──────────────────┬─────────┬───────────────────┬────────┬─────────┐ │ │ Task Name │ ops/sec │ Average Time │ Margin │ Samples │ ├───┼──────────────────┼─────────┼───────────────────┼────────┼─────────┤ + 0 │ diff │ 252,694 │ 3957.346814404028 │ ±1.60% │ 25270 │ │ 1 │ microdiff │ 218,441 │ 4577.892286564301 │ ±0.92% │ 21845 │ │ 2 │ deep-object-diff │ 121,385 │ 8238.188318642591 │ ±1.66% │ 12139 │ │ 3 │ just-diff │ 105,292 │ 9497.35384615396 │ ±1.66% │ 10530 │ │ 4 │ deep-diff │ 160,802 │ 6218.820533549017 │ ±1.59% │ 16081 │ └───┴──────────────────┴─────────┴───────────────────┴────────┴─────────┘ Conclusion I hope I have justified the Fast & Accurate aspect of the library. Fast Accurate We have FAQs section; you can learn more there. FAQs Please try to use it in your next project, and feel free to send us your feedback & issues you encounter via GitHub issues. Please don't forget to check out our important Articles: important Introducing Our New JavaScript Standard Library You Don’t Need JavaScript Native Methods! Introducing Our New JavaScript Standard Library Introducing Our New JavaScript Standard Library Introducing Our New JavaScript Standard Library Introducing Our New JavaScript Standard Library You Don’t Need JavaScript Native Methods! You Don’t Need JavaScript Native Methods! You Don’t Need JavaScript Native Methods! You Don’t Need JavaScript Native Methods! Happy coding! 🚀 🙏 Thanks for reading.
United States Latest News, United States Headlines
Similar News:You can also read news stories similar to this one that we have collected from other news sources.
Introducing the Hot 100 Challenge: A New Mobile Game for Music FansThe Hot 100 Challenge is a groundbreaking mobile game that combines fantasy-sports-style gameplay with the music industry. Participants will listen to a new song each day and predict its peak position on the charts. The winner will receive a grand prize of $25,000 cash.
Read more »
Introducing Strands: The New York Times' Tricky Word Search PuzzleStrands is a brand new daily puzzle from the New York Times that puts a twist on the classic word search. Test your skills and find the hidden theme words in the grid of letters.
Read more »
Helen Hall Library staff will no longer check library cards at the doorStaff would first ask for cards at the door, but now the League City library believes people are sufficiently aware of a new policy to combat capacity challenges.
Read more »
San Diego Public Library launches program to erase library fines, fees for youthThe San Diego Public Library is offering one-time forgiveness for young people who have had their accounts suspended for unreturned items, and starting Thursday…
Read more »
Cedar Park library foundation kicks off fundraising campaign for new libraryThe Cedar Park Library Foundation aims to raise $1.5M for the city's new library, doubling in size and featuring enhanced collections and spaces.
Read more »
Dallas Library Plan Recommends Overhaul of Central Library, Renovations for 11 OthersThe council unanimously voted to reimagine the 'malfunctioning,' 'dark' and'confusing' downtown central library.
Read more »