Project Description

H5DS (HTML5 Design software) This is a WEB-based H5 production tool. It allows people who cannot write code to quickly and easily create H5 pages.
H5DS official Git ( https://github.com/h5ds/h5ds ), Simplified Chinese UTF8 version, please convert other versions by yourself
h5ds official website: http://www.h5ds.com

Related websites

h5ds official website: http://www.h5ds.com
h5ds technical documentation: http://doc.h5ds.com

Technical exchange group

QQ group 1 549856478

Installation instructions

1. Prepare the operating environment

Running environment: node v6.x npm 5.x

2. Execute the command to install dependencies

Execute npm install to install third-party dependencies. If npm installation fails, you can try cnpm installation. For specific instructions, see: http://npm.taobao.org/

It may take a long time to install dependencies, please be patient. Under normal circumstances, after the installation is successful, no error will appear on the console.

Successful installation:

3. After successful installation, start the project

After the installation is successful, npm start will automatically start the project. Open the browser http://localhost:8787 to access the project.

After successful startup:

Technology Architecture:

1. Function introduction
2. Technical Architecture
3. Performance optimization
4. Details sharing

1. Project function introduction

I haven’t written a technical article for a long time. This time I will share with you a recent project, a large tool project built with react+mobx+jquery. View project URL .

If you have used Yiqixiu, maka or Baidu H5, friends of Sohu Kuaizhan should be very familiar with this tool. Users can easily edit HTML5 codes through operations such as dragging and dropping, which greatly saves development costs. You can also edit the template twice to quickly generate new H5 pages. Today's protagonist is H5DS (full name: HTML5 Design software), which is a WEB H5 production tool. It allows people who cannot write code to quickly and easily create H5 pages.

Before making a product, planning is very important, as it will directly determine the success or failure of the project! Some projects require 1 year, 2 years or more to plan. Only when you plan well can you make a lot of progress! At this time, we need to escape from the programmer's thinking, and don't look at the entire project purely from the perspective of program development!

Product thinking: When programmers ask product managers to understand some codes, programmers must also have product thinking. Before making a product, they must have a picture in mind of what kind of product they want to make (large projects, small projects, boutique projects , just do some practice...)? Which user group is it for (to C, to B, for designers, for programmers...)? Product positioning (for high-end users, for low-end users)? What are the demand characteristics of the user group (understand programming? Understand design?…)? User’s operating habits (for example, most designers use PS, do they follow PS’s design style?…)? Wait, there are a lot of questions. Before making a product, try to summarize these questions first, and then give the product a better positioning.
Programmer thinking: An excellent tool has high scalability, is convenient and easy to use, and has excellent performance. Our goal is not only to be a tool, but also to be a highly scalable tool like vscode. How to solve the problem of high scalability ? How to extract the core of the editor? These should be things programmers consider.
How to promote? How to pack? How does it work? How to make this project popular and accepted and recognized by everyone? How to get more programmers involved? These are issues considered from the perspective of an operator.

Taking into account the above points, we are not only an excellent programmer, but also an excellent product manager, and a down-to-earth operator. When we do the early stage of the project, whether it is products, programmers, operation promotion, etc. You have to take into consideration that although one person cannot do all the work, he should know enough not to be fooled by others. If your goal is to be a manager rather than just a programmer, then you should master some of these abilities.

2. Technical architecture plan

The technical selection is as follows:

Front-end: react, mobx, less, jquery

Backend: nodejs, mysql, ngnix

Tools: babel, webpack, gulp, eslint

The technology selection of H5DS is basically a JS technology stack. It can only be said that this technology is very front-end. Next, I will explain why we need to choose this model.

why react ?

The idea of making the entire H5 page is as follows: Although the generated H5 page is a single page, there are still multiple sub-pages under the single page. We can roughly divide it into three categories. The APP contains the content of the entire page. Page contains the content of a single subpage, and Layer is the element in each subpage. This way we can understand our thinking very clearly. Each H5 page corresponds to a JSON file, and the JSON is converted into a JSX template, and then the JSX is converted into HTML through renderToStaticMarkup. I think this picture is the most effective illustration. React’s powerful server-side rendering function can directly convert JSX for HTML. No one has said that the server rendering method can only be used on the server side. Here I use it directly on the front end, and the effect is very good. The specific method renderToStaticMarkup

// 这个JSON 文件大致格式
{
...,
"name": "H5页面名称",
"desc": "H5页面描述信息",
"pic": "主图URL",
"pages": [ // H5由多个子页面组成
{
...,
layers: [] // 子页面由多个图层组成
}
]
}
// JSX -> HTML 的方法
import { renderToStaticMarkup } from 'react-dom/server';
renderToStaticMarkup(JSX);

why mobx ?

I am a wild developer who likes to use the simplest code to implement business, and mobx is more flexible and changeable, without so many restrictions and constraints, while redux is like a kid from a famous family who sticks to the rules. Although constraints can make the code more standardized, if It is a specification based on a large amount of code. I still feel that it has been divorced from the actual meaning of technology. It also increases maintenance costs. I am definitely not a qualified programmer. If I can code less and do more, I would rather sacrifice the specification by any means. .

why jquery ?

Many friends said to me before: If you use react, don’t use jquery. React can do what jquery can do, so why use other libraries? Not standardized at all. In fact, my answer is often like this: I am more willful and like jquery! Why is it generally believed that jquery and react should not coexist? There are roughly the following points:

From the perspective of the framework, react can modify the dom through the state, and the data will go from the virtual DOM to the real DOM. If jquery is used to directly modify the DOM, the result is that the state and the real DOM cannot correspond. React It also loses the meaning of his existence.
From an ideological point of view, jquery goes against the idea of directly operating dom and react.

But the actual business is ever-changing. Which framework can say that it can easily implement all businesses? jquery is a tool library and react is a ui library. If used properly, I personally think it is a very good choice when combined! Sometimes using jquery to operate DOM can beat react in terms of performance. Such as drag sorting function!

Now that we’ve talked about technology selection, let’s talk about the architecture of the entire project!

If you look closely at the third module, you will find that it is actually independent of the middle business layer, which is more conducive to project expansion and secondary development. Here we define the third module as the kernel. Based on this kernel, we can build the web layer, server layer, and extended layer layer. The kernel is more like a ueditor and can be directly referenced in the project, so that the kernel is no longer dependent on Any server can be used independently.

3. Performance optimization

When working on tool projects, performance is a very big challenge. I have summarized the following common performance optimization points:

data caching. (indexeddb,localStorage,localSession)
Interactive optimization. (anti-shake debounce, throttling, event delegation)
memory release. (componentWillUnmount, DOM release, reference address release)

4. Sharing of technical details

1. Performance optimization solution for drag sorting

Drag sorting can be implemented using pure react. The business should look like this:

If you use jquery + react to achieve:

The second method combined with jquery greatly reduces the execution of the render function in react, without having to perform diff operations multiple times, and achieves a high-performance drag solution.

2. Full model adaptation solution

We fixed the size of the display area to 320 x 514. To be compatible with all models, we need to scale it, either 100% high or 100% wide. We use JS to calculate the scaling ratio of the display area, and then center it. It can achieve maximum compatibility with various models. The background is global, and the schematic diagrams respectively represent examples of common sizes of mobile phones, the processing of height exceeding, and the processing of width exceeding. The red part is the display area, the gray part is the original size ratio of 320*486, and the black shaded part is the gray part for scale scaling. filled area.

Copyright Notice

You can download the code of this site, but you are prohibited from developing any derivative, modified or third-party version based on the entire or any part of this product for redistribution without permission . You can download the source code for study or commercial use without permission. Pay any fees. No company or individual may remove the editor's LOGO and official link address or related copyright information without obtaining written authorization from Sichuan Aiqu Technology Co., Ltd. If you violate the regulations, Sichuan Aiqu Technology Co., Ltd. Ltd. reserves the right to suspend or terminate your qualification to use H5DS products at any time and reserves the right to pursue relevant legal liabilities.

Replenish

Source code structure diagram

Recommend a useful H5 web page editing tool with easy-to-use code and open source code