Author: Dong Hongping (hiyuki)
Mpx is a small program committed to improving the development of an enhanced framework applets experience and efficiency, the company is currently in the internal bit by bit support, including travel applet, applet drops travel plaza, green orange bicycles, motorcycles dark horse, small orange keep a car, small orange fueling procedures, including small eco-; open since last November, Mpx also absorbed many external developers to join, based on the development of open Mpx go, good free street, flowers and other small memory program.
For a long time, Mpx excellent development experience and a strong internal and external stability of the developer's unanimous recognition and praise, which is consistent with Mpx is designed. However, the major manufacturers have launched their own small program platform, and various technical standards are not unified today, simply raise one platform development experience can not meet the majority of small developers who demands, 一套代码在多小程序平台运行it has become a reality just to be on. In order to solve the pain points of this small program development, Mpx released version 2.0, fit all the applets platform is the industry has been released (micro-channel, Alipay, Baidu, headlines, qq), and provides a direct compiles existing micro letter applet the ability to output to other platforms running.
The new version of the main characteristics of the main Mpx2.0 include:
- Full support for all applets platform (micro letter, Alipay, Baidu, qq, headlines) the industry's published;
- Mpx small cross-platform program development, support will compile existing Mpx micro-channel output to other projects already supported platform running applet, click to see the details ;
- Applet native component cross-platform compiler that supports the existing micro-channel native compiler components have been exported to other supported platforms to run applets;
- Deep sub optimization, resource for accurate determination sub-compilation process, all the resources of the sub-only (components, js, external style, external template, WXS, image media, etc.) are output to the sub-directory accurate;
- render full support wxs function module, about the render function Click for more details ;
- It supports the introduction of templates, inline wxs, custom tabbar, independent subcontractors, workers, cloud development and other native ability to further improve the native compatibility.
Compared with the industry mainstream applets across end frame, Mpx focus more on the development of small programs in itself, have the following advantages in the applet development:
- Applet-based technology standards to enhance their own, have not been re-conversion of DSL, pit encountered in the development will be less;
- Fully compatible with the original technical specifications applet, 0 cost migration native applet project;
- Cross-platform development with a small cross-platform program for the target, much of the variation smooth work at compile time, greatly reduce runtime adaptation layer to increase the volume of packages;
- Industry applet support micro-channel component library (e.g. vant, iView etc.) converted directly to other internet applet running;
- We attach great importance to small program performance, provides depth setData and package size optimization.
For a more detailed description Mpx can view official documents and of this article .
Github：github.com/didi/mpx
Cross-platform development
As the core capabilities of version 2.0, Mpx cross-platform development capability allows users to output directly to compile existing small program has supported projects to other platforms running applet. Small micro-channel program as a proponent of the concept of a small program, has the most extensive coverage of ecology, we will give priority to support the ability of small micro-channel program compiled for other platforms applet. Based on this ability, users can not only cross-platform compiler micro letter Mpx project, even the micro-channel native custom components also the compiler to another small program platforms to run, which means that our cross-platform project can be used directly from existing within some communities of UI component library ecology (such as vant, iView, etc.), greatly enhancing the scope of cross-platform development.
design concept
Mpx core design philosophy is to enhance the framework and enhance the means to do an addition on the basis of native capacity on existing applet, applet development capabilities to expand and improve the efficiency of development experience and applets. The concept is designed to make Mpx developers to bring more certainty and predictability, lower learning to get started and commissioning costs. Based on this idea, Mpx in different applet platform in an enhanced adaptation of the differences, and reference template command style of each platform offers different templates enhanced instruction set, allowing users to each platform applets can to enhance the way to maximize the use of the native capabilities of the platform of its own.
When we provide support for cross-platform capabilities also follow Mpx enhanced core design philosophy. After Simply put, Mpx cross-platform capability is based on a multi-platform capabilities, it adds a layer conversion layer at compile and run time, to convert the source code for the platform code for the target platform, then in accordance with the existing target platform the enhanced processing logic, we also offer a comprehensive set of conditional compilation mechanism, allows users to achieve part of the framework can not convert a few of their own.
Mpx schematic cross-platform development process
Mpx cross-platform capabilities in the industry have been significantly different from the design ideas of other small programs, cross-platform framework, the main difference is that:
- In DSL Mpx applet itself as a reference frame without the use of web (React, Vue) of the DSL;
- Conversion and runtime Mpx mainly by way of compiling processing platform differences, no differences in extra smooth layer (basic component library, etc.).
The reason why this design, based on the following reasons:
- Mpx mainly in small cross-platform program for the objective of the current technical specifications of each platform the size of the program has some similarities, most of the platform differences can be smoothed by the compiler and runtime tools, while eliminating the difference between smooth layer can be further reduced volume framework runtime;
- Using DSL applet itself as a reference allows the user to directly use the existing project across the board, the program for the native small item or component may also be used for the cross-platform capabilities output;
- The perfect combination of conditional compilation support, the program can meet the needs of users across platforms while still allowing users the ability to maximize the use of each applet platform, fully continuation Mpx enhanced core design philosophy.
Instructions
Use Mpx cross-platform development is very simple, users simply pass mode and srcMode parameters specify the source and target platforms when MpxWebpackPlugin creation, and when inconsistent srcMode mode, the frame will read the corresponding configuration of the project to compile and run when the conversion.
// 微信转支付宝
new MpxWebpackPlugin({
// mode指定目标平台，可选值有(wx|ali|swan|qq|tt)
mode: 'ali',
// srcMode指定源码平台，默认值同目标平台一致
srcMode: 'wx'
})
复制代码Smooth out differences
At present the major manufacturers of small program specifications will remain at the macro level consistent, but there are many differences in the details of technology, roughly divided into the following sections:
- Template Syntax / base component differences
- json configuration differences
- wxs syntax differences
- Page / Component Object difference
- api calls the difference
- webview bridge differences
Among them, for the template syntax / base component, json configuration and static difference wxs in our main conversion process by compiling means, for some this part of the differences can not be converted will complain pointed at compile time; and for a page / component object, webview bridge the differences and js runtime api calls, we mainly processed by means of runtime, the corresponding section will not be converted in error pointed at runtime.
It is noteworthy that, we do work in a cross-platform conversion of convertible not only technical standards conversion mapping, the ability for some of the target platform does not exist, we also provide a simulation as possible by means of compilation and run-time and support to minimize the additional workload and cross-platform development needs to pay. With the largest differences but also the most realistic scenes of micro-channel transfer Alipay, for example, Mpx simulation provides a number of capabilities to support micro letter, but did not support the payment of treasure:
- Components custom event
- Relations between components
- Acquiring sub-component instances
- observers/property observer
- Inline wxs
- External style class
For native cross-platform custom components from the conversion, we will be running a simple injection, can be used to run Mpx framework provides conversion ability.
Conditional compilation
For the portion of the frame can not erase the differences will be pointed out an error in the compilation and runtime error for this part, we provide a comprehensive conditional compilation mechanism that allows users to write their own patch to repair the target platform, this capability can also be used to achieve It has business logic differences platform.
Mentioned above Mpx to determine whether and how the project conversion, mode and srcMode represent the target platform and source platform to build the entire project by reading the user and incoming mode srcMode, conditional compilation allows users to create a statement in the project the platform itself attributes (localSrcMode) files and code blocks. In the construction of the project, the framework will give priority to projects with a target platform load localSrcMode match (localSrcMode === mode) of files and code blocks with localSrcMode statement and that this part of the document and code blocks need to be written entirely in accordance with their standard platform stated, Mpx will not be any cross-platform compiler and run-time conversion.
Mpx provides three dimensions conditional compilation, are file dimension, the dimension and code block dimensions, the user can flexibly choose to use internet coverage differences.
Performance Optimization
Mpx framework focused on the development of small programs, performance optimization we have done a lot of attempts and efforts, focused on two aspects:
- setData optimized runtime
- When the package volume optimization compiler Construction
setData optimization
Data response is enhanced Mpx runtime core capability that allows users to watch and computed using the same characteristics as in the Vue small program development, and data-driven views updated with the direct assignment of operations, without the need to manually call setData method in other words framework took over the setData call applet.
Optimize performance and design principles recommended by the size of your platform can be learned, setData for the applet performance is very important, and that setData optimized two directions:
- Minimize the frequency of calls setData
- Minimize the transmission of data a single setData
In order to achieve optimal setData, we are in the process of compiling a template for each component template generates a rendering function (render function), rendering the function logic simulation template, when access times required to render each execution data and returns as a function of time when the accessed data values recorded return path.
At run time, the framework will be created when each component to create a render watcher, that watcher tracing rendering function, asynchronous execution rendering function, the function returns to get the data path rendered in render watcher callback when rendering dependent data is changed, based on these a path for the cached data diff comparison, the minimum necessary data to obtain filtered data is not changed, and finally calling setData the minimum necessary to transmit data to a real view of the applet updates render layer.
That portion of the data based on this mechanism, when the data is changed, only the current rendering dependent portion of the data change will occur asynchronously trigger the execution render watcher, and after each execution occurs only real change will be sent to rendering setData Floor. So users will be able to freely manipulate data according to business needs, without paying attention to calling setData optimization framework enables optimal setData call on automatically, while improving the user experience but also enhance the development of program performance.
In version 1.x, the rendering logic function can not be executed within wxs, for the assembly comprising wxs be relegated to the total amount mode setting data, version 2.0, we wxs translational processing module executable code after injection js js bundle into the containing wxs rendering function can be normally accessed and executed wxs logic.
setData optimization schematic
Optimization Package Volume
For setData similar to running takeover, Mpx took over the management of project resources at compile time. Thanks webpack powerful plug-in mechanism, Mpx developed a depth of customization webpack plug-in, based on the work of building a small package webpack complete the program. Users in the use Mpx develop applets unrestricted use of modern web development capabilities npm dependence, es latest features and css preprocessor and so on. At the same time, Mpx on package size optimization can also do a lot of work, allowing users to focus on business development without having to spend too much energy for packet volume management, we optimize the work as follows:
- Package building work entirely based on dependency analysis, not any resources referenced will not appear in the dist them;
- Npm assembly for building the page and dependency analysis on demand completely packed, will not copy the whole directory miniprogram_dist, need not be performed to build npm, experience and the package size are better than the small micro-channel program itself npm support program;
- Based on the ability to provide webpack common module for extraction and optimization of compression codes;
- Perfect subcontract support, be dependent analysis of all resources, all output to the sub-directory of all subcontractors only resource.
As a sub-optimized micro letter applet package volume of the core means (similar to asynchronous loading on demand), it Mpx be a perfect support. In order to precisely mark only the sub-resources, we build the main and sub-packet depends split open collector serial processing steps, the processing to the main package, sub reprocessing. In the process of the main packet, the main packet all non-referenced pages js resources (components, external style, external template, WXS, image media, etc.) are recorded in the sub-processing, a reference to the subcontracting non-js resources to check if the main package cited the output to the main package, otherwise marked as subcontractors only resource output to the next sub-directory.
For js module resources, we generated constructs scaffolding arrangement provides helper functions to facilitate user configuration sub-bundle, after the configuration, only the sub into the common module are output to the sub-sub-bundle directory, the rest of the public module into the main bundle of normal.
In the cross-platform development, we recommend that you use Mpx provided packages to define subcontractors, so that when converted to subcontract does not support applet platform will automatically downgrade to process synchronization package.
Scheme for construction subcontractors
Progressive migration
Mpx provides a good progressive migration support for developers to use native or other small procedural framework, a gradual migration by way of gradual introduction Mpx development cost is not significant.
In version 2.0 we have further improved the native compatibility Mpx, the follow-up support various applets latest technology platform capabilities, such as custom tabbar, independent subcontractors, sub-preloaded, the ability to workers, cloud development, at the same time fill Qi missing some versions 1.x support. Thanks to this, using the native application developers to develop small, the cost of migration Mpx almost zero, corresponding to the user simply constructor page component replacement createPage / createCompnent Mpx to provide, can be used provided Mpx various empowerment.
For developers using other frameworks, Mpx also provides a mechanism for local construction, allowing users to specific pages and components alone build output to the native components, users only need to manually or native components written script output integrated into the original project that is can.
future plan
As a small company infrastructure, internal procedures and pieces of ecology, we will Mpx framework for long-term maintenance updates, make sure to support each platform applets latest technology features the first time. At the same time, we will further improve the basic competency framework, has been rafts schedule to be supported capabilities include:
- i18n
- ts support
- Unit Testing Support
In terms of cross-platform capabilities, we will be based on community feedback and suggestions, as well as standardization process applet, its continuous improvement and renewal.
Finally, if you focus on small program development, focus on development experience and product performance, that Mpx will be your best choice.