background

Page visual building tool is a common operation tool in Internet companies, which enables operators to quickly generate and publish pages and improve the efficiency of page online. And without the intervention of developers, saving development manpower.

Page visualization tools to build a page example:

But designing and developing such tools from scratch isn’t easy. The page visual construction framework pipeline maintained by the author provides the core functions of the page visual construction, eliminating the difficulty of realizing the page visual construction tool from zero.

This article mainly contains the following contents:

  • The pain point of repeated development of active pages.
  • Technical essentials for developing visual build tools.
  • Ideal operation page visual building tool.
  • Open source page building framework pipeline introduction.

Activity page development pain

Activity page features

In front-end business, it is often necessary to develop product introduction page/marketing page/activity page/picture display page and so on. These requirements have the following characteristics:

  • Page similarity: The page layout and service logic are fixed.
  • High demand: Multiple requests per week or even per day.
  • Rapid iteration: short development time and tight launch time.
  • Low cost performance: repetitive development tasks consume communication time and manpower of all parties.

Active page general development process

Active page general development flowchart

process

  1. Operation/product page request.
  2. Follow the project process into the development process.
  3. Complete page development according to the design draft.
  4. Tests perform page tests.
  5. Operation and maintenance page online.
  6. Operation/product page acceptance.

Pain points

  • Multiple participation, repeated communication, serial process.
  • Page online cycle is long, unable to quickly respond to activity requirements.
  • People get bogged down in duplication, busy and inefficient.

Better processes

For high frequency and repetitive activity page development, the industry generally makes the page configuration, configuration work from the developer to the product/operations and other demanders; Developers and designers only need to provide configuration page support. A better process of active page generation relies on page visualization system. Now.

Better flow chart for active page development

process

  1. Operation/product page request.
  2. Operations/products select appropriate page templates in the page visual building system for page building.
  3. Page automatic release online, page requirements completed, the end of the process.
  4. If the operation/product does not find a suitable template.
  5. Develop the page template development, and add the page template to the page visual construction system.
  6. Operations/products continueFlow 2.

At the same time, with the continuous enrichment of page templates in the page visual construction system, the dependence of new page requirements on developers is gradually reduced, which can be directly completed by operations/products.

Page visual building tool

Better activity page development process depends on page visual building system, the key is to have page visual building tools to provide technical support. Page visual building tool through filling in the configuration data form, drag page components and other visual page editing methods, to achieve page generation or modification.

However, it is not easy to design and develop a visual scaffolding tool from scratch, and there are several technical points that need to be understood and paid attention to.

The technical essentials of the page visual building tool

From a technical point of view, there are several technical points to consider when designing and developing a visual scaffolding tool for a page:

  • Page componentization
  • The page template
  • Page visual editing
  • Component hierarchy
  • Page packaging
  • Real-time preview
  • Page component development

Page componentization

Advantages of componentization

The basic unit of a page is HTML elements, but HTML elements cannot contain business logic, and HTML elements are directly combined into a page, too complex and inefficient.

Vuejs.org/images/comp…

A better way to organize your pages is to componentize, as shown in the figure above. A component is a wrapper around HTML elements, element layout and style, and business logic. The business logic is encapsulated by the component and the configuration fields of the component are exposed externally through component properties (Props). By using page componentization, complex page visualization can be transformed into two simple operations:

  • Component tree combination, page visual construction into a visual combination of page components.
  • Component configuration editing, which translates editing of page content into modification of component configuration properties (props).

Page front-end framework

Page componentization depends on the front-end framework. The architecture mode of the page visual scaffolding tool has limitations on the page front-end framework: Select the front-end framework supported by the page visual scaffolding tool. For example, the page visual builder only supports vUe-based pages, so the front-end framework for page componentization can only choose VUE.

However, the front-end framework chosen by the front end technology team is usually already used to support the existing business and precipitates a certain number of technical and business components. If you need to switch the front-end framework for the page visualization builder, the cost will be significant.

So the ideal page visualization tool should be decouple from the front end of the page, as shown in the figure below. The technical components and business components that the technical team precipitates in a front-end framework can be reused in the pages of the page visualization builder tool.

Technical difficulty 1: page visual building tools and page front-end framework decouple.

Of course, the front-end business has selected a front-end framework, the development of page visualization tools specifically supporting the front-end framework, is also the choice to efficiently achieve the goal.

The page template

Page templates contain complete business logic to help quickly generate business pages. Different page templates apply to different service functions. Select an appropriate page template from the template library and derive the default service page. Then visually edit the default page to generate the target service page.

Cloud Butterfly page template list:

www.yunfengdie.com/

The template has default data for the page; For componentized pages, templates are selected components from a component library with default configuration data for each component.

As shown in the figure above, the page component library has components A, B, C, D… Page template 1 is composed of components A, B and C in the component library, realizing A complete business function; Page template two consists of components A, B, and X from the component library, which accomplish another complete business function.

Page editor

A page is composed of page components, and page editing is actually a recombination of page components, and edit the content of each page component. Page editing consists of two parts: editing page components and editing page content.

Edit page components

The component tree

A page can be organized as a component tree, as shown in the figure below. The nodes in the tree are page components, and page components can contain sub-components.

In code writing, a component tree is declared through the combination of component tags, and page resources are generated at packaging time, and page resources are loaded at runtime to render the page.

React and Vue component tree declarations

One possible way to edit a page component is to dynamically add components to the page source and then repackage the generated page. For example, after replacing the Left component with NewLeft component in a visual way, replace the Left label with NewLeft label in the component tree declaration of the source code.

Dynamic components

Some front-end frameworks support dynamic components, which can be dynamically rendered based on component tree declarations rather than having to define the component tree structure of the page before building. When implementing visual component editing on a dynamic component page, you can edit only the component tree declaration file and then pass the component tree declaration into a pre-packed page for rendering. Using dynamic components can quickly generate new pages without repackaging.

An example of Vue rendering components dynamically based on component tree declarations is shown below. Vue dynamic components are declared using the Compontent keyword and instantiated using the IS attribute. In react, the component is a JS object that returns the component by component name in JSX.

Edit page content

Componentized page content editing is to configure component properties (Props) of each component on the page.

Component Configuration data

A component consists of component properties (Props), component State (State), component HTML Template (Template), component business logic (Javascript), and component Style layout (Style).

The configuration data of a component is injected into the component through the Props exposed by the component. Inside the component, Props are distributed as constants to other component contents, such as State, Template, Javascript, and Style, and rendered into the view by the component contents.

Component differentiation

Components are carriers of business contents. Different business contents are encapsulated in different business components. So components in a page Template are differentiated in terms of Props, State, Template, Javascript, Style, and so on. The data structure of component configuration data is also differentiated when editing different component content.

The page shown below contains three components: a header component, a spacer component, and a weather component. The configuration data of the header component are header title and header picture, etc. The configuration data of the interval go component is interval prompt text, etc. The configuration data of the weather component is the city name. Different components require different configuration data.

You need to define data structures and field types for different configuration data of each component. The ideal configuration data format is JSON because it supports data nesting and is front-end friendly.

Component configuration form

Page visualization tools are mainly used by operations/products. If operations/products directly edit component configuration data in text format, operation is not friendly and error prone. You need to provide visual editing that uses a Form Form to fill in configuration data. Form forms are the basic Form of data interaction on a page and have no technical barriers to use by non-developers. Using a configuration form to fill in configuration data has two benefits:

  • Complete configuration form interaction function, easy to use.
  • Configuration forms can add validation logic to avoid filling in incorrect configuration data.

As shown in the figure above, component configuration forms are also differentiated due to the differences in component configuration data, and a corresponding configuration form needs to be provided for each component in the component library. Writing a form page for each component is a lot of work; For complex configuration items, the form page may require more writing effort than the page component development effort. You need to focus on providing a way to configure the form.

Technical difficulty 2: how to generate the configuration data edit form in the simplest way.

Component hierarchy

The component tree defines the hierarchical relationship between the parent and sibling components. The parent and child components are related through data flows and events: data is passed from the parent component’s State to the Props of the child component; Changes to a child component trigger an Event to notify the parent component.

The impact of hierarchy on data flow and layout

The page builder modifies the component data flow when editing the component tree. The Props and State of different components are heterogeneous. When editing the component tree, you need to deal with the impact of the hierarchical relationship between different components on the data flow. In the figure below, the State of the parent component only contains Props of child component A. Mount child component B as A child component of the parent component. If the parent component does not have Props of child component B, child component B cannot be rendered.

Similarly, different components have different style layouts. When editing the component tree, you need to deal with the layout effects caused by the hierarchical relationship between different components.

Alligator. IO/react/using…

Adding a block-level component as a child to a parent component that is inline may result in the inline component being stretched by the block-level component.

Therefore, when designing the component tree editing function of the page visual building tool, it is necessary to focus on the hierarchical relationship of the component tree to solve the problems of data dependence between components and layout adaptation between components. The page visual building tool needs to formulate rules and constraints for component nesting, and ensure the normal rendering of the component tree after visual editing through component nesting rules.

Technical difficulty 3: How to organize the hierarchy of page components.

Examples of scaffolding tools using component nesting:

Github.com/jaweii/Vue-…

Front-end framework components that are not nested

As you can imagine, the nesting of components makes the design and development of visual page builder more difficult.

We noticed that the main platform for marketing activities is mobile, and the common layout strategy of mobile pages is: full width, high scroll. If the front frame components are all set to full width and the components are displayed in order only vertically in the browser, there is no need to nest components in composition — all components are siblings.

This full page width component is very suitable for building mobile page scenarios: while carrying page logic, it makes page editing easier, and users only need to deal with the order of components, not the nesting of components.

On the mobile end, the page visualization building tools using non-nested component hierarchy rules include: Aliyun Fengdi, Pipeline, etc.

Picture of Aliyun Swallowtail butterfly:

Tools for visualizing PC side background system pages can also use non-nested component hierarchy rules, such as Ali’s Flying ice:

Page preview

Page real-time preview is a necessary part of the page visualization tool, users can view and verify the effect of visual editing through page preview.

Page preview example:

Visual editing by the user includes modifying the component tree and modifying the component configuration data. As shown below, after modifying the page, the user needs to re-render the page component to get a new preview page.

There are two ways to implement page preview: page mount and background rendering.

Page mount

Page mount refers to rendering user-edited effects on an element node (div) of the front page of the editor. The page mounting flowchart is as follows:

Using page mount preview mode, editor front page needs to provide component library component rendering environment (component library front-end framework); In order to achieve front-end rendering, editor front-end source code needs to introduce component library component source code, the subsequent component library update, the editor needs to be updated synchronously. The page mounting mode has the following features:

  • Realizing page preview technology is feasible and real-time rendering speed is fast.
  • In order to achieve rendering, the editor technology selection should be consistent with the component library front-end framework.
  • The editor source is coupled with the component library source.
  • The code logic and style layout of component library components after rendering can contaminate the editor page.

The background render

Background rendering refers to rendering and generating the result page of user editing in the background. The front page of the editor loads and displays the result page through iframe. Background rendering flow chart is as follows:

Using the preview mode of background rendering, the front page of the editor does not need to render the components of the component library; You don’t even need the component source code, just the description of each component. Background rendering has the following features:

  • The editor can be separated from the component library front-end framework.
  • The editor and component library components can be separated.
  • This prevents the logic and style of the preview page from contaminating the editor environment.
  • Background and component libraries are required to provide page background rendering capability, and require background rendering speed, users need “real-time” preview.

Difficulty 4: how to realize the fast background rendering of component library, so as to realize the separation of editor and front-end framework of component library.

Build the page

Page construction is a necessary step to generate page resources with component front-end source code: development construction is needed to debug the page during development; You may need to rebuild to generate preview pages after visual editing; Production builds are required prior to release.

“Real-time” preview is required when building a visual page, which requires efficient page construction and fast construction and packaging. Furthermore, background rendering is actually very similar to server rendering. Can we learn from the technical ideas of server rendering?

Custom templates and component development

The implementation of the page visualization tool in services requires customized development of service components and page templates based on different service scenarios. This puts forward three requirements for the page visualization builder:

  • The page visual scaffolding tool should support the existing front-end framework of the business.

    Avoid the workload and fragmentation of subsequent custom component and template development. We want to reuse existing front-end framework components rather than rewrite them with another front-end framework.

  • Components and templates should be written in a way that follows simple writing conventions to prevent developers from getting used to them and writing them uncomfortable.

  • Customize templates and components and debug and test in development mode.

    Page visual scaffolding tools necessarily limit how page templates and page components can be encoded. This requires fewer constraints on page templates and page components for page visualization tools, and fewer points of intrusion into the way front-end framework code is organized.

The ideal activity page visual building tool

Page visual building tools, need to do some conventions and constraints on the page, in visual building to follow the tool conventions and constraints to edit the page. From the technical key points of page visual building tool, we can conclude the ideal form of active page visual building tool.

Page visual building tools have different framework design and implementation methods, different functions have different applicable scenarios, detailed classification can refer to the author’s previous article: page visual building tools in the past.

An overview of the

Operating the page building tool to achieve the template-based page generation; The logic function of the page is encapsulated in the component, the page configuration data is declared and the configuration form is provided. By filling the data of the configuration form, a small amount of page editing can be done to complete the business page construction.

Components that are not nested

In the choice of editing degrees of freedom, choose components that are not nested. The components are spread across the width of the page and arranged in order in the direction of the page height. Solve data flow problems caused by nested components. Non-nested components are shown in the red boxes below.

Configure the form to be generated automatically

The purpose of configuration forms is to generate and constrain JSON configuration data. JSON Schema has been developed to describe JSON and automatically generate forms. According to the JSON Schema specification, the JSON data can be described and the configuration form can be dynamically rendered. In addition, the JSON Schema can verify the format of the edited data to avoid editing errors. This is much simpler and more efficient than writing a form page.

Github.com/json-editor…

The syntax of JSON Schema is not very concise, and the Schema syntax of Cloud Fengdie is more concise. However, the syntax of Cloud Fengdie is not supported by the open source form generation library, so JSON Schema is the best in open source practice.

Ideal activity page builder features

  • Componentization and page template are used to improve the efficiency of page generation.
  • Simplify data flow and style layout with a non-nested component hierarchy.
  • JSON Schema is used to declare configuration data and automatically generate configuration forms.
  • Background rendering 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.

Page visualization framework construction Pipeline

Introduction to the

Pipeline is an open source page visualization framework, mainly maintained by the author. Pipeline stands for Pipeline, and is expected to assemble active pages as efficiently as a factory Pipeline.

The so-called framework, is that it realizes the basic function of the page visual construction, solves the basic difficulties of the page visual construction, can let the developer quickly have the ability to build the page, and support private deployment and secondary development.

Project Information:

  • Project address: github.com/page-pipepl…
  • Experience address: page – pipepline. Making. IO/pipeline – Ed…
  • Project documentation: github.com/page-pipepl…

Function Demo

Visual editing

As shown in the GIF, pipeline’s visual editing capabilities include:

  • Visually modify global page Settings, such as changing the page theme color.
  • Visually modify component content on a page, such as modifying component images and replacing component text.
  • Preview the editing effect of the page in real time, and get the page built immediately.
  • The page supports user interaction.

The component editor

As shown in the GIF, component editing capabilities of Pipeline include:

  • Dynamically add and delete page components.
  • Visual component drag and drop to insert component library components into the page component list.
  • Components can contain business logic (network requests and user interactions).

Supported front-end frameworks

Pipeline decouples the editor from the page’s front-end framework and supports different front-end frameworks. The so-called supported front-end framework is the transformation of component editing mode and engineering construction mode of a front-end framework according to the constraint rules of pipeline, so that the front-end framework page can be visualized in pipeline.

Vue, React, and Omi are already supported and can theoretically support any front-end framework.

Characteristics of framework

  • Open source page visualization framework.
  • Custom page configurable fields.
  • Components are dynamically added or removed, and components are dragged and dropped.
  • Quickly generate business pages from page templates.
  • Template engineering/editor/background service decouple.
  • Template engineering front-end framework irrelevant: Supports vUE and React.
  • Support free expansion of page components, no restrictions on component style layout, interface calls, etc.
  • There are few front-end engineering constraints and no restrictions on the use of other technologies (Redux, SSR, UI libraries, etc.).

Comparison with the cloud swallowtail butterfly

Ali Cloud Butterfly is the best visible page visualization building service in the market at present. Pipeline is similar to Cloud Butterfly in many aspects, so make a simple comparison:
Cloud swallowtail butterflies pipeline
Commercial solutions are directly available Open source system, the basic page building framework, need to deploy
Generated pages, uploaded images, etc. can only be hosted in Ali, also limited domain name Resource landing and surrounding functions need to be built by ourselves, but all resources can be controlled 100%
The configuration form function is relatively perfect Configuration forms are basic and need to be improved
Configure constraint rules using custom components Use the generic JSON Schema specification
The template front-end framework uses Nunjucks The front-end framework has no constraints and supports VUE and React, reducing the cost of service migration
Hides the template build process and provides a customized IDE Using Webpack construction, template development is consistent with normal front-end project development
Custom page-level configuration items are not supported Supports custom page-level configuration items

In summary: Cloud Fengdee is a complete commercial page visualization building system, suitable for partial business operations of the company; Pipeline is an open source page visualization framework, suitable for companies that need to build their own page visualization system and have technical support.

Next step

  • Improve technical implementation documentation, use documentation, system deployment documentation and template development documentation.
  • Provide support for more front-end frameworks.
  • Provide richer visual interaction.

conclusion

This paper discusses the pain points of activity page development, summarizes 7 technical points and 4 technical difficulties of page visual building tools, and sort out the ideal operation page visual building tools, and finally introduces the page visual building framework pipeline.

Writing in a hurry, interested in page visualization or open source project pipeline, welcome to discuss.

References

  • pipeline

Github.com/page-pipepl…

  • Page visualization build tool past life and present life

Github.com/CntChen/cnt… / 15

  • Vue 2.0 Study Note: Component data transfer

www.w3cplus.com/vue/compone…

  • Aliyun swallowtail

i.yunfengdie.com/

EOF