How to Make Cross Framework Component?

Cross Framework Component (CFC) is an effective structure to support a variety of frameworks based on a single common module.

Cross Framework Component referred to Cross Platform’s approach. Cross Platform is a structure that allows you to use a single source code on a variety of platforms (operating systems, devices) and can be used in iOS, Android, and Windows through tools such as Xamarin, Flutter, NativeScript, and React Native.

The Cross Framework Component is also available in React, Angular, Vue, and so on as a single vanilla component.

There are two ways to use a traditional vanilla component in the framework:

1. Simple wrapping of existing vanilla components
2. Create a new framework component only

Simple wrapping of existing vanilla components

The 1st (simple wrapping of existing vanilla components) is the most common method used by users. Because it’s very simple and easy.

However, this is an appropriate method when there is no change(add / remove / move) in the DOM . Because the framework synchronizes your data to DOM. However, if the Vanilla component manipulates the DOM, it prevents the framework from synchronizing to the DOM.

From that moment on, the relationship between data and DOM in the framework becomes tangled. In fact, removing the DOM from a component can cause the following error:

DOM Error in React

Because the framework is looking for a DOM that has been removed. So if you want to use simple wrapping of existing vanilla components, you don’t have to manipulate the DOM.

Create a new framework component only

The 2nd(Create a new framework component only) is to create a new framework-specific component. But what’s wrong with making the already existing vanilla components dedicated to the framework again?

Of course, since the framework-specific component is created, the desired functions of the framework can work properly. However, if you re-create an existing vanilla component into a framework-only component, it becomes very difficult to maintain as there are multiple codes in each framework. Therefore, this is a good way to start with a framework component without a vanilla component.

egjs has come to think of the Cross Framework Component to solve the problems with the above two methods.

Here’s how Cross Framework Component solved the problem and how to apply it in a vanilla component.

Principles of Cross Framework Component

As I said earlier, the framework is syncing to DOM, but the vanilla component is interfering with the synchronization.

So Cross Framework Component doesn’t manipulate the DOM in the vanilla component. Instead, after synchronization from framework to DOM, synchronize the synchronized DOM to data one more time.

This way, you can get the data you want by clearing the sync order without interrupting each other. So how do we synchronize from DOM to data?

It is also used in components to synchronize the framework to DOM.

Synchronize in the same way

For example, there are framework data of 1, 2, 3, 4, 5, 6, DOM in order of 1, 2, 3, 4, 5, 6 and component data in order of 1, 2, 3, 4, 5, 6.

Let’s assume that you’re moving the framework data 6 forward framework data 3.

Then, by synchronizing the framework data in DOM, the 6 element in DOM moves forward to the 3 element.

Finally, by synchronizing the last DOM, the vanilla component data 6 also moves forward to the 3 data.

You can synchronize it in the same way as the framework. However, I don’t know how to sync with React, Angular, or Vue, and all of the methods used by React, Angular, and Vue are different. So instead of creating it in the same way, you can create a similar method and make the results the same.

ListDiffer

ListDiffer is a comparison library that detects changes in list (or array) and tracks the progress of the changes.

There are certainly similar comparison functions in React, Angular, and Vue that track the change process.
However, egjs created ListDiffer, a library that is available in React, Angular, and Vue, and synchronize through this library. More information can be found in the following article:

Introducing ListDiffer to track changes in data

This allows you to synchronize from DOM to Component without knowing how to use it in the framework.

In case of cross-platforms, this requires a supporter that can connect the framework API with the operating system API to operate on a variety of operating systems.

The same is true of the Cross Framework Component. Operating under various frameworks requires a supporter that can connect the ListDiffer API with the Framework API.

• Use in React : react-children-differ
• Use in Angular : ngx-children-differ
• Use in Vue : vue-children-differ

Component uses list-differ APIs, but if you create them for React, Angular and Vue, the result is React, Angular and Vue component can be created easily.

Preparation for Cross Framework Component

There are two methods for applying the Cross Framework Component: using data tracking(efficiency processing method) and not using data tracking(one-step processing method).

Using data tracking(efficiency processing method)

Using data tracking is a good way to process as few times as possible.

1. ListDIffer for Framework
2. rendering externalization option
3. insert method
4. remove method

The internal DOM manipulation of the vanilla component must be optional in order to make the existing vanilla component the Cross Framework Component. This method was referred to as rendering externalization option. When you use vanilla components, you will use DOM methods such as appendChild and removeChild, but in the framework, you can block DOM methods such as appendChild and removeChild by activating the rendering externalization option.

You can use it by writing the code in the following order: removed > ordered > added:

1. removed is an array of indexes that you want to. Remove data from the index through the remove method.
2. ordered is an array of the starting indexes to move and the indexes to arrive. The remove method lets you move digits by removing data from that index and adding it to the index that will arrive through the insert method.
3. added is an array of indexes to add. Add data to the index via insert method.

If the method matches, this code can actually be applied just by copying/pasting.

Not using data tracking(one-step processing method)

Not using data tracking is a good way to handle it in batches rather than individually handling situations, such as Using data tracking(efficiency processing method).

The following items are required to create a Not using data tracking method:

1. ListDIffer for Framework
2. rendering externalization options
3. sync method

The method using data tracking had an insert method, a remove method, but the method that does not use data tracking requires a syncing method that handles batch processing.

If you do not want to use data tracking, you can omit it according to the situation, and remember the order maintained > added.

Flicking 3 is created in a way that does not use data tracking, and the following code is part of Flicking.

With maintained, you can import only the maintained portion of the previous data and add new data through added.

The last method caculateSize() of Flicking gets the size of the DOM in batches. If you use data tracking the layout can occur each time, and performance problems can arise.

Flicking 3

Flicking is supported by three key frameworks: react-flicking, ngx-flicking, and vue-flicking, and can use most of the features of Flicking.

Conclusion

This article describes the features, principles, and usage of Cross Framework Component.

The next module to which Cross Framework Component will be applied is InfiniteGrid. it offers limited support from React, but you’ll soon see most of the features available in React, Angular, and Vue components.

Many peopleare using egjs, and are applying a lot of frameworks like React, Angular, and Vue. Previously, it had to take twice as long to process because it was managed with two sets of codes.In the future, Flicking and InfiniteGrid will be integrated into the Cross Framework Component structure to provide a reliable response to your enquiries and allow you to meet a variety of features faster.

Let me finish introducing Cross Framework Component.

Thank you.