How to make a Javascript drawing rendering engine adapter

I. Problem definition

The principle of a good adapter is when 135 need to speak, can speak, two forty-six speak nonsense when still can cope with it, Sunday can not work overtime to start writing the article 😄

1.1 What is a Javascript Drawing engine

Can be called by Javascript according to the API provided to draw different graphics rendering tools, such as EChartJS chart library, D3JS drawing engine, EChart underlying ZRender drawing engine, AntV series drawing engine, etc..

1.2 Why make adapters

The function of the adapter is to connect the previous and the next, which can be considered as the business layer of the software, the middle layer is the adaptation layer, and the bottom layer is a variety of graphics rendering engines. The purpose of this is that it is difficult to solve all problems with one engine in a variety of graphs with numerous requirements, and it is difficult to cover all scenarios with a good graph library such as EChartJS, so an inclusive “adaptation” layer is needed to coordinate complex business scenarios.

Two, do a good job of an adapter to solve the pain points

The pain points of adaptation are typical business scenarios, which require technical solutions to be found

2.1 How to integrate different drawing engines

Let’s start with a few examples. Take classic EChart for example. Before using EChart, Init and pass in the Dom node of Mount. Finally, intent. dispose can be used to release resources.

EChart’s line chart code is as follows:

import * as echarts from "echarts";

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: "category".data: ["Mon"."Tue"."Wed"."Thu"."Fri"."Sat"."Sun"]},yAxis: {
    type: "value"
  },
  series: [{data: [150.230.224.218.135.147.260].type: "line"}}; option && myChart.setOption(option);Copy the code

Next, let’s take a look at D3JS basic line chart example 2. After asynchronously loading the CSV data source, add object drawing directly to d3 SVG instance.

<! DOCTYPEhtml>
<meta charset="utf-8" />

<! -- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<! -- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
Copy the code

var margin = { top: 10.right: 30.bottom: 30.left: 60 },
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3
  .select("#my_dataviz")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform"."translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv(
  "https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv".// When reading the csv, I must format variables:
  function(d) {
    return { date: d3.timeParse("%Y-%m-%d")(d.date), value: d.value };
  },

  // Now I can use this dataset:
  function(data) {
    // Add X axis --> it is a date format
    var x = d3
      .scaleTime()
      .domain(
        d3.extent(data, function(d) {
          return d.date;
        })
      )
      .range([0, width]);
    svg
      .append("g")
      .attr("transform"."translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3
      .scaleLinear()
      .domain([
        0,
        d3.max(data, function(d) {
          return +d.value;
        })
      ])
      .range([height, 0]);
    svg.append("g").call(d3.axisLeft(y));

    // Add the line
    svg
      .append("path")
      .datum(data)
      .attr("fill"."none")
      .attr("stroke"."steelblue")
      .attr("stroke-width".1.5)
      .attr(
        "d",
        d3
          .line()
          .x(function(d) {
            return x(d.date);
          })
          .y(function(d) {
            returny(d.value); })); });Copy the code

As you can see from the two examples above, if the diagram rendering engine is used as a drawing tool, then the adapter’s job is to translate the drawing timing, and the drawing tool only needs to be adapted to the corresponding life cycle of the adapter. The work of the adapter is completely dependent on the life cycle scheduling of the front-end framework, while the underlying drawing engine does not care about the implementation of the front-end framework, so as to achieve the decoupling of the front-end framework and the drawing engine.

2.2 How to Resolve Operating Environment Conflicts

Runtime environment conflicts are mainly caused by incompatible multi-version runtime library dependencies within the same hosting environment, for example, some charts based on EChart V3 cannot coexist with those based on V5.

Typical solutions include IFrame and Qiankun framework 3. Iframe is still the mainstream isolation solution, while Ali’s Qiankun simulated THE JS sandbox mechanism in various hack ways. Essentially, the latter is more flexible and convenient, but requires a large number of compatible solutions. Because it is not native support, there is no way to solve difficult problems, of course, there are some objections to iframe solution 4.

2.3 How to Optimize Resource Reloading

When resources are well isolated by means of iframe, the problem is that the same resource is loaded multiple times. For example, iframe Container1 and Iframe Container2 both rely on loDash and React libraries. The solution is to pre-load resources to reduce repeated requests.

Typical solutions:

• Generate the sub-components inside iframe by generating components, and inject the common class library into the sub-components at the same time. This scheme requires that the project itself has loaded the resource class library.
• To cache static resource requests on the same network using the cache mechanism of browser requests, you need to set the cache policy and expiration policy 5.
• Use CSS mechanisms transform or visibility to switch the contents of different containers by sharing the same dependent containers.

2.4 Injecting configuration based on service logic

There are two types of data sources for adapters: business configuration data, which is based on the configuration capabilities of the business system, and drawing data sets, which are also based on data acquisition of different business logic.

With the management of the adapter life cycle, configuration data and drawing data are easily passed to the drawing engine for data assembly and transformation at the drawing engine level.

conclusion

The above proposed that an adapter needs to complete several points and the way to solve the pain points, if there is any omission, please also point out, welcome to discuss 👏.

Refer to the reference