preface

The design concept of what you see is what you get has always been the highlight of the WEB IDE field, which can greatly improve the programming experience and efficiency of ** WEB coder. Next, the author will do a solution analysis of the real-time preview of H5 visual editor and the real machine scan code preview function, to provide some ideas for you in the design of similar products.

We also use the h5-Dooring visual editor developed by the author as an example to analyze the implementation of the above features.

You will reap

  • Real-time preview application scenarios and actual cases
  • Real-time linkage scheme for canvas elements and property editors
  • The general idea of a live preview
  • Real machine scan code preview implementation idea
  • High availability real-time preview scheme based on NodeJS middle layer

The body of the

In generalReal-time previewThe functions of theThe front endTo implement, as we often seeWechat developer toolsThe preview,Alipay small programThe preview,vscodePreview plug-in, more classicDWIt also integrates a powerful live preview function, and we’ll take a look at one nextH5-DooringOnline programming real-time preview module:

inH5 Page visualization building platform, we also want to be able to see the effect of our configuration page in real time, such as changing a property, can take effect in real time in the canvas, but also on the phone to view the real machine effect, providing this real-time preview function is undoubtedly a strong need for visual configuration platform. Here’s a case:PC analog mobile phone preview effect:Real machine preview entry and effect:

Therefore, the key to our real-time preview design is how to restore the user’s configuration in the canvas in high fidelity, so that the error and experience to the extreme.

Next, the author will specifically introduce how to realize the above preview methods, and how to design a highly available preview scheme.

1. Real-time linkage scheme between canvas elements and attribute editors

The real-time linkage scheme between the canvas element and the property editor mainly refers to how the modification of the property editor is synchronized to the canvas element in real time, which is abstracted as the following concept:In order for the property editor on the right to change the content and the canvas to be updated in real time, we need to implement a pattern that links the left and right sides, the concept of “linkage”. As we all know, each visual component corresponds to a unique oneschema(described in h5-Dooring’s article, for those interested), the structure of the schema looks something like this:

{
	"config": {
    	"color": "#fff"."name": "Xu Xiaoxi"
    },
    "editData": [{"type": "Text"."key": "name"
        },
        {
        	"type": "Color"."key": "color"}}]Copy the code

Once such a data structure is designed, we can implement dynamic rendering of the editor’s form (via editData) and synchronization of the modified values to the components (via the editData -> config mapping).

Second, we need to define itShared data sourceWe can usevuex(if you are a VUE stack), or dVA (if you are a React stack), the design is as follows:It’s essentially triggered in the property editoraction, modify the corresponding componentconfig, and then variously updates the canvas content.pointDataIs a data set of components on the canvas used to display H5 pages and edit items for the Dynamic Render properties editor. The preview feature we’ll cover later also relies onpointDataData provided.

2. General idea of real-time preview

In the author’s previous article detailed how to achieveWeb IDEReal-time preview of the scheme, which isnodejs + iframeBut for usH5-dooringIn the case of visual editors, there may be an alternative, where users can preview manually when they need toSimulate real machine previeworPreview:Here we usually provide a preview button in the editor interface, when the user clicks it can jump to the preview view, as follows:Based on what we mentioned earlierjson schemapreviewedThe data sourceIt is easy to think of rerendering an H5 page in the preview page through the data source. The idea is as follows:If the preview page is new, as in the h5-Dooring implementation, then the data source needs to be stored before the previewlocalStorageDue tolocalStorageWe can share data across pages in the same domain, so it is easy to implement our requirements. As for therender enginePart, we just need to usereact-grid-layoutThe data supply scheme provided is sufficient. The code is as follows:

<GridLayout
  className={styles.layout}
  cols={24}
  rowHeight={2}
  width={vw >800? 375 : vw} margin={[0, 0]} > {pointData.map((value: PointDataItem) => (<div className={styles.dragItem} key={value.id} data-grid={value.point}>
      <DynamicEngine {.(value.item as any)} / >
    </div>
  ))}
</GridLayout>
Copy the code

As for the implementation of DynamicEngine, you can see my h5-Dooring source code to understand the implementation process. But the simple use of localstorage solution will have some problems, in the next chapter I will explain in detail.

3. Real machine scan code preview implementation idea

The realization scheme of real scanning code preview is summarized as follows:The nodeJS service is used in the above process becauseThe mobile device needs to be associated with the PC configuration to implement the real device preview, this association can be through THE URL parameter, or url parameter + request mode, here because the configuration data is relatively large, so the latter is adopted to achieve, URL parameter is used to locate the resource path, and then in the H5 master project according to the parameter request specific data to render the page. This is also the current popular real machine preview scheme. We can use Qrcode to dynamically generate two-dimensional code. The form of two-dimensional code is as follows:

const url = `The ${window.location.protocol}//The ${window.location.host}/h5_plus/preview? tid=${tid}`
Copy the code

As for how nodejs returns a file with specified parameters, this is relatively simple and will not be implemented here, but it is important to understand the actual machine preview implementation above.

Based on 4.nodejsThe middle tier implements a highly available real-time preview scheme

There are some defects in the scheme of realizing preview data sharing through localStroage written by the author. For example, user A wants to share his H5 page configured through H5-Dooring to user B. Because it exists on two different computers, user B cannot obtain preview data. Therefore, you cannot view the H5 page configured by others. There is also the case where the user has turned on the browser in non-mark mode, which may not be previewed on the preview page, so for both scenarios, we need to make some optimizations to make our live preview more usable.

So how to achieve in the user can not normally uselocalStroageCan still access our configuration page? The answer is via API requests. Again, we use NodeJS to store the user configuration data, and determine if during the previewlocalStroageCan get the data, then directly uselocalStroageIf not, access the API request directly. The logic is as follows:The above implementation is simple, but it provides a preview of usability and experience that you can use as a reference when designing your product’s features.

5. To summarize

The above tutorial has been integrated into H5-Dooring, and some of the more complex interactive features are also possible with proper design, which you can explore on your own.

Github: H5 Online editor H5-Dooring

The last

If you want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to “Interesting Talk front-end” to learn and discuss together, and explore the boundary of the front-end.

More recommended

  • Building online Automated Packaging Workflows from Zero based on NodeJS (H5-Dooring Special Edition)
  • Introduction to online IDE development: Implement an online code editor from scratch
  • React+Koa based h5 page visualization editor -Dooring
  • TS core knowledge summary and project actual case analysis