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:

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( 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