Introducing ListDiffer to track changes in data
ListDiffer
is a comparison library that detects changes in list (or array) and tracks the progress of the changes. The change values that can be obtained by comparing lists are data added, removed, and changed(moved). But can not we know the process when we change from the previous data to the current data? So we created the ability to track changes in added, removed, and changed in the ListDiffer
.
The purpose of data tracking is to make current data from previous data with minimal access. A typical example is a framework such as React, Angular, and Vue that synchronizes data to DOM. When you synchronize data to DOM, changing the total number of data decreases performance, so you can use data tracking to minimize changes to DOM to help improve performance.
The following body will detail how data changes and tracking can be used.
Data changes
There are four pieces of information that can be obtained when data changes.
added
: An array of indexes with data added from the current list.removed
: An array of indexes whose data was removed from the previous list.changed
: The index array that changed from the previous list to the current list. Each element in an array is paired with an index from the previous list and the current list.maintained
: An array of previous and current indexes whose data is not deleted from the previous data.
Here is an example of a simple word comparison using added
, removed
:
Data tracking
When you change from previous data to current data, you can track the change process by combining two pieces of information: ordered
, pureChanged
.
ordered(relative process of change)
: Represents the intermediate step betweenremoved
andadded
and is an array for synchronizing previous data to current data. The elements in each array are comprised of [before, after] index pairs, which are usually less than or equal to the number ofchanged
.pureChanged(absolute process of change)
: This is a subset ofchanged
and represents the absolute index array ofordered
.
As mentioned above, the purpose of data tracking
is to synchronize from the previous data to the current data with minimal access. With ordered
and pureChanged
, you can improve performance by making fewer changes using tracking than with changes.
For example, if 1, 2, 3, 4, 5, 6, 7
have changed to 4, 3, 8, 2, 1, 7
, there are five indexed data (changed
) except for adding 8 data
.
But even if you have five changed data, you don’t have to move all items. With ordered
, pureChanged
, the following animation shows how you can move less than five.
If you use ordered
, pureChanged
, like the animation above, you can switch places with only three movements.
If the above process is represented by a code:
The following is an example of synchronizing from Data to DOM: You can optimize performance by moving the DOM to a minimum.
ChildrenDiffer to track changes in DOM
Cross Framework Component (CFC)
is an effective structure to support a variety of frameworks based on a single common module. The main principle of CFC
is to track changes in DOM and change data.
See the following link for more information on the Cross Framework Component
.
ListDiffer
uses the Map API to create time complexity O(1). However, because Map APIs are only supported in modern browsers, older browsers do not work properly and perform very poorly. So in ListDiffer
, where DOM is the data, we created ChildrenDiffer
, which is optimized for DOM comparison. It is the same as using ListDiffer
, and callback function is not required.
The following example synchronizes the Data to the DOM via ListDiffer
and synchronizes the DOM to Data via ChildrenDiffer
.
Next, you must have a ChildrenDiffer
for each framework in order to apply CFC
. This is because each framework has different syntax and usage patterns. The following is a framework dedicated ChildrenDiffer
that supports CFC
.
- Use in React : react-children-differ
- Use in Angular : ngx-children-differ
- Use in Vue : vue-children-differ
Conclusion
In this article, I explained the features of ListDiffer
and how they could be used, and I showed them in a demo. This ListDiffer
library was used to create a Cross Framework Component (CFC)
.
Flicking
is a carousel component that is CFC
enabled to support various frameworks. In addition, it is very easy to import Flicking
in just a few lines of code outside the main framework.
The next project to apply CFC
, Infinitegrid
, is also ready to use as React, Angular, and Vue components.
The code and project can be found on GitHub. Please refer to the API document for instructions on using methods/ events, etc.
Let me finish this article with the introduction of the ListDiffer
usage.
To use with npm or script, run the following command:
- npm
npm install @egjs/list-differ
- script
<script src="//naver.github.io/egjs-list-differ/release/latest/dist/list-differ.min.js"></script>
If you have any questions or requests, feel free to write them down on Github Issues.
Thank you.