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.

1. added: An array of indexes with data added from the current list.
2. removed: An array of indexes whose data was removed from the previous list.
3. 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.
4. 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.

1. ordered(relative process of change): Represents the intermediate step between removed and added 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 of changed.
2. pureChanged(absolute process of change): This is a subset of changed and represents the absolute index array of ordered.

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.

before

changing

after

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.

before

changing

after

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.

How to Make 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 CFCenabled 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.