How do you develop cross-framework components?


Author: Daybrush

Crazy geek


Reproduction without permission is strictly forbidden

Cross Framework Component (CFC)Is an efficient structure based on a single generic module that supports a variety of frameworks.

How do you develop cross-framework components?

Cross-frame componentWith the help ofcross-platformMethods.cross-platformIs a structure that allows you to use a single source code on a variety of platforms (operating systems, devices), and can be used on iOS, Android, and Windows with tools like Xamarin, Flutter, NativeScript, and React Native.

Cross-frame componentIt is also available as a single native component in React, Angular, Vue, etc.

There are two ways to use traditional native components in the framework:

  1. Simply wrap existing native components
  2. Create a new framework component

Simply wrap existing native components

The first method (a simple wrapper around an existing native component) is the most commonly used by users. Because it’s so easy.

However, when there is no change in the DOM (add/remove/move), this is an appropriate method. Because the framework will synchronize your data to the DOM. However, if the native component manipulates the DOM, the framework is prevented from synchronizing with the DOM.

How do you develop cross-framework components?

The relationship between the data in the framework and the DOM gets messy. In fact, removing the DOM from a component can result in the following error:

How do you develop cross-framework components?

DOM errors in React

Because the framework is looking for the DOM that has been deleted. So if you want to use a simple wrapper around existing native components, don’t manipulate the DOM.

Create a new framework component

The second method (creating a new framework component) is to create a new component for a particular framework. But what’s wrong with rededicating existing native components to the framework?

Of course, because the frame-specific components are created, the required functionality of the framework works. However, if existing native components are recreated as framework components, maintenance becomes very difficult because there are multiple pieces of code in each framework. So it’s a good idea to start from scratch with framework components that don’t have native components.

egjsIt has been considered for useCross-frame componentTo solve the problems in the above two methods.

The following is aCross-frame componentHow to solve the problem and how to apply it to native components.

Principles of cross-frame components

As I said earlier, the framework needs to synchronize with the DOM, but native components interfere with synchronization.

How do you develop cross-framework components?

soCross frame constructionDOM in the native component is not manipulated. And after synchronizing from the framework to the DOM, the synchronized DOM is synchronized to the data again.

How do you develop cross-framework components?

In this way, you can get the data you need through a clear synchronization sequence without breaking each other. So how do we synchronize from the DOM to the data?

It is also used on components to synchronize the framework with the DOM.

How do you develop cross-framework components?

Synchronize in the same way

Suppose there is frame data1, 2, 3, 4, 5, 6, the order of the data in the DOM is1, 2, 3, 4, 5, 6, the order of component data is1,2,3,4,5,6

How do you develop cross-framework components?

If you want to frame the data6Move to frame data3The front.

How do you develop cross-framework components?

Then, by synchronizing the frame data in the DOM, element 6 in the DOM is moved before element 3.

How do you develop cross-framework components?

Finally, synchronize the final DOM, the data in the native component6Also move to data3In front of.

How do you develop cross-framework components?

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


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

How do you develop cross-framework components?

There must be similar comparison functions in React, Angular, and Vue to track changes.

However, egjs is createdListDifferReact, a library that you can use on React, Angular, and Vue, and synchronize through it. More information can be found in the following article:…

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

How do you develop cross-framework components?

In a cross-platform scenario, this requires a supporter to connect the framework API to the operating system API in order to operate on various operating systems.

Cross-frame componentSame thing. Operating in a variety of frameworks requires a supporter, can beListDifferThe API is connected to the framework API.

  • Used forReactreact-children-differ
  • Used forAngularngx-children-different
  • Used forVuevue-children-different

How do you develop cross-framework components?

React, Angular, and Vue components can be easily created using the list-different API.

Preparation of cross-frame components

There are two ways to apply cross-frame components:Using data tracking (efficiency processing)andNo data tracing (one-step processing)

Using data tracking (efficiency processing)

Use data trackingIs a good way to minimize the number of processing times.

  1. ListDIffer for Framework
  2. Render externalization options
  3. Insert method
  4. Delete methods

The native component’s internal DOM manipulation must be optional in order for the existing native component to becomeCross-frame component. This method is calledRender externalization option. DOM methods like appendChild and removeChild will be used when you use native components, but in the framework you can block DOM methods like appendChild and removeChild by activating the render externalization option.

How do you develop cross-framework components?

You can write code to use it in the following order:removed > ordered> added

const { removed, added, ordered, pureChanged, list } = result;

removed.forEach(index => {
ordered.forEach(([from, to], i) => {
    inst.insert(to, list[pureChanged[i][1]]);
added.forEach(index => {
    inst.insert(index, list[index]);
  1. removedIt’s the index array you want. Remove data from index by removing method.
  2. orderedIs the start and end index of the array to be moved. The remove method allows you to move Numbers by removing data from the index and adding it to the index to be accessed through the insert method.
  3. addedIs the index array to add. Add the data to the index through the insert method.

If the method matches, you actually just need to copy/paste this code.

No data tracing (one-step processing)

Do not use data tracingIs a good way to batch processing **.

In order to realize”Do not use the data trace methodThe following items are required:

  1. ListDIffer for Framework
  2. Render externalization options
  3. Synchronized methods

Use data trackingThere is an insert method, a remove method, butDo not use data tracingMethod requires a synchronous method for batch processing.

If you areYou don’t want to use data tracing, you can omit it as appropriate, and remember the order of processingmaintained > added

In the way of using the data tracking create Flicking 3, the following code is part of the Flicking.

function sync(result) {
    const { maintained, removed, added, list } = result;
    const prevItems = this.items;
    const newItems = [];
    maintained.forEach(([beforeIndex, afterIndex]) => {
        newItems[afterIndex] = prevItems[beforeIndex];
    added.forEach(i => {
        newItems[i] = new Item(list[i]);
    this.items = newItems;

usemaintain, you can only import the maintenance part of the previous data and passaddedAdd new data.

Flicking the last methodcaculateSize()Bulk gets the size of the DOM. If you use”Data tracking“, the layout will be done every time, and performance problems may occur.

Flicking 3

How do you develop cross-framework components?

FlickSupported by three key frameworks:react-flickingngx-flickingandvue-flickingMost of the functions, and can use the Flicking.


This article introducesCross-frame componentThe characteristics, principles, and USES of.

InfiniteGridYou will also use a cross-frame component approach. It offers limited React support, but you’ll soon see a lot of functionality in React, Angular, and Vue components.

Many people are using egjs and are using many frameworks like React, Angular, and Vue. It used to take twice as long to process because it was managed with two sets of code. In the future,FlickingandInfiniteGridWill be integrated into the cross-frame component structure to provide reliable responses to your queries, allowing you to meet the requirements of various functions faster.

This article first sent WeChat messages public number: front-end pioneer

Welcome to scan the two-dimensional code to follow the public account, every day to push you the new front end technical articles

How do you develop cross-framework components?

Welcome to the rest of this column:

  • Deep understanding of Shadow DOM v1
  • Step by step, teach you how to use WebVR to realize virtual reality games
  • 13 modern CSS frameworks to help you streamline your development
  • Pick up BootstrapVue quickly
  • How does a JavaScript engine work? Everything you need to know, from the call stack to Promise
  • WebSocket action: real-time communication between Node and React
  • 20 interview questions about Git
  • In-depth parsing of node. js console.log
  • What exactly is node. js?
  • 30 minutes to build an API server with node. js
  • Javascript object copy
  • What to do if a programmer makes less than 30K a month by the age of 30
  • 14 best JavaScript data visualization libraries
  • 8 top level VS Code extensions for the front end
  • Node.js multithreading complete guide
  • HTML to PDF 4 schemes and implementation

  • More articles…