H5

Overview

Context: Enterprise digital transformation has increased the need for low-code. The traditional business development cycle is long and the cost is high. It requires professional programmers to develop and maintain, and the cost is too high.

Abstract

The low-code platform allows development, product, design and other roles to work in one space around the same product around the following process.

• The product needs to complete the prototype design, some simple interface calls such as basic jumps and dialog boxes can also be completed together
• Design styles, animations and multi-resolution adaptation of prototypes that directly modify the product
• Low-code engineers mainly solve the debugging and connection of complex services

graph TD
业务方提出需求[Customer put demand]
产品设计原型和基本逻辑[Product Design Prototype and Basic Logic]
设计美化产品原型[Design and beautify product prototypes]
低码工程师完善产品逻辑[Low-code engineers improve product logic]
发布测试上线[Release test online]

业务方提出需求 --> 产品设计原型和基本逻辑
业务方提出需求 --> 设计美化产品原型
业务方提出需求 --> 低码工程师完善产品逻辑
产品设计原型和基本逻辑 --> 发布测试上线
设计美化产品原型 --> 发布测试上线
低码工程师完善产品逻辑 --> 发布测试上线

Incremental Delivery

• For customers with their own development team, or even those with secondary development needs, we directly deliver the source code
• If you have your own operation and maintenance requirements, we can deliver images and packages
• For customers without deployment capabilities, we will directly deploy online accessible addresses through the deployment platform

graph TD
    低代码编辑[Low-code editing]
    源码[Source code]
    代码仓库[Code repository]
    镜像或包[Image or package]
    部署平台[Deployment platform]
    交付客户[Delivery to customers]

低代码编辑 --> 源码
源码 --> 代码仓库 --> 交付客户
源码 --> 镜像或包 --> 交付客户
源码 --> 部署平台 --> 交付客户

Platform Architecture

Low-code plays a role in connecting the past and the future in the entire platform system

• Gluing down different microservices, you can re-encapsulate the original logic of the microservices, or define a new set of front-end instances.
• Upward formation of solutions for various ends and industries.

flowchart TD
   
    subgraph 行业数字化解决方案[Industry digital solutions]
        Goverment  
        Education
        Finance
        Industry
        E-Commerce
        Newretail
    end
    
    subgraph 多端发布[Multi-end Launch]
        Web  
        IOS
        Android
        Applet
        H5
    end
    
    subgraph 可视化搭建[Visual Construction]
        Component 
        Interact
        Preview
        Degugging
        Cloudbuild
    end
    
    subgraph 微服务生态[Microservice Eco]
        E-Commerce  
       Education
        Account
        Content
        Marketing
    end
    
    subgraph 云原生[Cloud native]
        Container  
        Service
        InfoSecurity
        BigData
        LogAlert
    end
    
    行业数字化解决方案 --> 多端发布
    多端发布 --> 可视化搭建
    可视化搭建 --> 微服务生态
    微服务生态 --> 云原生

Editor Architecture

The low-code editor relies on resource data as content, and the low-code platform itself also needs to be able to generate resource codes and resource data, so as to complete the closed-loop and ecological construction of the entirelink.

Describe the business with an abstract data model and prepare for translation to different sides.

Source code translation needs to be able to extend translators of different languages and different frameworks on the basic data model.

flowchart TD  
    subgraph 资源数据[Resource data]
        Template --> Component & Method
        Component --> Definition & Interaction & Dependencies

        Method --> Definition & Dependencies & Snippets
    end
    
    subgraph 可视化搭建[Visualization]
        Resources
        Stage
        Panel
        Editing
        Record
        Preview
    end
    
    subgraph 模型数据[Model data]
        组件树[Component tree]  
        方法XML[Method XML]
    end
    
    subgraph 源码翻译[Translation]
        Vue
        微信小程序[Applet]
        App
    end
    
    资源数据 --> 可视化搭建
    可视化搭建 --> 模型数据
    模型数据 --> 源码翻译
    可视化搭建 --> 资源数据

H5 side implementation

The architecture needs to support the inheritance function of different terminals. Currently, Web PC is used as the base to inherit the implementation of multiple terminals.

The following takes the H5 terminal as an example

1. Resource

• In terms of component library, H5 has its own component library that is quite different from PC, but the basic components are reusable, such as layout, pictures, etc.

• In terms of methods, most of them can be reused because they are all js functions.

2. Visual construction

There will be obvious differences between the stage and the preview

• The resolution is generally 375 as the standard
• is to simulate mobile touch events

3. Source code translation

Most of the translations into Vue are the same, and there are some differences such as:

• H5 needs to consider the conversion of px and rem to adapt to different model resolutions, and the PC side is more to deal with the generation of responsive code.

flowchart TD  
    subgraph 资源数据[Resource data]
        H5组件[H5 Component]
        H5方法[H5 Method]
    end
    
    subgraph 可视化搭建[Visualization]
        H5舞台[H5 Stage]
        H5预览[H5 Preview]
    end
    
    subgraph 模型数据[Model data]
     
    end
    
    subgraph 源码翻译[Translation]
        H5Vue[H5 Vue]
    end
    
    资源数据 --> 可视化搭建
    可视化搭建 --> 模型数据
    模型数据 --> 源码翻译
    可视化搭建 --> 资源数据