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.
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:
- Simple wrapping of existing vanilla components
- 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(
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:
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.
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.
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.
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
Finally, by synchronizing the last DOM, the
vanilla component data 6 also moves forward to the
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 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
is a comparison library that detects changes in list (or array) and tracks the progress of the changes. The change…
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.
- ListDIffer for Framework
- rendering externalization option
- insert method
- 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:
removedis an array of indexes that you want to. Remove data from the index through the remove method.
orderedis 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.
addedis 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:
- ListDIffer for Framework
- rendering externalization options
- sync 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.
do not want to use data tracking, you can omit it according to the situation, and remember the order
Flicking 3 is created in a way that does not use data tracking, and the following code is part of Flicking.
maintained, you can import only the maintained portion of the previous data and add new data through
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.
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,
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.