The author
Shen Chuang, senior front-end development engineer
At present, front-end projects are mostly implemented based on Vue, React, Angular and other frameworks, which all have an obvious characteristic: modular and componentized thinking. So, using the framework, developers are essentially writing components one by one, nested within each other. When the same feature appears multiple times in a project, they choose it
Extract it and put it in the Components folder to reuse it, but the reuse is based on the same project, so when you write another project, you have to start writing the same code again.
We have multiple lines of business, and when we do front-end projects, we always get stuck writing code over and over again, so we did it
Next, I will share CMS based component reuse practices based on my practice in the front-end work process.
To reuse components across projects, you need to solve the following problems:
1. Components need to be decoupled from each other and from each project
2. The component needs to give the usage method (document)
3. Components must be able to run independently
4. Components need to be versioned and loaded on demand
5. You need a tool to manage and present these components
To solve the decoupling problem between components and projects, we need to remove the components and other components and the coupling part of the project, and pass in props. To distinguish these props from ordinary props, we put them in an object named DS. Typically, these coupling parts will be API or VUEX calls or front-end routing operations.
At the same time, in order to facilitate the writing and maintenance of these components, we set stricter constraints on the components, and these reusable components that meet the constraints are called “blocks”, meaning a functional area that can be independent of the project.
In the process of decoupling, we found that the code for these blocks could have some duplicate parts, such as some optimizations for DS and registration of mocks, so we developed a vUE plug-in. We developed a WebPack plug-in for reference on demand and Mock data removal in production when using blocks in the project.
In the practical process, in order to realize the reuse of components, components need to be written according to a fixed structure, but also need to modify main.js and Webpack configuration work in the project, so, we developed CLI tools and GUI tools to generate project and component base files, while managing and debugging components.
After completing the CLI and GUI tools, the specific development process is as follows:
1. Use the CLI to generate a project
2. Develop the page
3. Find the appropriate block from the GUI tool and use or download code tweaks directly
4. Page development is completed
5. For reusable functions, use CLI to generate basic block files for block development
6. Upon completion of development, the project will go online and release the block library
7. Next time you develop a project, you can either use the block directly or download the code
After using the block development mode, while the development process is not much difference compared with before, but effectively improved the speed of development, at the same time can also break up the mission more fine, for beginners of the team, a business component with a document is more easily accepted by them, for the business of overhand speed is faster.
This article is based on the senior front end development engineer Shen Chuang’s speech in The national tour salon of TechDay in Guangzhou.
Next, TechDay National Salon will also go to Chengdu, Hangzhou, Shanghai and Shenzhen, and invite technology masters in the industry to exchange and learn with you. Please look forward to it!