Wonderful in the past
Getting started with online IDE development: implementing an online code editor from scratch
Summary of TS core knowledge points and analysis of actual project cases
Preface
The WYSIWYG design concept has always been a high-profile feature highlight in the WEB IDE field, and it can also greatly improve the programming experience and programming efficiency of the web coder. Next, the author will preview and preview the H5 visual editor in real time. The real machine scan code preview function does a plan analysis, and provides some ideas for everyone when designing similar products.
We still use the H5-Dooring visual editor developed by the author as a case to analyze the implementation of the above functions.
You will gain
Real-time preview application scenarios and actual cases
Real-time linkage scheme of canvas element and attribute editor
General idea of real-time preview
Realization ideas for real-machine scan code preview
Real-time high-availability preview solution based on nodejs middle layer
text
Under normal circumstances, the real-time preview function will be handed over to the front-end to achieve, such as the preview of WeChat developer tools that we often see, the preview of Alipay applet, the preview plug-in of vscode, the more classic DW also integrates a powerful real-time preview function , Next we look at a real-time preview module of H5-Dooring online programming:
In the H5 page visualization platform, we also hope to see the effect of our configuration page in real time, such as changing a certain attribute, which can take effect in real time on the canvas, and can also view the real machine effect on the mobile phone, providing this real time The preview function is undoubtedly just needed for the visual configuration platform. The following cases:
Simulate mobile phone preview on PC:
Real machine preview entry and effect:
So the key to our design of real-time preview is how to restore the user's configuration in the canvas with high fidelity, so that the error and experience can be maximized.
Next, the author will specifically introduce how to implement the above preview methods and how to design a highly available preview program.
1. Real-time linkage scheme of canvas element and attribute editor
The real-time linkage scheme of canvas element and attribute editor mainly refers to how the modification of attribute editor is synchronized to canvas element in real time, abstracted as the following concept:
In order to realize that the property editor on the right has modified the content and the canvas can be updated in real time, we need to implement a mode to associate the left and right sides, which is the concept of "linkage". We all know that every visual component has Corresponding to a unique schema (it has been introduced in the H5-Dooring article, interested friends can learn to understand), the structure of the schema is similar to the following:
{
"config": {
"color": "#fff",
"name": "徐小夕"
},
"editData": [
{
"type": "Text",
"key": "name"
},
{
"type": "Color",
"key": "color"
}
]
}
复制代码
Once such a data structure is designed, we can dynamically render the editor's form (via editData), and synchronize the modified value to the component (via editData -> config mapping).
Secondly, we need to define the shared data source. We can use vuex (for example, you are the vue technology stack) or dva (if you are the react technology stack). The general design ideas are as follows:
Essentially, it is to trigger the action in the property editor, modify the config of the corresponding component, and then update the canvas content. pointData is the data set of the component on the canvas, which is used to display the editing items of the H5 page and the dynamic rendering property editor. Later we The preview function introduced also depends on the data provided by pointData.
2. The general idea of real-time preview
In the author’s previous article, I explained in detail how to implement the real-time preview of the Web IDE, that is, the nodejs + iframe method, but for our H5-dooring visual editor, another method may be needed, that is, the user is in When you need to preview, you can manually simulate the real machine preview or the real machine preview. Here we usually provide a preview button in the editor interface. When the user clicks, you can jump to the preview view, as follows:
Based on the json schema we mentioned earlier as the preview data source, we can easily think of re-rendering an H5 page through the data source on the preview page. The idea is as follows:
If the preview page is a new page, such as the implementation of H5-Dooring, then this data source needs to be stored in localStorage before previewing. Due to the characteristics of localStorage, we can share data across pages in the same domain, so it is very convenient to implement our Requirements. As for the render engine part, we only need to use the data supply solution provided by react-grid-layout. 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>
复制代码
As for the implementation of DynamicEngine, you can see the author's H5-Dooring source code to understand the specific implementation process. However, there will be some problems in the solution of using localstorage alone, which will be explained in detail in the following chapters.
3. Realization ideas for real-device scan code preview
The realization scheme of the real machine scan code preview, the author briefly summarizes as shown in the figure below:
The reason why the nodejs service is used in the above process is because the mobile phone needs to be associated with the PC configuration to realize the real machine preview. This association can be through the url parameter, or the url parameter + request mode, here because the configuration data is relatively large , So the latter is adopted. The url parameter is used to locate the resource path, and then specific data is requested according to the parameters in the H5 master project to present the page. This is also the current popular real-machine preview solution. We can use qrcode to dynamically generate QR code, the form of the QR code is as follows:
const url = `${window.location.protocol}//${window.location.host}/h5_plus/preview?tid=${tid}`
复制代码
As for how to use nodejs to return files with specified parameters, this is relatively simple, and I will not implement them one by one here, but we must understand the above real-machine preview implementation process.
4. Realize a highly available real-time preview solution based on the nodejs middle layer
There are some shortcomings in the solution that the author wrote before to realize preview data sharing through localStroage.For example, user A wants to share the H5 page configured by H5-Dooring to user B. Because it exists on two different computers, user B It is impossible to obtain the preview data, and thus cannot view the H5 page configured by others. There is also a situation where the user has turned on the incognito mode of the browser, so the preview page may not be able to preview, so for these two scenarios, we need to Some optimizations have been made to make our real-time preview more usable.
So how can we access our configuration page even when the user cannot use localStroage normally? The answer is through api request. We use nodejs again to store the user configuration data, and judge if localStroage can get the data during the preview , Then directly use the localStroage data, if not available, directly access the api request. The logic is roughly as follows:
Although the above implementation is simple, the usability and experience of preview can be provided through optimization as above, and you can refer to it when designing product functions.
5. Summary
The author of the above tutorial has been integrated into H5-Dooring. For some more complex interactive functions, it can also be realized through reasonable design. You can explore and study by yourself.
github????：h5-Dooring
At last
If you want to learn more H5 games, webpack, node, gulp, css3, javascript, nodeJS, canvas data visualization and other front-end knowledge and actual combat, welcome to study and discuss together in "Interesting Frontend" to explore the front-end boundary together.
Comment area