As a front-end brick-remover, do you spend 80% of your time coding campaign pages? In the e-commerce industry, every festival is a period of overtime hours for the front end brick-moving workers, and they can even receive emails from leaders or operations to modify copywriting and pictures one second before they go online.

This paper will introduce the idea of building a platform for the creation of thematic activity pages on mobile terminals.

A typical e-commerce activity page

  1. Page display pictures mainly
  2. Click must be compatible with app
  3. The list of items has a fixed number of styles
  4. Operations especially like to use the floor navigation menu
  5. The countdown is sure to come.
  6. The bottom menu bar jumps to a branch venue
  7. A small amount of animation
  8. Tabs toggle to add page display content
  9. Lazy loading of images improves page rendering speed
  10. Back to the top this universal essential
  11. Wechat share except Taobao

Analysis of pain points of other projects: Page function the same, needs urgent, time is tight, rolled off the production, research and development is lower than fast, front-end engineer unsustainable development endless activity page, need to adopt activity page visual build tools, generated directly by the operating personnel/product personnel page/modify activities, research and development personnel to provide satisfying the needs of the business activities page template.

Existing page making platform

Maybe you’ve experimented with other existing page-making platforms and feel like you can’t even use them as a front-end developer? The picture below is an online page making tool, do you think it is more complicated than PS?

Examples of other visual scaffolding tools

Aliyun swallowtail

  • Support page Data editing, for operation and product personnel, editing freedom for non-nested components
  • At present, the production operation, activity page function on the best tool
  • Provides templates for page building and supports custom templates
  • Configuration form based on Schema generation, configuration form operation function is perfect

Ice Alife ice

  • Component Tree editing is supported for mid-background developers
  • Edit dOF for unnested components, using “Material-Block”
  • Non-front-end developers can quickly build usable, standards-compliant pages
  • Page output in source code, a way of front-end servitization

Baidu H5

  • Support HTML Tree editing, for the front-end small white, edit freedom for HTML elements
  • Do H5 good tools, the function is very powerful, on the animation editing function to do meticulous

Meituan takeout front visual interface assembly platform — Lego

  • Dynamic Logic editing is supported for middle and background developers, and the editing freedom is nested components
  • A way to servitize the front end
  • In meituan internal support for many business pages, there is no public network services, the system can only be understood through its introduction articles

gaea-editor

  • Component Tree editing is supported for mid-background developers, with editing freedom to nested components
  • Page drag generation, very complete implementation
  • Used for page design, so biased toward style control of page elements
  • The technical article has a deep understanding of the data flow of visual construction tools: Visual online editor architecture design

Vue-Layout

  • Vue visual layout based on UI components, tools to generate Vue code
  • Component Tree editing is supported for mid-background developers, with editing freedom to nested components
  • The tool works well

Component development thinking

Above open source/non-open source visual page production platform, without exception, there are high thresholds to use, many professional terms, complex operation, etc.

My ideal visual operation page generation tool features:

  • Componentization and page template are used to quickly generate pages
  • A non-nested component hierarchy simplifies style layout and configuration operations
  • Develop parametric configuration data and automatically generate configuration forms
  • Background rendering or static file generation is used to decouple the editing system from the front-end framework of components
  • Components can be expanded freely and the front-end framework can be selected freely under the editing system conventions

Balance the ease of use of the platform with the flexibility of the presentation

  1. Using THE MVV * feature of VUejS, the configuration can be easily visible, greatly reducing the difficulty of user use and project development;
  2. The page is only horizontally cut and divided into components (the width of components is 100%). The universal components with absolute layout are abandoned. The interaction of dragging and positioning is adopted in the absolute layout of components.
  3. A small number of page global absolute/fixed components (e.g. bottom navigation, back to top, etc.), with special handling + predefined way;
  4. Component design should consider the use of background graphics, or provide the user with a choice of multiple fixed styles.

The segmentation component is shown in the following figure:

Ii. How to handle click or jump in APP nesting

Unified definition of page click events, different jump modes for different environments, handling the compatibility of in-app jumps. You can also define specific events for specific components: for example, an item list component that dynamically retrieves item data, and clicking on the event redirects to the item details page by default.

var url = JSON.parse(target.dataset.url)
var type = target.dataset.type
// System internal page
if (type === 'inside') {
    if ('isAPP') {
        openApp(url)
    } else {
        location.href = url
    }
}
if (type === 'ouside') {
    location.href = url
}
if (type === 'tel') {
    location.href = 'tel:' + url
}
if (type === 'mail') {
    location.href = 'mailto:' + url
}
// Get a coupon
if (type === 'coupon') {
    getCoupon(url)
}
Copy the code

Create small pages on demand (CSS and JS on demand)

With the increase of components, to prevent page resources too much impact on page rendering speed, here in addition to the public code, according to the used component, load the CSS and JS code used by the component.

// Generate script tags on demand<script src="http://example.com/??swiper.min.js,timeout.min.js,form.min.js"><script>
// Add style depending on the component used, or package it directly into the HTML header
<link ref="stylesheet" href="http://example.com/??form.min.css,swiper.min.css,timeout.min.css"/>
Copy the code

Floor navigation menus and lazy loading of pictures require components with predefined heights

In the process of implementing floor navigation menu and lazy loading of pictures, it is found that predefined page height is needed, which requires all components to expand their own height, and prohibits components that expand their height after loading dynamic content.

<div style=Height: 6.85 vw; "">
    <img data-src="http://img.o" class="lazyload">
</div>
Copy the code

5. Balance between caching and non-caching

The cache time for generating static pages should not be too long. It must be able to update pages in a short time or support users to push updates manually, which can be processed with the CDN system used by the platform.

6. Decouple the configuration information from the back-end interface

The number of components increases greatly with system iteration, and the configurations of each component are not uniform. The configuration information is generated as JSON strings and stored in the database. Decouple the back-end storage and interface logic, and the back-end only needs to provide a add, delete, or modify interface.

7. Decouple page generation system from front-end H5 framework

H5 consumer can use native, jQuery, vuejs and other technical solutions. I prefer to use native (my application project scheme), jQuery has little significance in mobile terminal, vuejs and other frameworks increase the complexity of consumption, and there is no need to introduce MVV * framework for pure presentation pages like activity thematic pages.

Eight, whether can be extended to generate mall home page

System design is a data production platform, not responsible for consumption (see and preview are also two types of consumption), can generate customized configuration information for Web or APP consumption. Imagine: The APP side needs predefined component styles.

Balance between difficulty of development and difficulty of use

This is mostly about system the use of simple, on my system, developed to do a few more functions similar components and without too much difficulty, shuffling diagram components, for example, whether all the functional integration of swiper to a component, my idea is to separate, operating personnel like intuitive easy to use, he wants component functions could be so simple.

Components, for example,

Image component: as the component in the picture above is used to divide the first component, we can just use a picture component, upload the cut picture, and then define the click area (similar to the hot area, which is generated by dragging and dragging) to realize the click to jump (PS: actually the picture component can meet 80% of the page layout requirements) :

Countdown component: the picture above has a countdown function, how to try to cover the usual use requirements? I adopted the principle of picture style, and internally defined each countdown digital style by users at will. The design is as follows:

Other components are not listed one by one, interested partners can try to package the components themselves, also can be separated from the backend to get data from the components, such as the “list of goods” component I encapsulated in the actual project, but do not forget the principle of packaging components: picture style, height should be spread out.

Project open source address: Github address

References

[Issue 1282] Page visualization building tool past life and present life

[Issue 1524] Key technical points of page visualization building tools