written in front
Friends who have read the blogger's articles in the past six months know that the bloggers are all investing in an open source project-concis react component library.
The blogger of this article wants to talk about his understanding and practice of front-end engineering from the perspective of a component library project.
Early Front End vs Today Front End
Students who study the front-end systematically know that the earliest front-end development (cutting image development) is actually to insert css files and js files into html files. If you have a wide range of knowledge, you may also introduce jquery.min.js~
The early front-end project may look more like a folder, which contains html, css, and jsthree folders, so the description may be too real~
But now is the era of separation of the front and back ends. About 2009, , and node, npmwere born, and then in 2012 webpack, , were born one angularafter another .reactvue
At this time, the front end looks a bit close to "engineering". You can npm init -yquickly generate a package management project, and select the libraries you need in a series of projects such as your front-end framework and build tools. Or you can use the tools that come with the front-end framework clito quickly generate a front-end project project. At this moment, your front-end project looks like this:
Under the src directory, following the principle of front-end componentization, the directory looks like this:
With the help of nodeand npm, you can start a local service in the development environment in the independent environment of the project, for example npm run dev, or perform packaging to produce code in the production environment of the project. For example npm run build, these are the progress of modern front-end engineering.
Front-end engineering
Now let’s look at front-end engineering, which actually includes a lot. The author works in Xiaomi. In fact, when he graduated last year and joined the job, he was still ignorant of front-end engineering. After working for three months, he felt some engineering. Specifications" can be roughly listed as follows:
- Code writing specification and format specification
- Process specification before project launch
- Modularity in projects
- page componentization
- Automated Deployment
- unit test
First of all, the first point is that + + + 代码编写规范和格式规范is usually used in the project to configure a pre-commit pre-check specification. If the code you add has an irregular format, the commit will be intercepted. This is for a school that has just entered the school. The most impressive point of team development.eslintstylelinthuskypretty-quickpre-commit
The second point, 项目上线前的流程规范, our projects are usually divided into development environment, test environment, and production environment, which also correspond to the git, dev, testand mainbranches in the development environment. There is no problem in the self-test in the development environment, and this time commit hash versionthe cherry-pick will be transferred to the upper-level branch. Deploy until it reaches the online environment. And I have already written my own project at school, thinking: "Where are there so many messes???? Hahaha".
The third point and the fourth point, 项目中的模块化、页面组件化these two points usually occur in leader reviewthe link, and some modules or components that should be split out are not well designed, and they are usually reworked.
Fifth point, 自动化部署our company adopts docterautomated deployment, which is much more efficient than manual deployment, 自动and 高效also reflects the value of "engineering".
The sixth point, 单元测试what I have learned in the company now, has a great guarantee for code security and confidence, and usually runs all the single tests automatically before going online and deploying.
These are some points that the bloggers have deeply felt and fit in their actual work 前端工程化.
Thoughts in concis
In March of this year, the free time of the department increased, and the blogger also stepped into open source and started to build a component library. The specific article is here:
In the company, it may only be responsible for a certain point in the project. Since the blogger is not old enough, he does not have the ability to be independent, so this open source project is equivalent to the practice of the blogger.
Modular
First of all, the engineering of the component library has similarities and differences with routines and projects, and the points of consideration are also different. First, in terms of packaged products, a good component library should support the use of various module scenarios, so to Bthe packaged The product is like this:to Cconcis
In this way, the component library can be used under different modules, and to Bfor to Cbusiness projects, the operating environment of the project is known at the project evaluation stage, such as background management running in the pc h5 environment; for a client project, our company runs in electronthe …
css engineering
Since the component library will have personalized and flexible configuration support such as theme switching, custom themes, and custom class name prefixes, each component should have the characteristics of 易扩展, 易维护, 不容易炸and the specific link is here:
Experience concis custom themes online
automated test
Components are exposed to users, so good, multi-scenario unit testing and e2e testing are essential. Test cases are prepared for each component in the project and will be used in many scenarios. In the main application scenarios It is in pr checkthe middle, whenever the main branch of the project is pushor pull requestis available, it will run the test cases of all components (in the github overflowmiddle), so that problems can be solved and checked in time.
Fully automatic contract
The component library must be npm包updated and iterated. The earliest bloggers manually git add, git commit, git pushand went to the github project to type tag. In the end npm publish, this was very troublesome, so the blogger made a tool — cimi, which is used for concisone line when a new version is to be released Commands complete everything, efficiently and conveniently, which is also a point of "front-end engineering", automation.
It is very convenient to send a package like this every time:
monorepo architecture
At first concisit was just a component library, and the project directory structure looked like this:
The combined pnpmdependency promotion mechanism and concisother subpackages are also required, such as mobile component, vscode 插件, so the original front-end engineering architecture is converted to monorepoarchitecture, and the changes are as follows:
This can not only better manage multiple packages in one warehouse, but also share a series of basic configurations, such as tsconfig.json, package.json, jest.config.json, and in a warehouse, you can also follow the code specification issues mentioned in the previous section, and these projects will be integrated in a warehouse.
end
As above, it is the blogger’s small understanding and feelings after the practice of front-end engineering based on work and open source projects. If the article is helpful to you, you may wish to give it a thumbs up~
Finally, I will post concissome links, I hope everyone can star support~