Zero, preface,

Meituan has Lego, JINGdong has Babel, Ali has Feibing, big factories are trying to use automation tools to reduce labor, after reading this article, consider building a set of automation development tools for your team!

The background,

My company is not a big one, so I found some pain points.

1. The front research and development with business, different departments technology stack is multifarious, support for the same position difficult. (the react | vue | the seek. Js),

2. Inconsistent standards, cross-department projects, anda sea of editors.

3. Component reuse is difficult, process is wild, and development is inefficient. Basically just scrolling through the project, finding the code, CTRL + C, CTRL + V, and messing around.

Second, development ideas

Use basic template + material (component) to generate project quickly, and then develop again

When writing the react project, the author used the plug-in generateReactComponents of vscode, which felt very convenient. Considering how to efficiently reuse and quickly generate projects instead of writing a whole set of coupling business components? It took about 3 months of spare time to make the current tool, Joao-CLI, to achieve the following results (recorded in the company’s internal version, the open source version is joao).

Click on the Joao CLI official website

Joao is mainly used for VUE projects. If your project is implemented based on React, it is recommended to use fusion.design officially maintained by Ali, and Ali platform has already connected material library and UI layer.

The general idea of completing a scaffold + material library is:

1. Create an empty project first

Install UI component libraries, ESLint, line of business tools, font libraries, etc… Highly coupled business.

Here I take the empty project on Github as an example, click me to view

2. Build a material warehouse

Create a repository that developers can participate in, fix specifications, and maintain common components, which can be viewed in the Material folder at the root of my Github project.

Here is the material library, the connotation of the official website code + material library code (not many materials for reference only)

3. Perfect tools for template pulling, material stripping and installation

This is what joao-cli does. You can try to write your own version with Node. Using commander + git Clone, you can pull and delete the.git

Pull materials from the library, whether components or modules, and use node’s FS to read files. This is done by replacing the private properties with placeholders. Here we refer to vscode’s generateReactComponent and replace modules’ name with __className__ as the default placeholder.

Finally, git coreConfig. sparse-checkcout was used to update the specified directory of the material library.

Because the content of Node is more, here will not repeat, here dig a hole will complete the joao-CLI node teaching, the code is actually very simple, even can say low, directly look not difficult.

Joao – CLI some instructions.

// Install joao-cli NPM install joao-cli -g // Initialize the project joao init // View the current material joao check // Update the material library (from github material library) joao update // Install components Components in the project root directory use joao add -c name A name B... // Module installation (page-level content) Use joao add-p to create a random page name in the project root directoryCopy the code

Play by yourself and you’ll probably see what’s going on.

Iv. Comparative analysis with Ali Feibing and Meituan Lego

First of all, after writing this tool, the author studied the finished product project of Dachang.

The idea behind Meituan Lego seems to be engineering with the back end, which is a great idea, but there is also a lot of interface programming analysis in the Nuggets right now.

Ali Feibing wants to achieve large and complete, this tool is to reuse code, with no binding technology stack, Feibing made small program materials, VUE materials, are the community to help do, more people is the power ah, but also wrote app with electron, you can really want to do big heart. However, the coupling business has to rely on their own, fly ice to play enough, medium-sized companies or their own.

Ali Fusion-design has done what I dreamed of. The material library opens up the UI layer and automatically generates front-end code, which is really great. Unfortunately, the author’s project team is full of VUE.

All above are comments of this diaosi dream, no responsibility during the day.~(@^_^@)~

The advantages and disadvantages of such development

1. Enhance project maintainability. Unified template means unified technology stack and unified specification.

2. Increasing the availability of components in a common store means the difference between maintaining n sets of code and one

3. Improve development efficiency and bid farewell to the sticky labor life of replication projects.

The bad

I didn’t even push it in my own factory… When you have to work by yourself… At present, the biggest disadvantage is to write high material cost, after all, only their own reuse… Left hand for right hand is boring…

Six, read aloud

As you get older and less willing to share, advertise your last post — build a machine learning platform like Ali PAI

Finally, thanks for watching.

Joao cli website