This article is authorized to be forwarded by GitChat. The original link

Author: Meituan Comment hu Chengcheng

preface

Small program appeared more than a year ago, to the front-end development has brought a huge impact, where there is a mobile application, there is a small program trace. After more than a year of development and precipitation, the ability of small program has been constantly released, and the product form has become increasingly mature. It has developed into an independent on-end development technology system, which seems to be in conflict with H5 and Native. But at the same time, the small program community is not active enough, small program technology systems and solutions are relatively weak. Therefore, a developer-friendly framework that can handle complex application scenarios and fit well with existing front-end technology will be a great benefit to the small application community, and MPVue is just such a small application development framework.

What is mpvue

Mpvue is a front-end framework for solving small program engineering and scale development. She skillfully integrates popular front-end framework Vue. Js into small programs, so that developers can fully experience the ability of Vue. Js in the development process of small programs. In addition, MPVue provides developers with a complete vue.js technology solution and infrastructure through the QuickStart project.

Where does mpvue come from?

Mpvue is the open source technology project of Meituan-Dianping, which currently ranks first among all open source projects on Meituan-Dianping and is maintained by a dedicated team. Before completing MPVue, we went through the early development pains of small programs: unable to reuse existing Web front-end code, unable to support component-based development, unable to support NPM external dependencies, high learning costs… With the continuous increase of small program business, the scale effect of the problem is constantly amplified, and the required technical solutions are becoming increasingly clear: the seamless technology stack at the front end, the reuse of the code at both ends, providing componentization ability to adapt to the scale development ability, and the automatic construction to improve the development efficiency.

Mpvue development stage

The formation of the final MPVUE scheme went through three stages.

  • Stage 1: We plan to implement a code conversion tool, which can quickly convert HTML into small program code, so as to realize front-end code reuse. However, due to the limitation of tool capability positioning, efficiency improvement can only be achieved in the transformation scenario of existing code.
  • The second stage: based on the idea of engineering and aiming at improving efficiency, we designed the code componentization mechanism. The choice is simple, based on the prior art stack, with reference to vue.js, the code implements the small program version of the single file group format. We solved a number of problems, such as component namespaces and data synchronization, but were unable to support complex application scenarios and had limited improvements. And the support for more vue. js syntax features will make the development workload become extremely huge, unsustainable.
  • The third stage: plan to fundamentally solve the remaining problems of the second stage and achieve full support for vue.js syntax. After several explorations, the vue.js Runtime was introduced and modified. After continuous optimization and repeated practice in the business, the ability and effect have finally been verified.

Main features of MPVUE

First, MPvue directly supports the vue.js syntax, which is essentially different from “supporting vue.js like syntax”. The framework currently supports more than 90% of vue.js syntax. Therefore, the vue.js framework includes a package of technical solutions that we can translate to the entire infrastructure of MPVue, which is the main capability and advantage of MPVue.

Second is the componentized development capability of MPVue. Students who have developed small programs should know that the extraction of native common components needs to be split into three files and referenced in different entrances, which is extremely inconvenient to use. Mpvue is easy to encapsulate it.

Build integration, small program framework positioning is a simple logical view framework, at the beginning, there is not enough consideration of complex scenarios, once the application scale, business becomes complex, to achieve automatic build and integration requires a lot of manual work, and MPVue directly provides this capability.

These capabilities are not available through the applets native framework, but are available directly using MPVue.

Mpvue open source follow-up

Mpvue was officially opened on March 8 after several internal projects. The public account of Meituan-Dianping technology pushed an article introducing the whole mpVue context. During this period, I also got a lot of attention, trial and practice from the community, and deposited some articles on some technical sites or blogs.

Up to now, the number of MPvue’s start on GitHub has exceeded 8,000, the number of issues has exceeded 324, and 259 issues have been solved, with a resolution rate of 80%. In the NPM community, there are 26 associated solutions, more than 20 of which are provided by the community; In addition, we organized five wechat communication groups to discuss daily technical issues.

Mpvue usage scenarios

You will be interested in the usage scenarios of MPvue. We have summarized them and divided them into two main categories:

  • Incremental development using applets native or third-party frameworks with integrated MPVUE at a certain stage.
  • When developing from scratch, use MPVue directly for new development.

Mpvue provides specific solutions for each of these scenarios. Use MPVUE from scratch and build the mpVue project environment directly from the official documentation. For incremental development with MPVue, we provide an MPvuesimple lightweight build tool that can build parts of a page individually or integrate the build into an existing solution.

Mpvue design idea

The orientation of applets is a simple logical view layer framework, which divides the code into two parts: logic and view. The view part of the code is the style and template, the logical part is JS code. At run time, applets load all the code at once, and then parse it. Each page is rendered by a separate WebView window, and all the logic runs in a SINGLE JS engine. The JS engine is responsible for communicating with solid Windows, maintaining data models and responding to events.

For MPvue, the only thing to do is to make the vue.js syntactic code run in the JS engine by introducing the SDK of MPvue. In the running environment of applets, there are both applets and VUE objects. Mpvue realizes the communication between two objects through the way of data synchronization through the life cycle of event proxy.

Mpvue’s main work is reflected in three aspects: the development phase, through the command line tools to quickly build the project; The code construction phase is responsible for the compilation of code into small program object code; The code execution phase is responsible for managing applets by maintaining vue.js objects.

The idea of using vue.js syntactic ideas that are supported by the vue.js runtime is not hard to come up with, and writing a demo to verify its feasibility is much more difficult, but the most difficult part is the implementation. In our opinion, the difficulties and core capabilities of MPVUE are mainly reflected in the following three aspects:

  • The ability to compile code in the build phase, that is, the Vue template view layer code is compiled into a small program version. Our design is: vue.js maintains a complete set of logical view layer code; In addition, a separate set of view layer code is constructed for the applet view generation. The difficulty here is that building the applets template code requires some specific capabilities, which are described in more detail below.
  • Runtime dual instance association and lifecycle intercommunication. The Page instance and Vue instance of applets need to be bound in vue.js runtime in advance. The implementation details are: The Vue object is first created, the Page function of the small program is called in the scope of the Vue object to initialize the Page, and all information is mounted to the Vue instance. Hook is set in the life cycle of Pages to call the Vue life cycle function, during which all data is obtained from the Vue example.
  • In addition, we have a guiding principle for designing MPVue: do not create specifications, do not introduce new learning. We support all vue.js syntax to the maximum extent possible, and try to make a zero-cost switch from vue.js to applets.

Mpvue best practices

Mpvue focuses on solving the efficiency problem of small program development, enhancing code maintainability through framework mechanism and syntax specification. It also provides operable space for small program and H5 code reuse. Those familiar with front-end development know that there are platform differences between small programs and H5, and some capabilities cannot be aligned. There is no silver bullet to solve the demands of differences at both ends. We get a lot of similar questions about how the code written by MPvue works in the browser. How mpvue solves applet and H5 cross-platform application. To solve these problems, we suggest the following solutions:

  • You can use as many of the applets syntax features, or applets components, as you don’t need to focus on converting them to H5 components later.
  • Do not use the browser strongly related features, this part of the code will not run in the small program.
  • Minimize the use of undesirable syntax features, such as $ref, filter, and so on, resulting in poor performance in the applets environment.

For mpVue with applets and H5:

  • Using platform independent syntax to do common build, this part of the ability to show no significant difference at both ends.
  • Platforms are strongly dependent on code for separate implementation, and the adaptation layer is abstracted to shield platform differences. For example, to implement a slide and map, there are native components in small programs, but H5 needs to be independently implemented, and equal compilation cannot be achieved through the framework. The analogy is react Native.

How to quickly master the power of MPVue and use it for daily development:

  • Read the official documentation for mpVue usage.
  • Understanding the capability differences between applets and H5 allows you to distinguish features suitable for H5 and applets scenarios.
  • Read mpvue project Issues to avoid common problems and learn about solutions.
  • For long-built small programs, extract common components or solutions and reuse them in more scenarios.

Mpvue future planning

How is MPvue currently being used in community practice? In our company, MPVUE has been used on a large scale since September last year, and almost all scenes have been visited. A set of best practices from a business application perspective is being developed and will be synchronized to you as a technology blog in the future.

What is mpvue going to do? The design of the framework itself can be further optimized, and the base library size can be compressed to accommodate more lightweight scenarios. Community, improve a set of building library plan. In the long run, we plan to make MPVue the most popular applets framework.

Mpvue community building

Mpvue has a plan and we are recruiting more contributors to participate in the community construction. Now some students inside and outside the company have joined in, and we will improve community construction through some mechanisms.

At the same time, you can see that companies are already working on their own mini-programs. What can we do about MPvue? Imagine, in the future, that we have a solution of ten small programs. What if we could write a set of code and try out these small programs at the same time? Isn’t it beautiful?

Write in the last

The purpose of this sharing is to introduce to you what MPVUE is, what advantages it has, what it can do and what the future plans are. To provide reference for the selection of technology. For long-term maintenance of open source projects, we have a special technical communication channel, welcome everyone to offer suggestions, or contribute PR, for the common promotion of small program community development efforts.

BTW:

Welcome to mpvue. Mpvue has been widely used and received feedback from the community since it was opened on March 8, 2018. For help and details, please refer to our official website:

  • mpvue.com
  • Making the address
  • Mpvue Collaboration project
  • Issue list