Use Vue. js to develop the WeChat applet open-source framework mpvue parsing, vue. jsmpvue

Use Vue. js to develop the small program open-source framework mpvue parsing, vue. jsmpvue

Preface

Mpvue is a front-end framework for developing applets using Vue. js. With this framework, developers will have a complete Vue. js development experience and provide code reuse capabilities for H5 and applets. If you want to transform an H5 project into a small program, or you want to convert it to H5 after developing a small program, mpvue will be a very suitable solution.

At present, mpvue has been verified in many practical business projects reviewed by Meituan. Therefore, we decided to open source mpvue and hope more technical peers can develop it together and apply it to a wider range of scenarios. For the github Project address, see mpvue. For more information, see http://mpvue.com /.

To help you better understand the mpvue architecture, let's look at the design and implementation of the Framework. The main content in this article has been published on the cover of the 9th mini-program topic in programmer magazine, with slight modifications.

Features of Applet Development

Simple development methods are recommended for applets to achieve lightweight product functions through multi-page aggregation. The applet is downloaded to the local device as an offline package. It is loaded and started through the client. The development specifications are concise, the technology package is complete, and the self-developed system has the shadows of Native and H5, but they are never the same.

The applet itself is positioned as a simple logic view layer framework. It is not officially recommended for developing complex applications, but it is difficult to streamline business requirements. Complex applications have high development requirements, such as components and modularization, automatic building and integration, code reuse, and development efficiency, but the small program development specification limits this part of capabilities. To solve the above problems and provide a better development experience, we have created mpvue to develop small programs by using Vue. js.

What is mpvue?

Mpvue is a front-end development framework for developing small programs. Its core goal is to improve development efficiency and enhance development experience. With this framework, developers only need to have a preliminary understanding of the small program development specifications and be familiar with the basic Vue. js syntax. The framework provides a complete Vue. js development experience. developers write Vue. js code, and mpvue parses it into a small program and ensures that it runs correctly. In addition, the framework uses the vue-cli tool to provide developers with the quick start sample code. Developers only need to execute a simple command to obtain a project that can be run.

Why mpvue

At the beginning of the mini-program internal testing, we plan to quickly iterate out a product implementation against the H5 standard. The core demands are: fast implementation, code reuse, low cost and high efficiency... Then we went through several mini-programs, combined with business scenarios, Technology Selection and mini-program development methods, and summarized the main problems we faced during the development stage:

1. The componentization mechanism is not perfect.
2. Lack of Multi-Terminal code reuse capabilities
3. The applet framework and the team's technical stack cannot be organically integrated
4. Low learning cost for small programs

Component mechanism:The code at the applet logic and view layer is separated from each other. After the public components are extracted, they cannot be aggregated into a single file portal. The components must be introduced at the view layer and logic layer respectively, with poor maintainability; the component does not have a namespace mechanism, and the Event Callback must be set as a global function. The component design has the risk of Name Conflict and Data encapsulation is not strong. Developers need friendly code organization methods, which can be imported at one time through the ES module; component data is well encapsulated. Mature component mechanisms are crucial for engineering development.

Multi-terminal multiplexing:There are two common business scenarios. The transformation from an existing H5 product to a small application or vice versa. From the perspective of efficiency, developers hope to complete development by reusing code, but the small program development framework cannot. We tried to convert H5 code to a applet through static code analysis, but only converted the view layer, which won't bring more benefits. Multi-Terminal code reuse requires more mature solutions.

Introduce Vue. js:The development of applets is similar to that of H5. Therefore, we consider code reuse with H5. Following the selection of the team's technical stack, we determined Vue. js as a small program development specification. Using Vue. js to develop small programs will directly improve the development efficiency as follows:

1. H5 code can be reused to small programs through minimal modification
2. Using the Vue. js component mechanism to develop small programs, you can reuse small programs and H5 components.
3. After the technology stack is unified, the learning cost of small programs is reduced. Developers do not need to learn more from H5 to small programs.
4. The Vue. js Code allows all front-ends to directly participate in development and maintenance.

Why is it Vue. js? This depends on the selection of the team's technical stack. Introducing new models is contrary to unifying the technical stack and improving development efficiency, and violates the original intention of developing tools and services.

Mpvue Evolution

The formation of mpvue comes from business scenarios and needs. The final solution has gone through three stages.

Stage 1:We have implemented a code conversion tool at the view layer to improve the efficiency of code development for the first time. By converting the H5 view layer code to small program code, including HTML Tag ing, Vue. js template, and style conversion, this target code is further developed. We have achieved limited code reuse, but the cost of componentized development and small program learning has not been effectively improved.

Stage 2:We focus on improving the code componentization mechanism. According to the Vue. js component specification, the Code organization form is designed, and the code is parsed as a applet through the Code Conversion Tool. The Conversion Tool mainly solves data synchronization, lifecycle Association, and namespace issues between components. In the end, we implemented a Vue. js syntax subset. However, to achieve more features or follow the iterations of Vue. js versions, the workload became hard to estimate and there was a sense of endless experience.

Stage 3:Our goal is to support the complete Vue. js syntax and develop small programs using Vue. js. Vue. js runtime is introduced to support Vue. js syntax, thus avoiding human-hand syntax adaptation. So far, we have completed the purpose of using Vue. js to develop small programs. It achieves the goal of unified technology stack, componentized development, multi-Terminal code reuse, reduced learning costs, and improved development efficiency.

Mpvue design ideas

Vue. js and applets are both typical logic view layer frameworks. The working mode between the logic layer and the view layer is: Data Change drives view update; view interaction triggers events, event Response Function data modification triggers view update again, as shown in figure 1.

Figure 1: implementation principle of Applet

In view of Vue. the working principle of js is consistent with that of applets. We think about hosting the functions of applets to Vue. js, synchronize data changes to small programs at the right time, so as to develop small programs. In this way, we can focus on Vue. js, refer to Vue. js writes the corresponding small program code. The small program is responsible for displaying the view layer, and all business logic converges to Vue. in js, Vue. after the js data changes, it is synchronized to the applet, as shown in figure 2. As a result, we have gained the ability to develop small programs in Vue. js mode.

Vue code
-Compile the applet page as Vue. js implementation
-Achieve parent-child component association using Vue. js development specifications

Applet code
-Write a view layer template in the standard of Applet Development
-Configure the lifecycle function and associate it with data update calls.
-Map Vue. js data to the mini-program data model.

On this basis, the following mechanism is added:
-The Vue. js instance is associated with the applet Page instance.
-The ing between the applet and the Vue. js lifecycle can trigger the Vue. js lifecycle in the applet lifecycle.
-Set up a proxy mechanism for applet events to trigger the corresponding Vue. js component event response in the event proxy function.

This mechanism is very simple to sum up, but the implementation is quite complicated. Before revealing the specific implementation, readers may have the following questions:

1. To maintain both Vue. js and applets, do I need to write two versions of code for implementation?
2. The applet is responsible for displaying the view layer. Is the view layer of Vue. js still needed? What should I do if I don't need it?
3. How can we break through the lifecycle, and how can we implement synchronous data updates?

The above questions include the core content of the mpvue framework, which will be discussed in detail below. First, mpvue is generated to improve efficiency and provides the ability to automatically generate small program code. The small program code is built based on the Vue. js code and does not need to develop two sets of code at the same time.

Vue. rendering of the js view layer is completed by the render method, while maintaining a virtual DOM in the memory, mpvue does not need to use Vue. js completes view layer rendering, So we transformed the render method to disable view layer rendering. Readers who are familiar with source code know that Vue runtime has multiple platforms for implementation, in addition to our common Web platforms and Weex. From now on, we have added the new platform mpvue.

Lifecycle Association:Lifecycle and data synchronization are the soul of the mpvue framework. Vue. js and Applet data are isolated from each other and each has a different update mechanism. Mpvue starts from the lifecycle and Event Callback functions to implement data synchronization when Vue. js triggers data updates. The applet presents data to users through the view layer and responds to user interaction through events. Vue. js maintains data changes and logic in the background. We can see that data update originated from small programs, and is synchronized to small programs after data is changed from Vue. js and Vue. js. For data synchronization, mpvue modifies the Vue. js runtime implementation and adds the logic for updating the applet data in the lifecycle of Vue. js.

Event proxy mechanism:Data Updates triggered by user interaction are completed through the event proxy mechanism. In Vue. js code, the event response function corresponds to the method of the component. Vue. js automatically maintains the context environment. However, there is no similar mechanism in the applet, because Vue. in the js execution environment, a real-time virtual DOM is maintained, which corresponds to the view layer of the applet. After an event is triggered on the applet component node, as long as you find the corresponding node on the virtual DOM, it is not enough to trigger the corresponding event; on the other hand, Vue. if the js event response triggers data update, the lifecycle function update is automatically triggered. In this function, the data synchronization is implemented by synchronously updating the applet data.

How to Use mpvue

The mpvue framework is composed of multiple npm modules. The entry module handles dependencies. Developers only need to execute the following code to create a local project.

# Install vue-cli $ npm install -- global vue-cli # create a local project based on the template project. The local project is currently an intranet address $ vue init 'bitbucket: xxx. meituan. com: hfe/mpvue-quickstart '-- clone my-project # install dependency and start Automatic Build $ cd my-project $ npm install $ npm run dev

After executing the preceding command, the program target code is constructed in the dist sub-directory of the current project. You can use the mini-program developer tool to load the dist directory to start local debugging and preview. The sample project follows the Vue. js template project specifications and is created using the Vue. js command line tool vue-cli. The Code organization form is consistent with that of the official Vue. js instance. We have customized the Vue. js runtime and webpack loaders for the applet. This part of Dependencies has been built into the project.

For the two common types of code reuse scenarios in applet development, the mpvue framework provides developers with solutions and technical support. Developers only need to perform project configuration and transformation under the guidance of this framework. We have internally implemented a project that converts H5 to a applet to achieve the conversion effect using the mpvue framework:

Figure 3 Conversion between H5 and applets

Convert a applet to H5: directly develop a applet using Vue. js specifications. The code itself is no different from H5. Specific Code differences are concentrated in the platform Api section. In addition, there is no need for significant changes. The transformation mainly consists of the following parts:

1. Replace the Vue. js framework of the applet platform with the standard Vue. js
2. Replace the vue-loader on the applet platform with the standard vue-loader.
3. Differences between the underlying APIs of adapted and transformed applets and H5

Convert H5 to a small program: We have used Vue. js to develop H5. What we need to do is as follows:

1. Replace standard Vue. js with the Vue. js framework of the applet Platform
2. Replace the standard vue-loader with the vue-loader of the applet platform.
3. Differences between the underlying APIs of adapted and transformed applets and H5

Based on the capabilities provided by the mini-program development platform, we have supported the Vue. js syntax feature to the greatest extent, but some features are not yet implemented at this stage.

Table 1: syntax features not supported by mpvue

Precautions for project conversion: The framework aims to establish associations between applets and H5 development methods through Vue. js to maximize code reuse. However, due to the objective existence of platform differences (mainly focusing on implementation mechanisms and underlying Api capability differences), we cannot achieve code 100% reuse, and the transformation costs of platform differences cannot be avoided. For code reuse scenarios, developers need to focus on the following issues and be prepared:

1. Try to use platform-less syntax features, which do not require conversion and configuration costs
2. Avoid using unsupported syntax features, such as slot and filter, to reduce transformation costs
3. If you use a specific platform Api, consider abstracting the adaptation layer interface to complete the platform conversion by switching the underlying layer.

Mpvue Best Practices

In Table 2, we have made a horizontal comparison of the main capabilities and features of the three development frameworks, namely, applets, mpvue, and WePY, to help you understand the focus of different frameworks, determine technical solutions based on business scenarios and Development habits. We have summarized some best practices for better using mpvue for small program development.

1. Use the vue-cli command line tool to create a project and use the Vue 2.x syntax specification for development.
2. Avoid using the syntax features not supported by the Framework. Some Vue. js syntaxes cannot be used in small programs. Try to use the common features of mpvue and Vue. js.
3. Properly design data models and fine-grained control over data updates and operations to avoid performance problems
4. Rational use of componentization to develop small programs and improve code reuse rate

Table 2: Comparison of framework features

Conclusion

The mpvue framework has been put into practice and verified in business projects and is currently being used in a wide range of internal comments by Meituan. Mpvue comes from the open-source community. We also hope to contribute to the open-source community and provide developers with a set of technical solutions. The original intention of mpvue is to make Vue. javascript developers access small program development at a low cost to achieve low-cost code migration and reuse. In the future, we will continue to expand our existing capabilities, address developers' demands, optimize user experience, and improve the surrounding ecosystem, help more developers.

Finally, mpvue is based on Vue. the js source code is developed twice, and the implementation of the mini-program platform is added. We keep the following Vue. thanks to Vue for its js version upgrade capability. js frameworks and applets bring convenience to the industry.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.