The third major problem and solution of Applet development

After publishing the mini-program documentation and development tools, Pulse software was able to learn and experience it for the first time. we found that the technical architecture and development experience of mini-programs were disappointing. Because the running environment of the applet is not a standard browser environment and the encapsulation work is not complete, many of our past development experiences are not applicable. This is not a simple development habit. More importantly, our development processes and specifications will not apply.

After publishing the mini-program documentation and development tools, Pulse software was able to learn and experience it for the first time. we found that the technical architecture and development experience of mini-programs were disappointing.

Because the running environment of the applet is not a standard browser environment and the encapsulation work is not complete, many of our past development experiences are not applicable.

This is not a simple development habit. More importantly, our development processes and specifications will not apply.

The first sin of Applet development: the NPM package cannot be called

Although the require function is used to load dependencies when the mini-program development tool is packaged, it is not a complete CommonJS dependency management. Because the require function can only load JS files in the project, and the JS file path must be strictly defined. the path does not support the path style of CommonJS. For example, errors will occur in the following loading methods:

require('lodash');require('lodash/map');require('./foo');

In the applet development tool, we must write the corresponding format as follows:

require('node_modules/lodash/lodash.js');require('node_modules/lodash/map.js');require('./foo.js');

Although we can load the library in the node_modules directory like the code above, but the actual runtime occurs:

On the Network tab of the debugging tool, we can see that more than 1000 files are loaded at runtime, with a total data volume of 1.8 MB. Instead, we only load a lodash library in the code! This is because the applet development tool treats the js files under all projects as project files and packages them. In actual development, we need to install a lot of NPM extension libraries, which contain a large number of files that do not need to be packaged. for example, lodash contains thousands of files, however, we only need to use a very small part of it.

In addition, during development, we often need to install babal, eslient, webpack, and grunt to wait for the development tool, mini-program development tools will also package the source code of these tools ...... tested developer tools will crash! Developers will crash! I crashed!

The reason why NPM packages are not supported is that the developer tool does not support the CommonJS standard and does not support the CommonJS standard. the developer tool assumes that the js files under the project directory must be project files, therefore, only simple require functions are implemented. the reason for this is...

Second sin of Applet development: the inability to use Babel transcoding

The reason for the inability to use Babel transcoding is that the NPM library cannot be loaded. But the consequences will be very serious. Because you will no longer be able to safely use ES6/7 features, you will not be able to use async/await functions, and you will struggle with endless callback. how do you describe yourself? Call back the hard-pressed programmers in hell?

If you don't understand what Babel is, congratulations. you don't have to worry about not supporting ES6/7 because you have never seen heaven. But once your brain supports ES6/7 and has used Babel, you will not be able to go back. like me, no Babel is not encoded.

The third sin of Applet development: component reuse is not allowed

In fact, small program development is not completely unable to reuse components. for example, the WXML syntax supports import and include. However, it is only the view template reusable, not the component reusable, because we think that the component should contain the view and logic.

WXML is actually based on reusable components, but we cannot customize them. If you have React experience, you will understand what I mean.

For example, your applet is an e-commerce APP, and there are two pages in the project that contain the product list components, such as the product list and search result list under a certain category, we know that the two lists are actually just different parameters. However, in small program development, you can only abstract the list template and cannot abstract the logic. Therefore, you need to implement the list component control logic on both pages, for example, refresh and load more...

Our practices

It is immoral to only SPOF and kill the virus. since we have discovered various drawbacks in small program development, we have summarized a set of processes and tools in the development of Pulse software, designed to solve the above three problems and released to the open-source community for free, this is Labrador. Next, let's try out the development experience of the Pulse software.

Install Labrador

Use commandsnpm install -g labrador-cliInstall the Labrador control line tool globally.

Initialize a project

Run the following command to create a Labrador project:

mkdir democd demonpm initlabrador init

After the project initialization is complete, the directory looks like this:
The code first introduces the labrador library to replace the global default wx object, and uses the labrador. createPage method to replace the global Page function declaration Page. Load the List component class, add the components attribute in the page declaration configuration, and pass in the List component class instantiation. The labrador. createPage method encapsulates the Page method to associate with component objects during Page initialization.

In src/pages/index. add the code @ import 'list' to less to call the list component style. if the list component cannot be found in src/components/list. less, then the compilation Command will look for node_modules/list/index in the NPM package. less.

Add code to src/pages/index. xml You can call the list component template file. component is a Labrador custom component. after compilation, the corresponding import and template are generated. If list. xml cannot be found in src/components/list, the Compile Command will search for node_modules/list/index. xml in the NPM package.

You still need to do it yourself for the specific experience. the article is over now. thank you!