Template warehouse

What is a template repository

From the beginning of code writing, programmers have been doing some lazy actions. For example, when I first came into contact with small programs in 2017, as a front-line developer, I had to spend a lot of time on the research of small programs. The process from 0 to 1 was often the most difficult.

Our team leader told me that for a new thing, going from 0 to 1 is very difficult, and going from 1 to 10 should not be so difficult, and good practices should be deposited so that the next development will be less laborious.

At the beginning, I did a lot of integration work to this small program, public things as far as possible to extract, next time when others develop, directly take me this thing to use the line.

Later, slowly, a warehouse template was directly integrated for others to use. (This template is our template repository.)

According to my personal experience, as an aside, most of the front end teams in China are relatively low, and many companies basically have no precipitation in this aspect.

Based on this theme, I roughly divide these companies into three levels:

1. Any project, generated directly through scaffolding, then developed directly on top of it. Or directly in the community, take a case, modify into their own project, and then carry out secondary development. This is the first level.

2. For a new project, sufficient research, continuous integration and subsequent secondary development can reduce a lot of time in the process of practice. This is the second level.

3. Form a complete warehouse template system (PC end, mobile end, small program end, and even other technical stacks), provide complete operation commands, and have complete practice in code specifications, templates, routing, styles, monitoring, and burial points. This is the third level.

How to do template warehouse

Based on personal practice, I think we should start from these aspects

1, the specification

The specification should be divided into several points: one is support for the GIT specification, another is support for the coding specification, and some other Settings of its own.

GIT specification support is mainly reflected in githooks and commit message format verification, so that we can better manage GIT commit specification.

Support for coding specifications is mainly reflected in esLint and stylelint. Eslint is used to check JS, TS, VUE, JSX, etc. Stylelint is used to check CSS, LESS, etc.

At the same time, checksum fixes are performed during the Githooks PreCOMMIT phase.

For this part: refer to two articles written by individuals:

1, GIT specification: juejin.cn/post/685705…

2. Lint specification support: juejin.cn/post/685819…

2. Base library selection

Base library selection, is to use more well-known, everyone is using things, our project development.

Essentially, you maintain your own package.json file.

An individual would use these libraries for a VUE project

Axios, Element-UI, Lodash, Moment, vue, VUE-Router, vuex, MD5

3. Basic code integration

It is divided into several parts: file directory structure division, Pages/Views, Components, Router, Store, styles, and so on.

1, personal VUE template repository, the directory is roughly like this

2, the components,

This section, called components, should be something that you feel can be integrated into a project and, in most cases, be used for.

3, views

This section, representing the view, should provide a demo-like page to help developers quickly generate pages for secondary development.

4, styles

This section, which is the common style, usually includes two files, reset.css and common.css.

Reset.css is an initialization of the style.

Common.css is a collection of commonly used layouts.

5, store

Represents the data, which is where vuEX’s integration takes place.

4. Provide commands

For example, we develop a new page, at this time, it is inevitable to create some new files, introduce components and other relatively high repeatability of some operations.

For example, on the PC side, the most commonly used business has three types: list page, detail page and form.

We can generate a simple page using a simple command, such as NPM run addPage. Then on this basis, direct secondary development.

5. Other integrations

This part, more inclined to business, need the company to have enough precipitation. This is reflected in several aspects.

1. Tool library integration.

This section is a special topic, and its purpose is to integrate the common tool classes of the company.

For example: time formatting, date formatting, mobile phone number check, bank card check and so on these close to the team internal things, integrated.

You can publish the NPM package to the NPM and then access the template repository.

2. Business component library

If we use Element-UI on a regular basis, it’s easy to see how it can improve our productivity. But its location — the base component library.

A business component library is something that is close to the business, relevant to our internal use scenarios, on top of Element-UI, repackaged and reusable, called a business component library.

If you have something like this on your team, plug it into your template repository!

3, monitoring and burying point

If there are internal monitors and plugins for the front end, plug them in.

But if it doesn’t (and I think most small companies don’t), it can be accessed through a tripartite platform. Personally recommended Ali – Yue Ying monitoring

YueYing: yueying-docs.effirst.com/start.html

Burying point and monitoring, another topic, the follow-up will be a series of articles to share.

Personal practice

Personal idea now is to provide several basic template warehouses, divided into two ends: PC, mobile. The technology stack option provides repositories for the VUE version, as well as the React version.

Vue for PC: github.com/mapbar-fron…

React for PC: github.com/mapbar-fron…

However, these warehouses are currently being updated, and I will improve these contents as soon as possible.

Write at the end: This article is part of the author’s feature “Technology Building for the Front-end Team.” See the following article for more information: juejin.cn/post/685705…