preface
Some time ago, I have been busy with the work of data visualization, such as how to achieve drag-and-drop generation of large visual screen, how to customize visual chart interaction and data import scheme, etc., this demand is very large in b-side enterprises, so it is very valuable to explore.
This article is not related to data visualization, but through the abstraction of the bottom technology, it is applied to the visualization of H5 page building, through technical means to achieve drag and drop generation of H5 page. This also has a lot of application scenarios, such as we need to develop a mobile terminal website, an H5 marketing page, H5 activity page, if there is such a fool drag and drop tool to generate H5 page, will greatly improve our work efficiency.
Next I will be on theH5 Page Visual editor -DooringDo a detailed project analysis and principle interpretation, to bring you in-depth understanding of the h5 visual building page principle and technical implementation. The H5 editor preview is as follows:
Github address: Portal
Technology stack
- React is one of the main front-end frameworks (React, Vue, Angular) and is more suitable for developing flexible and complex applications
- Dva’s main React application state management tool, based on Redux
- Less CSS precompiled language, easy to write structured CSS
- Umi’s React based front-end integrated solution
- Antd is known as the React component library
- Axios’s powerful front-end request library
- React-dnd is a react-based drag and drop component solution with an excellent design philosophy
- Qrcode. react based on react qrcode generation plug-in
- Zarm based on react mobile UI library, easy to achieve beautiful H5 applications
- Koa based on nodeJS development framework of the last generation, easy to achieve nodeJS based back end development
- @KOA/Router Server routing middleware based on KOA2
- Ramda excellent functional JS library
Demand analysis
Let’s take a look before we think about requirements analysisDooringUse demonstration:
- Draggable Components library
- The canvas that holds the component
- Component editor FormEditor
- Header toolBar toolBar
We can use react-dND and React-Draggable, which are popular in the community. Since our canvas can be dragged and shrunk, we need to enable the canvas here. Please refer to the following for the specific implementation.
The second part is the H5 editor, which is the core function and will be examined in detail later. Also preview, generate preview link, savejsonFiles, save templates these functions are essentially for usjsonFile operation, but one of the common means of visual construction technology. Here’s a demo of these features:
Basis of preparation
Our H5 page visualization editor uses UMI as a scaffolding tool.
Umi is an extensible enterprise front-end application framework based on routing. It supports both configured routing and contractual routing to ensure complete routing functions and extend functions. It is then accompanied by a lifecycle complete plug-in architecture that covers every lifecycle from source code to build artifacts, supporting various functional extensions and business requirements.
In this way, we will not pay attention to tedious engineering configuration details, and can directly use antD and LESS solutions in the project, and integrate the current popular CSS module, which can facilitate the modular development of CSS in the project. The specific application process of UMI project creation is as follows:
// Create and enter the project directory
mkdir dooring && cd dooring
// Create an UMI application
yarn create @umijs/umi-app
// Install dependencies
yarn // Or use NPM install
Copy the codeSimple three-step strategy can easily build our project project, is it saved a lot of trouble? (Let’s make sure our local node version is 10.13 or above before using these methods.)
After the project is set up, we will adjust the directory structure as follows:
Dooring ├ ─ SRC │ ├ ─ assets │ │ └ ─ yay. JPG │ ├ ─ components │ ├ ─ layouts │ │ ├ ─ __tests__ │ │ │ └ ─ index. The test. The js │ │ ├ ─ Index. CSS │ │ └ ─ index. Js │ ├ ─ models │ │ └ ─ editor. Js │ ├ ─ pages │ │ ├ ─ __tests__ │ │ │ └ ─ index. The test. The js │ │ ├ ─ editor │ │ │ ├ ─ components │ │ │ │ └ ─ FormEditor │ │ │ │ ├ ─ index. The js │ │ │ │ └ ─ but less │ │ │ ├ ─ container. Js │ │ │ ├ ─ Index. Js │ │ │ └ ─ but less │ │ ├ ─ index. The CSS │ │ └ ─ index. The js │ ├ ─ service │ │ └ ─ editor. Js │ ├ ─ app. Js │ └ ─ global. The CSS ├ ─ package. Json └ ─ webpack. Config. JsCopy the codeThe Editor in the Page directory is our main page, components is our common components, models and Services are mainly responsible for handling the dVA state management logic, other parts you can define more freely. This is for reference only.
After the project was created, we also needed to install the necessary third-party components for visualization. After researching the selected components from the community, the author adopted the following solution:
- React-dnd React Drag component
- React – Color React color selection component for the edit color section of the H5 editor
- React-draggable is used to drag components or canvas
- React. Qrcode is based on the qrcode generation component of react, which can generate qrcode in the way of react component
The above components can be installed before running the project.
The body of the
After the best project development preparation, let’s start designing our H5 page visual editor, Dooring.
H5 editor implementation
H5 visual editor mainly needs four parts, which have been analyzed at the beginning of this article. Here we use the diagram to consolidate:
Realize the principle of
As we all know, there are several popular visual page construction schemes as follows:
- Online editing code implementation
- Online editing json implementation
- Codeless drag-and-drop implementation (underlying is based on JSON configuration files)
The author made a comparison of advantages and disadvantages, as follows:
| plan | Degree of customization | disadvantages |
|---|---|---|
| Edit code online | The highest | High cost of use, unfriendly to non-technical personnel, low efficiency |
| Edit JSON online | higher | Requires familiarity with JSON, has a cost to use, is unfriendly to non-technical people, and is not very efficient |
| Drag-and-drop implementation without code | high | Low cost, no threshold operation, high efficiency |
From the above analysis, in order to develop a low threshold, suitable for anyone’s visual editor, the author will use the third scheme to achieve, currently there are many existing products on the market, such as Yiqixiu, Rabbit Exhibition, Baidu H5 and so on.The implementation principle is actually based on JSON. We transform our configured pages into JSON data through visual means, and finally generate H5 site dynamically based on JSON renderer.
Data structure design
In order to provide component customization, we need to define a set of highly available data structures so that we can realize the maintainability benefits of changing component requirements.
Before we start designing data structures, let’s break down the modules:
After the above analysis, the author designed a data structure similar to the following:
"Text": {
"editData": [{"key": "text"."name": "Text"."type": "Text"
},
{
"key": "color"."name": "Title Color"."type": "Color"
},
{
"key": "fontSize"."name": "Font size"."type": "Number"
},
{
"key": "align"."name": "Alignment"."type": "Select"."range": [{"key": "left"."text": "Left aligned"
},
{
"key": "center"."text": "Center align"
},
{
"key": "right"."text": "Right align"}]}, {"key": "lineHeight"."name": High "line"."type": "Number"}]."config": {
"text": "I am the text"."color": "Rgba (60,60,60,1)"."fontSize": 18."align": "center"."lineHeight": 2}}Copy the codeWith this standardized structure, we can easily implement the functionality we need to edit the page, and it is easy to extend later by simply adding configurations to editData. As for the implementation of a dynamic form editor, there are many solutions, and I have written about them before, so I won’t go into the details here.
Build a common form management configuration platform based on React (vUE)
Component library design
Component library design considerations of an important issue is the problem and volume rendering, once the component libraries have become more and more, it means that the page loads will be very slow, so we need to implement the asynchronous loading component and the ability to code division, umi provides such functions, we can based on it provides apis to realize their frontal components as needed.
import { dynamic } from 'umi';
export default dynamic({
loader: async function() {
// The comment webpackChunkName instructs WebPack to separate HugeA by that name
const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA');
returnHugeA; }});Copy the codeThrough the above way to define the parcel we each component, so it can achieve on-demand loaded, but the best advice is not to need to each of these components on demand loading and unpacking, for the title, the notification bar, header, footer these components, we can put it in a group, such not only will not affect the loading speed, It also reduces some HTTP requests.
Here is a simple example of a component implementation, easy for everyone to understand:
const Header = memo((props) = > {
const {
bgColor,
logo,
logoText,
fontSize,
color
} = props
return <header className={styles.header} style={{backgroundColor: bgColor}} >
<div className={styles.logo}>
<img src={logo && logo[0].url} alt={logoText} />
</div>
<div className={styles.title} style={{fontSize, color}} >{ logoText }</div>
</header>
})
Copy the codeThe props property of the Header component above is defined entirely by the JSON structure we designed earlier to collect and pass receipts to the Header component during user editing. The final step is to transfer these components dynamically to the Dynamic component, which is described above. You can render dynamically according to your own implementation.
Implement preview function
The preview function is relatively simple, we just need to throw the user-generated JSON data into the H5 renderer, here we need to make a rendering page for the preview component alone. Here are a few previews:
Online download function
For this, we need to use an open source library called File-saver, which is designed to solve the difficulty of downloading files on the front end. Specific use examples:
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"] and {type: "text/plain; charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
Copy the codeThe above code can be implemented to download the incoming data as a TXT file, if it is a Blob, is it possible to download images, HTML online? The answer is yes, so our download task adopts this scheme to achieve.
The back-end part is implemented
The back end is not the focus of this article because it involves a lot of knowledge, so here are a few points. You can implement back end services using completely different technologies, such as PHP, Java, Python, or Egg. The author uses KOA here. The main functions are as follows:
- Save the template
- Real machine principle of data source storage
- User-related functions
- H5 picture bed and static file hosting
Specific code can refer to the author of another full stack development article
Implement a CMS full stack project from 0 to 1 based on nodeJS
The pattern is basically the same.
Github address: Dooring Portal
In the late planning
The plan for the later Dooring project is as follows:
- Add a template library module
- Add online download site code function
- Enrich component library components and add visual components
- Add the configuration interaction function
- Component segmentation and code optimization
- Add typescript support and unit testing
Latest Iteration features
- Optimized the H5 editor interface
- Add a visual component — a progress bar
- Fixed previewing style issue in Win, added prompt page for mobile terminal access
The last
If you want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to “Interesting Talk front-end” to learn and discuss together, and explore the boundary of the front-end.
🏆 technology project phase iii | data visualization of those things…
More recommended
- Summary of Typescript core knowledge and actual case analysis of the project
- Quickly implement SSR (server-side rendering) in your Vue/React app
- Preliminary study of micro front-end architecture and my front-end technology inventory
- Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
- Implement a CMS full stack project from 0 to 1 based on nodeJS (middle) (source included)
- CMS full stack project Vue and React (part 2)