Click “CSDN” at the top and select “Top public account”

Critical moment, the first time to arrive!

A week after uCONN tweeted that “some TypeScript improvements will be introduced,” Vue. Js 2.5, codename Level E, has arrived with a Japanese twist. As you can see from Release Notes, Vue. Js 2.5 has better TypeScript integration, better error handling, better support for functional components in single-file components, and context-independent server-side rendering. Details are as follows:

Better TypeScript integration

Thanks to the TypeScript team, 2.5 offers vastly improved type declarations:

  • When using the default Vue API, you can use appropriate type inference for this. It also works in single-file components!

  • The props input in this is inferred based on the props option of the component.

  • Most importantly, these improvements will benefit pure JavaScript users as well! If you use VSCode with the awesome Vetur extension, you’ll get much improved auto-complete suggestions, even when using pure JavaScript in Vue components! This is because vue-language-Server is the internal package that parses VUE components and uses the TypeScript compiler to extract more information about your code. In addition, any editor that supports the language server protocol can leverage vue-language-Server to provide similar functionality.

Note: TypeScript users should also update the following packages to be compatible with type declarations: vue-Router, vuex, vuex-router-sync, and vue-class-Component.

Better error handling

In version 2.4 and earlier, we usually use global config. ErrorHandleroption to handle unexpected error in the application. We also have the renderError component option to handle errors in the render function. However, we lack a mechanism to handle generic errors within a specific part of the application.

In 2.5, we introduced a new errorCaptured hook. A component with this hook catches all errors in its tree of children (excluding itself) (excluding those invoked in an asynchronous callback). If you’re familiar with React, This React with 16 The concept of error boundary (https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#introducing-error-boundaries) is introduced into the similarity. The hook receives the same arguments as the global errorHandler, You can use this hook to gracefully handle and display an error (https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#error-handling-with-errorcapture D – hook).

Better support for functional components in the SFC

Using vue-Loader > = 13.3.0 and vue 2.5, functional components defined as single file components in *. Vue files can now get proper template compilation, Scoped CSS and hot reload support. This makes it easier to transform leaf components into functional ones for performance optimization.

Environment-independent server-side rendering

The default build of vUE -server-renderer assumes a Node.js environment, which makes it unavailable in some JavaScript runtimes such as phP-v8JS or Nashorn. In 2.5, we have released an environment-neutral version of vue-server-Renderer that can be used in browsers or pure JavaScript engines. This can open up interesting strategies, such as using Vue server rendering directly in the PHP process.

Also, it is recommended that you check out the full release notes for other API enhancements, including V-ON, V-Model, Scoped Slot, provide/inject, etc.

Vue 2.5.0 source download: https://codeload.github.com/vuejs/vue/zip/v2.5.0

Vue. Js, a progressive JavaScript framework, has been released since 2013. Its simple syntax design, lightweight and fast features are deeply loved by the technical community, and it has been widely used and expanded at home and abroad. Alibaba Weex and Vue also have more cooperation.

Today, we will introduce a front-end framework — mpVue, which is developed by Meituan-Dianping and uses vue.js to develop wechat mini programs. Using this framework, developers will get a complete vue.js development experience, while providing the ability to reuse code for H5 and applets. If you want to transform an H5 project into a small program, or develop a small program and then want to convert it to H5, mpVue is a perfect solution.

In order to improve the development efficiency and enhance the development experience, we built a Vue development mini program wheel

Applets development features

Wechat applet recommends a simple way of development and achieves lightweight product functions through multi-page aggregation. Small programs are downloaded to the local area in the way of offline package, and loaded and started by wechat client. The development specification is simple, the technology is packaged thoroughly, and it has its own development system, which has the shadow of Native and H5, but it is never the same.

Applets themselves are positioned as a simple logical view layer framework, which is not officially recommended for developing complex applications, but it is difficult to simplify business requirements. Complex applications have high requirements for development methods, such as components and modularization, automatic construction and integration, code reuse and development efficiency, but the small program development specification greatly limits these capabilities. In order to solve the above problems and provide better development experience, we created mpVue to develop wechat applets by using vue.js.

What is mpVue

MpVue is a front-end development framework aimed at developing small programs. Its core goal is to improve development efficiency and enhance development experience. Using this framework, developers do not need to understand the small program development specifications, only need to be familiar with vue.js basic syntax can start. The framework provides a complete vue.js development experience, where developers write vue.js code and mpVue parses it into applets and ensures that it works correctly. In addition, the framework provides Quick Start sample code to developers via CLI tools that allow them to execute a simple command to get a runnable project.

Why do mpVue

At the beginning of the internal test of the small program, we plan to quickly iterate out a product implementation of the standard H5, whose core appeal is fast implementation, code reuse, low cost and high efficiency. Subsequently, we experienced several small program construction, combined with business scenarios, technology selection and small program development mode, sorted out the main problems faced in the development stage:

  1. The componentization mechanism is not perfect;

  2. Lack of ability to multiplex code;

  3. Small program framework and team technology stack can not be integrated;

  4. Small program learning costs are not low enough.

Specifically reflected as:

  • Component mechanism: small program logic and view layer code are separated from each other, common components cannot be aggregated into a single file entry after extraction, components need to be introduced in the view layer and logic layer respectively, poor maintenance; Components have no namespace mechanism, event callbacks must be set to global functions, component designs risk naming conflicts, and data encapsulation is weak. Developers need friendly code organization, imported once through the ES module; Component data is well encapsulated. Mature component mechanisms are critical to engineering development.

  • Multi-terminal reuse: There are two common business scenarios, namely, the existing H5 products are transformed into small program applications or vice versa. From an efficiency standpoint, developers want to reuse code to get things done, but applets don’t do that. We tried to convert H5 code into applets through static code analysis, but the view-layer transformation didn’t yield much benefit. Multi-terminal code reuse requires a more sophisticated solution.

On the other hand, the way of small program development is similar to H5, so we consider doing code reuse with H5. At the same time, following the team technology stack selection, we determined vue. js as the small program development specification. Using vue.js to develop small programs will directly improve the following development efficiency:

  1. H5 code can be reused into applets with minimal modification;

  2. Using vue. js component mechanism to develop small program, can realize the reuse of small program and H5 components;

  3. After the unification of technology stack, the learning cost of applets is reduced, and developers do not need to learn more when switching from H5 to applets.

  4. The cost of code maintenance is reduced, vue.js code can let all front-end directly participate in the development and maintenance.

Why vue.js? This depends on the selection of the team’s technology stack. The introduction of a new type of selection is incompatible with the unification of the technology stack and the improvement of development efficiency, which is contrary to the original intention of the development tool service business.

The evolution of mpVue

The formation of mpVue comes from business scenarios and requirements, and the determination of the final scheme, which goes through three stages.

  • Phase 1: We implemented a view-level code conversion tool aimed at improving the efficiency of first time code development. Secondary development is done on this object code by converting the H5 view layer code into applets, including HTML tag maps, vue.js templates, and style transformations. Limited code reuse was achieved, but componentized development and small program learning costs were not significantly improved.

  • Phase two: We look at improving the code componentization mechanism. The code organization form is designed according to vue. js component specification, and the code is parsed into small program by code conversion tool. Transformation tools address data synchronization, lifecycle association, and namespace issues between components. We ended up implementing a subset of vue.js syntax, but the effort to implement more features or iterate through vue.js versions became inestimable and felt endless.

  • The third stage: our goal is to achieve the support of vue.js syntax set, to achieve the purpose of using vue.js small program development. By introducing the vue. js RunTime, the vue. js syntax is supported to avoid human adaptation. At this point, we have completed the purpose of using vue.js to develop small programs. The goals of unifying technology stack, component-based development, multi-terminal code reuse, reducing learning cost and improving development efficiency are realized.

MpVue design idea

Vue.js and applets are typical frameworks of logical view layer. The working mode between logical layer and view layer is as follows: data changes drive view update; The view interaction triggers the event, and the event response function modifies the data to trigger the view update again, as shown in Figure 1.

Figure 1 Implementation principle of small program

In view of the consistent working principle of vue. js and applet, we consider hosting the function of the applet to vue. js, and synchronizing data changes to the applet at the right time, so as to achieve the purpose of developing the applet. In this way, we can focus on vue. js and write the corresponding applet code with reference to vue. js. The applet is responsible for the display of view layer. All business and logic are convergent to vue. js, and the data changes of vue. js are synchronized to the applet, as shown in Figure 2. As a result, we gain the ability to develop applets in vue.js style. To this end, our design scheme is as follows:

Figure 2 implementation principle of mpVue

Vue code:

  1. Write the small program page as vue.js implementation;

  2. Implement parent-child component association with vue. js development specification.

Small program code:

  1. Write view layer template with applets development specification;

  2. Configure life cycle function, associate data update call;

  3. Map vue.js data to applets data model.

On this basis, the following mechanisms are added:

  1. Vue instance is associated with applets Page instance.

  2. The mapping between applets and Vue life cycle can trigger Vue life cycle in applets life cycle.

  3. The applets event establishes a proxy mechanism that triggers the corresponding Vue component event response in the event proxy function.

This mechanism is very simple to summarize, but quite complex to implement. Before revealing the concrete implementation, the reader may have some questions:

  1. Do I need to write two versions of the code to maintain vue.js and applets at the same time?

  2. The applet is responsible for the view layer presentation. Is the view layer of vue.js still needed? If not, how to deal with it?

  3. How to get through the life cycle, how to achieve data synchronization update?

The above questions cover the core of the mpVue framework and will be covered in detail below. First, mpVue is designed for efficiency and provides the ability to automatically generate small program code that is built from vue.js code without having to develop two sets of code at the same time.

Vue. Js view layer rendering is done by the Render method, while maintaining a virtual DOM in memory, mpVue does not need to use vue. js to complete the view layer rendering, so we modified the Render method to prohibit the view layer rendering. Readers familiar with source code know that Vue RunTime is implemented on multiple platforms, including Weex in addition to our common Web platform. From now on, we have added a new platform, mpVue.

As for the third issue, life cycle and data synchronization are the soul of the mpVue framework. The data of vue.js and applets are isolated from each other and each has a different update mechanism. MpVue starts with lifecycle and event callback functions to synchronize data when vue.js triggers data updates. Applets are presented to users through the view layer and respond to user interactions through events, while vue.js maintains data changes and logic in the background. As you can see, data updates originate in the applet, processed from vue. js, vue. js data changes are then synchronized to the applet. For data synchronization, mpVue modifies the vue.js RunTime implementation to add logic to update applets’ data in the vue.js lifecycle.

Data updates triggered by user interactions are done through the event broker mechanism. In vue.js code, the event response function corresponds to the component’s method method, and vue.js automatically maintains the context. There is no similar mechanism in the applet, however, because a real-time virtual DOM is maintained in the vue.js execution environment, which corresponds exactly to the view layer of the applet. We think, after triggering the event on the node of the small program component, as long as we find the corresponding node on the virtual DOM, triggering the corresponding event is not complete. If the vue.js event response triggers a data update, its lifecycle function update will be automatically triggered, and the applets data is updated synchronously on this function, and data synchronization is achieved.

How to use mpVue

The mpVue framework itself consists of several NPM modules. The entry module already handles the dependencies, and developers only need to execute the following code to complete the local project creation.

# installation vue – cli

$ npm install –global vue-cli

# create a local project based on the template project

$vue init ‘bitbucket:xxx.meituan.com: hfe/mpvue – quickstart’ – clone my – project

Install dependencies and start automatic builds

$ cd my-project 

$ npm install

$ npm run dev

After executing the above command, the applets object code will be built in the dist subdirectory of the current project. Load the dist subdirectory using the applets developer tools to start local debugging and previewing.

The sample project follows the vue.js template project specification and is created using the vue.js command line tool vue-CLI. The code organization is consistent with the official vue.js instance. We have customized the Vue.js RunTime and Webpack loader for the applet, and some of these dependencies have been built into the project.

In view of two common code reuse scenarios in small program development, mpVue framework provides solutions and technical support for developers. Developers only need to carry out project configuration and transformation under this guidance.

Convert applets to H5

Use Vue. Js specification directly to develop small programs, the code itself is no different from H5, specific code differences will be concentrated in the platform API part. In addition, there is no obvious change, and the transformation is mainly divided into the following parts:

  1. Replace vue.js framework of applets with standard vue.js;

  2. Replace vue-loader of small program platform with standard Vue-loader;

  3. Adapt and modify applets with H5 underlying API differences.

Convert H5 to applets

After you have developed H5 using vue.js, you need to complete the following:

  1. Replace standard vue.js with vue.js framework of applets platform;

  2. Replace the standard VUe-loader with the vue-loader of the applet platform;

  3. Adapt and modify applets with H5 underlying API differences.

According to the capabilities provided by the small program development platform, we support the syntax features of vue.js to the maximum extent, but some functions have not been implemented at the present stage, as shown in Table 1.

Table 1 Syntax features not currently supported by mpVue

The goal of the mpVue framework is to link applets with H5 development methods through vue.js to achieve maximum code reuse. However, due to the objective existence of platform differences (mainly focusing on implementation mechanism and underlying API capability differences), we cannot achieve 100% reuse of the code, and the transformation cost of platform differences cannot be avoided. For code reuse scenarios, developers need to focus on the following questions and prepare:

  1. Try to use syntax features that are not available on the platform, which require no conversion and adaptation costs.

  2. Avoid using unsupported syntax features, such as slot and filter, to reduce transformation costs.

  3. If you are using platform-specific apis, consider abstracting the interface of the adaptation layer and switching the underlying implementation to achieve platform transformation.

MpVue best practices

In Table 2, we have made a horizontal comparison of the main capabilities and characteristics of the three development frameworks, namely wechat Small program, mpVue and WePY, to help you understand the focus of different frameworks and determine technical solutions based on business scenarios and development habits. We’ve summarized some best practices for how best to use mpVue for small program development.

Table 2 Comparison of main capabilities and features of the framework

  1. Use vue-CLI command line tool to create a project, using the syntax specification of Vue 2.x for development;

  2. Avoid using syntax features that are not supported by the framework, that is, some vue. js syntax cannot be used in small programs, and try to use common features of mpVue and vue. js.

  3. Reasonable design of data model, fine-grained control of data update and operation to avoid performance problems;

  4. Rational use of component development small program, improve code reuse.

conclusion

MpVue framework has been practiced and verified in business projects, and the development documents are now ready. We are making the final preparation before open source, hoping to make a contribution to the small program and vue.js ecosystem. The original intention of mpVue is to provide vue.js developers with low-cost access to applets, but its capabilities and use experience remain to be tested. In the future, we will continue to expand existing functions, solve users’ problems and needs, optimize development experience, and improve the surrounding ecological construction to help more developers.

It needs to be noted that mpVue is secondary developed by fork vue. js source code, and vue. js implementation of MP platform is added. We retain the ability to follow vue. js version upgrade, and hope to achieve better capability enhancement in the future. Finally, thanks for the convenience brought to the industry by vue. js framework and wechat mini program.

The author:

  • Mi Su, LITTLE sister OF CSDN;

  • Cheng Hu, front-end technology expert of Meituan-Dianping Hotel business Group, is mainly engaged in mobile terminal and small program technology, and is committed to the engineering development and business-level application of small program.

——– Hot news review ——–

This article summarizes 14 mind maps for learning Python

Kotlin to replace Java as first language for Android development

The rise of Python, the domination of JavaScript — GitHub’s 2017 Open Source Report on the language wars