“Visual building system” — from design to architecture, exploring the field and significance of front end

Time:2021-2-19

Chairman of Alibaba Group’s front end Committee @ Yuanxin has four expectations for the future of the front end: build services, serverless, intelligent, IDE. If you think about it carefully, the imagination of a “visual building system” can hit these aspects perfectly.Where is the boundary of the front end and where is the value of the business? Let’s calm down and think about it from the perspective of “visual building system”.

——Some people say that the front-end visual building system is just a toy produced by repeatedly building wheels; others say that the essence of the front-end visual building system is component enumeration, which is meaningless. One sided cognition must have its reason, but we might as well start from a higher angle and put it into practice. Maybe you will find that as feer, we can do more.

Overview of page building technology and egg playing

According to my observation, “almost every front-end team has a page building system.”.Page building technology is a commonplace topic, but this topic with the development of front-end technology, lasting.The reasons include but are not limited to:

  • Operation activity page is very important for product business, and it is a key means to attract traffic and improve retention
  • High frequency and high repetition of active page development means a lot of time and labor costs for the front end

In this context, rapid page building technology is particularly important.

Due to the different characteristics, operation requirements and design specifications of each product business, the situation of “a hundred flowers blossom and a hundred schools of thought contend” appears in the page building platform. We are “behind closed doors” at the same time, the advantages of the Expo, comparative induction, continuous optimization. Therefore, we analyzed almost all open source products and solutions in the community, including but not limited to:

  • Baidu H5
  • iH5
  • Turn around Rubik’s cube platform
  • Baidu takeaway page configuration platform: blocks
  • Ctrip LEGO system
  • Renren loan activity operation platform
  • New wechat editor
  • Luban H5
  • Alibaba cloud Phoenix
  • MAKA
  • MALIANG platform
  • grapes
  • Visual layout bootcss
  • Private program: pipeline editor
  • A foreign folk program: vvvebjs

Related technical analysis articles:

  • The past and present of visual page building tools
  • Technical points of visual page building tool
  • Evolution and technical practice of QQ member activity operation platform — efficient activity operation
  • Building block system, the operation system to the extreme
  • Practice of activity operation automation platform
  • Visual building front end project – Ali feibing
  • The reference of flying ice for activity engine
  • Visual construction system of front end engineering practice
  • How to design a highly extended online webpage production platform
  • Luban H5 Author: @ little Luban
  • Tired of writing activity pages? Come and build a page builder!

Its characteristics and technical direction can have their own characteristics, but the overall can be summarized as follows:

According to the target audience, it can be distinguished as follows:

We also sum up the solutions to solve this kind of operational needs from a large number of excellent solutionsCommon means: abstract the construction of complex pages into structured data, which drives the assembly of components / templates.It’s easy to understand such a simple sentence. According to this idea, we can build a usable platform,But if we can go further and break through the bottleneck in technology and business, we need to get through more links

  • How can structured data be designed with elegance and high performance, and naturally support the “time travel redo / undo” function when editing activities
  • How to balance the freedom of the page and the standard of unity
  • How to break through the original template engine and make use of the idea of Componentization of framework (react, Vue, etc.) to achieve framework free
  • How to realize theme template function, one click import function and plug-in editing gracefully
  • How to fit their own business characteristics, balance practicality, applicability and scalability
  • How to continuously iterate to adapt to the development of new requirements
  • How to make the community bigger and stronger
  • How to maximize the configurable, how to maximize the convenience of access expansion
  • How to avoid the confusion of component enumeration accumulation

Among the existing solutions in the industry, some have better solved one or more of these key points, and some are more like a toy for hands-on training. Please read on. Next, I will introduce the idea of “page building platform with editor technology”, as shown in the figure below:

When editor technology meets the needs of page building

Let’s go back to a broad and interesting question: “what are the difficulties of front-end development?”.

Under this question, Yu Jiangshui mentioned two points

  • Business logic is complex and changeable
  • Vertical domain solutions are not simple

Here the answer is simple and expanded, the original answer can refer to: Yu Jiangshui’s answer.
Following this line of thinking, let’s analyze,The operation activity page mentioned above is not very difficult to develop. However, for the front-end team, if the high-frequency and changeable operational requirements break out in a short time, it will become a systematic problem. For example, in extreme cases: for Taobao’s double 11 and Jingdong’s promotion, simply piling up people and time is just a drop in the bucket. So the birth of the page building platform.

What are the technical points involved in such a platformReticular: for example, it involves development tool chain, data structure design, render and interaction design, data source import, page compilation and construction, page generation, code release, activity release, version management, online operation management, permission management, visual “what you see is what you get” implementation, back-end storage, CDN synchronization, data management and statistics, data analysis, etc.The subsequent combination of platform capabilities will also involve the design of component market, and even serverless, no / low code technology.

Editor development, as a direction that can not be ignored in the vertical field, will only be more difficultIn addition to the various functions of the editor itself, we also need to consider the compatibility, but also to adapt to business needs. At the same time,Editor is a production tool, any background system seems to be essential, the demand market, whether it is graphite documents, nail documents, headlines fly book, etc. have a broad and strong demand. This field is worthy of deep cultivation, but excellent development experts are rare.

In order to solve the problem of visual building system,We try to combine the above two major problems of “complex business platform” and “rich text development in vertical domain” to create a powerful editor and complete the work of building a page platform at the same time. Although it sounds “more difficult”, it seems that the integration of the two directions is a wonderful idea and innovation.

Specifically, in addition to supporting the traditional rich text function, the editor needs to add support for business function blocks. At this time, in terms of data structure, the storage mode of JSON base is selected: traditional rich text blocks store rich text content in JSON fields, and other composite self-defined business blocks store as JSON object structures. On this basis, we implement the parsing of the JSON object structure and “what you see is what you get” in the editor.

Let’s talk about the “composite custom business block” outside of rich text. We know that the final built page will be full of various SKU products, custom components, user cards and other blocks, and the final output of these contents needs to be understood and parsed by the C-end render.

Let’s further explain it by combining with the figure below

Block 1 is traditional rich text content, block 2 is a composite custom business block SKU card, and block 3 is another composite custom business block user card. In this way, the editor is no longer a single rich text editor, but a multi-functional editor with complex JSON output.

Different business scenarios and characteristics require completely different front-end solutions. When developing these vertical solutions, business analysis, technology selection, architecture design and development landing are very difficult. Next, let’s explore step by step and realize a multi-functional page building platform based on editor technology.

Innovative attempt of flexible and powerful markdown editor and page building

I believe there are no programmers today who don’t know markdown. It’s very friendly to programmers or all Internet practitioners. In short, markdown is a lightweight markup language that allows us to write documents in a plain text format that is easy to read and write. Nowadays, markdown is widely used by many websites to write help documents or publish news in the community. For example: GitHub, Wikipedia, Jianshu, reddit, etc.

In addition to being easy to write, markdown’sScalability and convertibilityIt is also an important reason for its popularity. Because of this, our initial operation activity page building was implemented based on markdown editor. The specific process is as follows:

Of course, this is only a very rough and easy version of the flow diagram. Next, I will divide it into three parts

  • Markdown extension and custom parser
  • Improve the user experience and create the ability of page generation

Two aspects are explained in detail.

Markdown extension and custom parser

Markdown originally used to be document oriented and writing oriented, but the markup and syntax it supports can’t meet the requirements of all scenarios. Therefore, there are many markdown parsers in the community, whose purpose is to parse and extend the markdown source content. Among many parsers, the most famous one is marked.js It’s too late. It’s simple here, right marked.js The analysis of this library principle will help to understand our implementation plan.

When it comes to parsing, it’s actually a classic “Compiler Principle” routine. Apply to marked.js As shown in the figure below:

The working mechanism is very simple, marked.js After accepting the input source text string, create a lexical parser instance:

const lexer = new marked.Lexer()

The mission of lexer is to segment the input source and parse the tokens

const tokens = lexer.lex(content)

How to understand the tokens generated by word segmentation? In fact, tokens are ast objects (or directly understand them as JSON data, which is a tree structure and expresses the information of paragraphs, block references, lists, titles, rules and code blocks in markdown).

next, marked.js Instantiate a parser:

const parser = new marked.Parser()

The parser receives tokens and generates HTML rich text according to them

const html = parser.parse(tokens)

Of course, this is only a rough process, but careful readers can see the clue:If you want to extend the markdown syntax: we can modify the function of the lexer to generate tokens, so as to add the ability of our custom markdown syntax to parse into a new type of token; at the same time, we can modify the parser parsing function to generate our expected results according to the new token type.I’m not going to go into this process here. In fact, the scheme we adopted has not been modified by fork marked.js Code, but based on their own marked.js , encapsulating a higher level parser.

Improve the user experience and build the page generation ability

It can be seen from the above that our page building requirements mainly focus on inserting various component cards, inserting linked banner pictures and other composite custom business blocks. Each requirement should correspond to a new syntax rule of markdown.

For example, enter:

<SkuCell>[email protected]@rondStyle</SkuCell>

It means that a SKU card with ID 12345 is inserted into the page.

It is painful and unacceptable to let the students input the above grammar manually. Therefore, we have designed the button of the markdown editor: “add SKU cell”. After clicking the button, a form dialog box will pop up. The operator can enter the SKU type and ID, and then automatically insert a line of content at the cursor position in the markdown editor

<SkuCell>[email protected]@rondStyle</SkuCell>

This design is convenient for operation, use and memory. Therefore, for users, they only need to understand the basic markdown syntax, and do not need to memorize and manually enter the new syntax.

In order to meet the requirement of “what you see is what you get”, we need to parse the input source while typing.The parsing process needs to be done line by line

  • If parsing the contents of the current line conforms to the markdown primitive syntax, the marked.js Parse to get the parsed rich text result, and push it into the result data stack (the data stack here is a result array)
  • If the parsing of the current line content conforms to the new extended markdown syntax, then use your own parser function (temporarily named feparse) to parse the line(The implementation of parser function is a simple process of compiling and word segmentation
  • The feparse function receives the extended new syntax content, and uses different helper processing for different ideographic ways, such as processing<SkuCell>[email protected]@rondStyle</SkuCell>Will be handled by the skucellhelper function
  • The skucellhelper function parses the content and obtains the segmentation result (marked as formdata)
type: 'live',
sku_id: 12345,
style: 'rondStyle'
  • According to the above segmentation results, request the back-end interface to obtain the data corresponding to the SKU, such as the live data with ID 12345 (marked as live data)
Author: 'live author name',
id: 12345,
created_date: '2019 10-12 20:34',
Description: 'live Introduction',
duration: '20mins',
// ...
  • According to the above two kinds of data: formdata and livedata, the rich text skurichtext corresponding to the SKU component is obtained by using the rendering ability of react server
const skuRichText = ReactDOMServer.renderToString(<SkuCell data={... formData, ... liveData} />)
  • Push skurichtext into result data stack result

Finally, we analyze the results line by line

result = [
    'the first line of rich text content ',
    'rich text content corresponding to the second line of SKU card',
    // ...
]

Merge the result content, render the rich text and display it on the right side of the page to achieve the WYSIWYG effect.

To sum up, the key points of “what you see is what you get” are as follows:

  • Custom markdown syntax parser
  • Using the rendering ability of react server to get the rich text content of special components

It should be pointed out that in practice:The data saved and submitted to the back end in the operation editor is different from the above result. It is also an array: SubmitData, which is used to represent the input content of the operation. For the original markdown syntax, we directly use its corresponding rich text content; for the new extended syntax, we do not use its corresponding rich text content, but use the data structure of formdataFinally, similar contents are submitted:

submitData = [
    {
        type: 'richText',
        content: '<p>XXXX</p>'
    },
    {
        type: 'sku',
        content: {
            type: 'live',
            sku_id: 12345,
            style: 'rondStyle'
        }
    },
    // ...
]

This consideration is for C-end users to obtain the latest real-time SKU data when they request a page.How to understand real-time SKU data? When editing the operation page, it is assumed that the title information of a SKU is “title one”. One day later, the title information of the SKU becomes “title 2”. If we save and use the rich text information used in operation editing, then the C-end page must be “title 1”, not the latest “title 2”. So we only submit the SKU’s ID. When a C-end user requests a page, the back end calls through RPC / HTTP to get the latest data, and the component renders the content on the server side, and finally returns it to the front end.

The whole process is as follows:

So far, we have implemented an extended editor based on markdown and using markdown syntax flexibility. A series of business functions such as “insert SKU card” and “insert banner diagram” are built into the editor.

Based on this idea, we have completed a composite editor and page generator to help operators quickly build active pages

  • Input is what you see, and what you see is what you get
  • It supports flexible extension and supports all types of syntax and any component based on parser
  • The operation only needs to be familiar with the basic markdown syntax, and the extended syntax is completed by pressing the button

Final effect picture:

Technical solutions are developed and improved in the process of continuous evolution. After running for more than half a year, we boldly carried out innovation and optimization, and finally achieved a comprehensive replacement with a more efficient scheme.Interested readers, please continue to read.

It’s not just rich text editors

Above, we mentioned the advantages of the existing composite editor, namely page generator. After more than half a year of online service, we will further analyze its disadvantages

  • The syntax content of markdown in the editor is still obscure for operation
  • Operation still needs a certain cost of learning and using
  • WYSIWYG based on real time parsing and rendering
  • For each new component, a new markdown syntax is created

These shortcomings are easy to understand. Here we focus on “what you see is what you get”.As mentioned above, “what you see is what you get” actually relies on the ability of real-time parsing the content source into full rich text and rendering rich text in real time.Although it meets the demand, this method has high performance cost. Even with the commonly used “anti shake and interception” means, the pressure on the browser is still not small. Can we modify it directly on the canvas like “building block system” and “drag and drop page system” to achieve a more realistic “what you see is what you get”?

The “drag and drop system” has distinct advantages and disadvantages.
First of all, although the drag and drop system, represented by a large number of H5 generation tools, looks powerful, in essence, it relies on the accumulation of components and endless configuration expansion, and the final data form and function grow savagely, which is easy to be out of control and gradually marginalized.
The out of control not only refers to the lack of unified constraints on the operation side and product design side, but also includes the out of control of maintenance angle after code expansion. On the other hand, from the final result, the drag and drop system transfers the splicing of pages to the operation. The workload of “moving bricks” is not small for the operation. At the same time, it lacks the mandatory constraint of “standardization”, which is not conducive to the unity of visual design. On the contrary, the “self play” of the operation students is not necessarily a good thing. There are already many drag and drop systems available in the community, and it’s meaningless to build wheels repeatedly.

Combined with our demand characteristics: fixed page block and design style, fixed component form, fixed page layout, heavy text and image content, and uncomplicated page interaction, we believe that,Multi function rich text editor will be a direction worthy of deep test.

The traditional rich text editor is a powerful “super text processing factory”, similar to our commonly used word, on which the operation can be “wanton”. How to add design specifications to rich text editor and add business components?

First of all, rich text editor is an important front-end direction worthy of in-depth study, and there are many kinds of open-source rich text editors in the community. However, from the perspective of time and development cost, we do not want to re implement an enhanced rich text editor integrated into our own business, nor do we want to make various magic changes to existing schemes.

If we can’t find a suitable solution, let’s analyze it from the perspective of requirements

  • The new multi-functional rich text editor needs to support the historical markdown syntax data, otherwise the historical data will be incompatible
  • The new multi-functional rich text editor not only serves for page builder, but also supports multi type horizontal business and pure rich text editor business
  • The new multi-functional rich text editor should support all the features of rich text, including copy and paste content
  • The new multi-functional rich text editor should support the insertion of custom components and blocks, such as SKU cards
  • The new multi-function rich text editor should be plug-in and pluggable
  • New multi-functional rich text editor, to achieve complete WYSIWYG
  • The new multi-functional rich text editor should support template form to quickly build pages
  • The new multi-functional rich text editor should be connected to the automatic format specification mechanism to automatically realize punctuation extrusion, unified typesetting and other functions

To sum up the requirements and design scheme, we chose Draft.js As the underlying framework of the multi-functional editor, one sentence is enough to summarize the reasons for making the choiceDraft.js In fact, it is not a rich text editor, but an infrastructure for building rich text content and rich text editor.Make a metaphor: if you compare rich text content to a painting, Draft.js Only paper and brush are provided. As for how to draw, developers enjoy great freedom Draft.js In the practice of Zhihu.

This is exactly what we need: we need a stage instead of a complete solution. As for how to parse the content, how to render the content and how to generate the data, it should all be controlled by the developer. It has been proved that this innovative design is very suitable for the page building generator and the traditional editing business scenario. We have finally realized the powerful multi-functional editor, versatile editor, which currently serves the background system.

Versatile means “versatile; versatile; versatile; versatile”. At present, versatile editor has taken over all the editing requirements of background system. Its technical design and system are also very clear. Now we mainly from the

  • Data structure design
  • Plug in system design
  • Multi data source support
  • User experience design
  • Page template support
  • Other details

Six aspects are analyzed.

Unique data structure

The design idea of data structure is as followsUse the result data stack (array) to store each Draft.js Editor block level content, each data item corresponds to each block element in sequence. These block elements are divided into two categories: pure rich text content and pure custom component content. For pure rich text content, we re implement the Draft.js For pure custom components, we only extract the minimal restored data (such as the SKU ID of the SKU cell component).

The submission process of operations on the editor side is as follows:

Specifically describe the core contentstate in the figure below. Contentstate is an object of contentstate type, which specifies how to store specific rich text content, including text, block level elements, inline styles, metadata, etc.

Here, we need to pay attention to the following: on the output data, we submit at least two kinds of data to the back-end storage:

  • rawContent
  • renderTreeData

Among them, rawcontent is the result of serialization according to the immutable data contentstate, and rawcontent can represent all the contents in the current editor through the data.We submit rawcontent for editing and restoring. When the operator opens the editor again, the editor can quickly render all the contents submitted last time for editing according to the rawcontent.

Rendertreata is the data submitted after calculation and processing. Its purpose is to store it in the database for the back-end to return to the C-end page. The C-end page is finally rendered by the render according to rendertreata.As can be seen from the figure above, for the generation of rendertree data, we have developed the generate method on the instance of rendertree generator

new RenderTreeGenerator(
  contentState,
  getToHtmlOptions(contentState, this.props.editorConfig),
  this.customBlockModules
).generate()

As shown in the figure:

Rendertreegenerator accepts Draft.js The immutable data type contentstate is used as the first parameter, and the user-defined configuration item is used as the second parameter this.customBlockModules As the third parameter. this.customBlockModules Is an array, which contains all the response component names of the custom blocks. When the custom block type hits the array, you need to start the custom block and generate structured data.

The generate method is simple, and the pseudo code description is as follows:

generate() {
    this.output = []
    this.blocks = this.contentState.getBlocksAsArray()
    this.totalBlocks = this.blocks.length
    this.currentBlock = 0
    this.indentLevel = 0
    this.wrapperTag = null
    this.richTextArray = []
    this.finalOutput = []

    const processRichText = () => {
      this.output.push({
        type: 'RICHTEXT',
        data: this.processRichText()
      })
    }

    while (this.currentBlock < this.totalBlocks) {
      const block = this.blocks[this.currentBlock]
      let blockType = block.getType()
      let type = blockType
    
      //For atomic types, if the current type is this.customBlockModules  Among them, the rendering data and the current type are exported
      if (block.getEntityAt(0)) {
        const entity = this.contentState.getEntity(block.getEntityAt(0))
        type = entity.getType()
    
        if (this.customBlockModules.has(type)) {
          const entityData = entity.getData()
    
          this.output.push({
            type,
            data: entityData
          })
    
          this.currentBlock += 1
        } else {
          //Not here this.customBlockModules  Among them, it is still exported as rich text
          processRichText()
        }
      } else {
        processRichText()
      }
    }

    //Other beautification or cleaning up work, such as merging contiguous rich text blocks

    return this.finalOutput
}

There are two key points different from the previous markdown editor

  • We listen to the onblur event of the editor block, and when this event is triggered, we begin to generate the result data
  • “What you see is what you get” – there is no need to manually parse the rendering implementation in real time. Because Draft.js Is an editor based on react, we can directly render a react component in the editor

As shown in the figure below:

The above two features are also based on Draft.js The multi-function editor of is better than the key point of markdown editor.

Pluggable and portable plug-in and component design

In order to support massive functional requirements, and considering the convenience of third-party function extension, we designed a good editor plug-in system.At present, 11 plug-ins are used in the project, including:Insert code, insert formula, insert link, insert reference, insert video, copy and paste restore content, insert picture, insert key style, insert annotation, etc.The project also precipitates massive business components, including:Page meow point component, banner map component, SKU card component, various button components, scroll list component, picture gallery component, etc. In principle, all components and plug-ins can be used by the community and the third party. At the same time, only one NPM package is needed for the follow-up plan to access a new function or new custom component type. **This also lays a foundation for the subsequent component market design and no / low code design.

When the editor is initialized, we register and instantiate various plug-ins and custom components. Because the concept of our multi-functional editor includes structure and data, all these plug-ins and components can be parsed by relying on decorator, which means that:Copying any content (including custom components) from another editor instance to the current editor can directly restore data, seamlessly and perfectly support the copy and paste function of components.

Multi data source support

Any technological innovation and change should consider the solution of historical burden and historical debt. The multi-function editor is no exception. As mentioned earlier, the historical editing content uses the markdown format.Taking the operation page generator scenario as an example, the back-end storage data corresponding to the historical activity page a is the markdown string. After replacing the old markdown editor with the new multi-function editor, if the operators want to edit the active page a again, the new multi-function editor will naturally be compatible with the history content.

To this end, our plan is:After receiving the data source in the editor, if the sniffer is in the historical markdown format, first use the marked.js The markdown format content is converted to rich text content, and then converted to rich text content according to the rich text content Draft.js Supported immutable data structure.

To sum up, the processing flow of raw content during editor initialization is as follows:

For the data rawcontent obtained by the editor, we use the isdraftjson tool function to determine whether the rawcontent can be used by the multi-function editor Draft.js Supported data parsing: if it can, it is proved that rawcontent is the data submitted by the new multi-functional editor, and can be used directly to recover the editor content. If isdraftjson (rawcontent) is judged as false, it means that it cannot be used Draft.js For parsing, it needs to be compatible with the historical markdown syntax marked.js Parse out the rich text and give it to Draft.js Processing, generated from rich text Draft.js If the parsing fails, the rawcontent will be directly regarded as the textarea content and filled into the editor.

The figure does not show how to deal with rawcontent if it is empty (or does not exist). In fact, if rawcontent is empty, we use ContentState.createFromText The (‘) method generates an immutable data initialized with empty content.

Due to the historical burden in the actual process, the support and implementation of multiple data sources is more complex, which is too special for us to carry out.

Continuous polishing experience

A very important topic of editors is experience. I believe many people have experienced the experience of editors: “input stuck, weird cursor position”, etc., but here I don’t think it’s necessary to analyze the experience optimization topic of traditional editors. What’s more meaningful is to start with our unique multi-functional editor features and talk about the user experience.

Take an example: according to Draft.js There will be a blank line between each block. As shown in the figure:

This will lead to two empty block data before and after the generated custom block data when the editor content is submitted, and eventually the rendered page will also contain two blank lines, which will directly affect the page design effect. There are many discussions about this issue in the community, such as empty line on adding atomic block.

In fact, this is for the flexibility of adding or deleting content before and after custom blocks.Suppose we add three custom blocks in a row — SKU card a, SKU card B, and SKU card C.If there is no blank line between a, B and C, how can we insert a new card d between card a and card B?If ABC cards keep a blank line between each other, the user can use the cursor to locate the blank line between AB and insert card D.This is the meaning of automatic blank lines before and after custom blocks.

Some developers may think: we can keep the existence of this blank line and automatically delete the blank line when the final data is generated? As a matter of fact, I got it Draft.js When editing the data in the editor, we can’t judge whether it is the expected blank line created by the user’s own carriage return or the front and back blank lines of the user-defined block, so we can’t remove the blank line rudely on the result data directly.

In order to achieve a better use experience: the focusplugin plug-in we developed solves the problem gracefully: there are still no empty lines before and after each custom block, but we use focusplugin Plug in, so that each user-defined block can be selected by clicking, or traversing with the up and down keys on the keyboard. After selection, you can directly press the Enter key, add blank lines, or even press the delete key to delete the block. As shown in the figure: when the custom block is selected:

Finally, the solution based on focusplugin plug-in makes the interaction more smooth and natural, and achieves better results. Based on this, we can change the custom block very smoothly: for example, if the currently selected block is a SKU card with ID 1234, if the operation needs to replace it with a SKU card with ID 5678, we only need to select the current block, select it, change the ID content in the edit area on the right, and confirm to complete the replacement, as shown in the figure:

Based on the FocusPlugin plug-in, in order to modify the current Sku card ID as an example, after ID is modified, it sends the new ID data and calls it after the data is successfully acquired.modifyAtomicBlock(entityKey, data)Method, triggerreplaceEntityData(editorState, entityKey, data)Method to update the immutable data of the editor, andhandleEditorStateChangeMethod to update the status, and finally reflect in the editor view.

This editing process is summarized as follows:

User experience is really not an overnight thing, it is a process that needs continuous iterative optimization. After continuous polishing, versatile editor finally tends to be stable. At present, versatile editor supports hundreds of page building. Take Zhihu launched page as an example, including but not limited to:

  • College entrance examination

)

  • Fighting against epidemic situation
  • Love needs salt
  • Langlang activity page: a master lesson for every music loving child

High traffic content.

Page template support

Daft.js The content of the editor is completely based on the data state. It uses the immutable database to update the data and adheres to the pure functional update. Therefore, it naturally supports the “undo / redo” feature. On the other hand, all data also let us realize the function of “page template”, which is very simple and ingenious.

We can split all templates into several large custom blocks, and create the corresponding data of the active template: for example, for template a: the header is a header image banner, we can create a banner image represented by the occupation bitmap in the editor; the second block is TOP10 of the e-book list, and we can create a ranking image in the editor Component, and filled by any 10 e-book data, and so on. After submitting the data, you can get the data describing the page template.

When the operator creates a page and chooses to use “leaderboard template a”, we initialize the editor with the data that has been prefabricated in advance as rawcontent. After getting the template, the operator can add and modify it to quickly complete the template page creation.

The overall process is as follows:

Other details

So far, we have introduced the community scheme and our own continuous iteration scheme. There are also some small details here, including preview, typesetting, security, configuration system.

“What you see is what you get” greatly improves the efficiency of editing activities. However, before the editor is submitted for publication and promotion, a complete preview page address is still needed for further regression. Because these promotion pages are all for mobile terminals,Therefore, in the product design of this multifunctional editor and page generator, we reserve the function of page publishing address and QR code generation to further optimize the operation experience. As shown in the figure:

On the other hand, we have strict requirements for the editing of page text, such as: you can’t use Chinese quotation marks, you need to use “”; you need to reserve a space between English and numbers and other Chinese characters; even the punctuation position has strict specifications, you need to achieve a series of typesetting requirements such as traditional “punctuation hanging, punctuation eye-catching”. Therefore,The multi-function editor and page generator is configured with pluggable automatic typesetting ability, which mainly completes the review and correction of automatic typesetting specifications, as shown in the figure below:

A page can’t be generated only by the editor. It may also include configuration content. These configuration requirements are carried by the form before entering the editor. After the form is filled in, the basic configuration data is generated, and then the editor is created.Form is the basic form of data interaction in the page, and there is no threshold for non developers to use it, but remember not to design the form too complicated. At the same time, we should pay attention to the principle that editing system and configuration system need to be decoupled.

As mentioned earlier, the editor is a production tool, and the efficiency of the editor means the generation efficiency. Once the editor has online problems, it will directly affect the normal production activities.Therefore, in order to ensure the safety and robustness of the editor, we have joined the testing link. It mainly includes: unit test, UI test. Unit testing mainly verifies the correctness of key functions and methods, such as the AutoFormat method mentioned above, verification of input and output correctness of various plug-ins, verification of data modification tools and methods, etc.; UI testing mainly relies on enzyme to ensure the normal operation of key interactions.

Finally, other related points, such as one key skin change and word count statistics, are not detailed here due to space reasons.

Rich text editor is a pit, Draft.js Although we are backed by the Facebook team, we have been struggling in the abyss. Our development process here is indeed a history of blood and tears. However, our team has accumulated rich experience in this direction, and the follow-up technical details will be shared one by one. Please continue to pay attention to the subscription.

summary

I have been thinking about what kind of articles can bring real thinking and Enlightenment to readers.On the one hand, we need to explain the language features and design, go deep into the technical details, and analyze like a cook. This kind of article needs to rely on the code to speak; on the other hand, we need to summarize and sort out the technical trend, and describe the landing and evolution of the scheme from a higher perspective, which is also important for the cultivation of the overall situation and pattern, which is also important for the technical planning and steering direction of the team.

This article briefly summarizes all aspects of the industry’s exploration of “visual page building” technology, and collates various related technology blogs and analysis articles.We also introduced the editor technology and the breakthrough and innovation that editor technology can bring to visual page building.On this basis, we are more confidentStarting from a self-developed company level visual page building system, this paper introduces the evolution history from the exploration stage to the mature stage.

In fact, the topic of “visual page building system” is far from overWe are exploring more possibilities in this direction, “micro component / micro front end”, “page attribution”, “no / low code technology”, “custom component embedding point and a / b traffic capacity”, “runtime component construction and rendering scheme”, and even “severess” and “cloud ide”And so on. In the future, we will continue to produce related articles, so readers should continue to pay attention to: technology blog, we are also working on itWe should seek for talents from all walks of life.

Back to the question mentioned at the beginning of the article: “where are the difficulties in front-end development?” I think developers who have already answered will continue to optimize their answers, while those who are still unknown will soon find their own answers.

Happy coding!

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]