background

Four years of work experience, the first two years of full-stack development, the second two years of full-time front-end, now I have reached the level of senior front-end engineer, experienced three companies. First company, electricity industry, do ali ISV vendors, service for taobao sellers, is also my first contact with millions of UV levels of products, the first company for two years, due to technical bottleneck period, hence job-hopping, second company, the shipping logistics industry, and spent six months (working intensity for me, it is really high), physical discomfort, Did not agree to a full term. At present, I work as project management and front end group leader in this company. I have been here for two years, and I have done a lot of things. I want to talk about my ideas with you.

The environment of entry

This is a company engaged in insurance and financial industry. It is a technology company in the traditional industry, which has the nature of outsourcing. Of course, it also has its own SaaS products. When I just came, the last front end to resign, and then do docking work (tell me, what is the problem, directly search the code), I am a dish man, the predecessor left the shit mountain, others, probably have the following points:

Front end group of 4 persons

One of them is in the charge of CTO (back-end), and the other two are in Guangdong. When I joined the company, I did not confirm whether I should bring people. When I came, I was already in the back of my leadership told me to take them, I did not have the idea of taking people at that time, is also a pit.

There are many history projects, all based on a set of project frameworks from GitHub

  • Without front-end engineering system, development cycle is long, development quality is poor and maintenance is difficult

  • The front-end code runs on the server side. If you modify one line of code every time, you need to drag it to the server for compilation. It takes about 1-2 minutes to compile, which is very painful.

  • People who are fully familiar with the project have left (technical and product), and the project handover has not been handled well.

  • The business logic is very confusing, there is no related product flow chart, it is all from memory.

  • The Node version running on the server is very low, it is still 8.x, various lower version libraries are present, such as 3.6.2 for Ant Design, during project development, I encountered a shuttle box and could not display the tree (the code is exactly the same, in the higher version 3.19.2, can display). For example in this “translate. Js” again: “git+https://github.com/MichelSimonot/translate.js.git”

  • Tried to upgrade the library and uninstall other libraries, various errors reported.

  • Lack of comments, thousands of lines per file, lack of understanding of React and Redux usage.

  • There has been an “explosion”, if the project continues to iterate, it may continue to “explode” at any time, and it is already in the development stage.

    On October 18, 2019, at 24:00, a production accident occurred. The accident was caused by the browser crashing and jamming when operating a specific page.

    Script execution time is very long, after checking, is caused by the following code

    actions.getAgentListByPage({
    companyId: currentAgent.companyId,
    pageIndex: 1,
    pageSize: 20000,
    searchProvince: currentAgent.province,
    searchCity: currentAgent.city
})
Copy the code

    The request pageSize: 20000 exists in many places of the page. The code is written by the former front-end. The specific reason for writing such code is unknown.

  • There are two systems running on one set of projects.

  • The packaged project code is 49.5MB in size and the page takes 11.4 minutes to load for the first time

Based on the above reasons, I proposed restructuring to the leader, but did not agree. I think there may be two concerns.

  • In terms of human resources, it is not allowed.
  • From a strategic point of view, projects that make money are good projects. However, this doesn’t stop me from building front-end engineering systems.

Project personnel are weak

  • Test students reported bugs, no record reproducible steps.
  • The task management tool platform is not really utilized, related project requirements, and bugs are not organized on it.
  • The product does not understand the general technical implementation, does not sort out and retain the product documents, and does not understand the real needs of customers, so that the technical implementation is weak.

There is no related document for connecting the front and back interfaces

The prototype of product drawing and UI design draft are not standard

After listing the above points, there are too many mess. Fortunately, there is one point, the support of the leadership is not bad. Look how I broke through the siege.

Know your mission

The core purpose of the front-end technology construction, is in order to improve the development efficiency, ensure the quality of development, for ensuring high quality project delivery on time, both to consider long-term development actual situation, combined with the actual ability, team do technical reserves for the future, to provide more possibilities for business development, their own roughly divided into the following four categories

  • The main purpose of infrastructure design is to avoid common problems and improve development efficiency through process design from the framework level.
  • Engineering design is strongly related to code, and its main purpose is to improve code quality, enhance the long-term maintainability of code, and reduce development time and cost.
  • Team management, through reasonable and effective team management, improve the team man-efficiency ratio, for future project research and development, technology development, talent reserve, technology research and development.
  • Project management, reasonable project management, appropriate time schedule and iteration plan, improve project delivery quality and efficiency.

How to solve

First of all, the existing problems should be sorted out and summarized, sorted according to the priorities of the problems, and then phased goals should be achieved. For the above problems, I have roughly sorted out a table

The problem priority The cost of The target
How to build front-end engineering system p0 high Improve the development efficiency, on-time delivery and quality of the whole front-end team.
How to manage a team p0 In the To reserve talents and improve the technical ability of team members
How to manage the project p1 In the Being on top of things, knowing what people are doing under the project, coordinating resources

Team management

Personnel management

  • The first thing is to have a chat with everyone and get to know his/her ideas, personal information, technical ability, interests, personality and so on.

  • Group build dinner party, often ask everyone to drink milk tea/coffee, irregular organization activities, usually dinner party (personal money), for the following work, good to carry out.

  • After the new person comes in, arrange someone to lead him to answer the common questions, from simple needs to core module responsibility, exert pressure bit by bit.

  • I was responsible for arranging the development direction of new members, understanding the project framework and development mode of new members in the first few weeks of their entry, and then arranging them to do optimization based on the existing page, helping them to understand the business of different people.

  • Responsibility division, clear the positioning of team members, and let them know, according to the different abilities and attitudes of members, arrange tasks suitable for them.

  • Weekly front-end meeting: organize everyone to hold weekly front-end meeting once a week. In this meeting, we will review the current affairs of everyone, whether there are any problems, some resources that need to be coordinated, progress control, etc.

  • Technology sharing, front-end technology sharing from time to time, with no limitation on the theme, and upload the relevant shared information to front-end document management for convenience of future personnel to view.

Rights management

Mainly refers to the code permission control, the purpose is to ensure that the code security, problem control can avoid traceability

Specific management measures are as follows:

  • The company’s warehouse, the code belongs to the property of the company, conduct permission isolation for the code, enable Intranet GitLab, close all external access permissions by default, and assign specific permissions to development according to actual needs for each project.

  • Submit permission, which allows development to be submitted under its own warehouse, but involves the consolidation of the company’s warehouses, which requires PR and then CR by the team leader before it can be submitted to the main warehouse.

  • Publish permission. For publishing to the production environment, the permission is given to the group leader and only the group leader is allowed to publish.

Front and rear interfaces are interconnected

There is a serious problem in front and back end development coordination, that is, when the back-end interface changes or field changes, the corresponding front-end developers and testers are not informed beforehand and afterwards, resulting in low efficiency and various abnormal situations.

Therefore, through combing the development process, outbound interface documents, as the docking standard.

We use apiDoc as the standard of front and back end intermodulation.

However, in the actual situation, there will still be some interface documents and the actual interface is inconsistent, resulting in some problems, which we are also thinking about.

Front-end engineering system

When I just joined the company, THERE were too many problems in the above project framework, and I tried to solve them before, but I could not solve them. The leader also realized this, and a new project came in, so he asked me to make a new project framework. Therefore, I developed a set of Project framework and engineering system based on Webpack. The purpose of doing this, as I mentioned above, is to improve the development efficiency of the whole front-end team, ensure delivery quality and on time.

Infrastructure Design

Git branch management is normalized

We use a Git Flow branch management strategy

Git Flow was first published and widely popular by Vincent Driessen in 2010, more than a decade after it was conceived, and Git itself has only recently been around. Git Flow has become very popular with many software teams over the past decade

Branch naming convention

  • Master branch: There is only one master branch, which is named master. GitHub is now called Main

  • Develop branch: The develop branch has only one name

  • Feature branch: feature/< feature name >, for example: feature/login, so that others can see your work

  • Hotfix branch: hotfix/ date, for example, hotfix/0104

Branch instructions

  • Master | | main branches: store the official launch of the product, the master | | product requirements on the main branches in the deployable state at any time. Master | | main branch only through a merger with other branches to update the content, prohibit directly in the master | | main branch.

  • Develop branch: Summarize the work done by developers. Products on develop branch can be half-finished with missing feature modules, but existing feature modules can’t be half-finished. The Develop branch can only update content by merging with other branches, and does not make changes directly in the Develop branch.

  • Feature branch: When developing new features, create a new feature branch from the master branch and develop on the feature branch. After development is complete, merge the feature branch into the Develop branch and delete the feature branch.

  • Release branch: When a project on the Develop branch is ready for release, a new Release branch is created from the Develop branch. The new Release branch can only be used for release-oriented tasks such as quality testing, bug fixing, document generation, etc., and no additional functionality can be added. Once this series of release tasks is complete, you need to merge the Release branch onto the Master branch, tag the Master branch based on the version number, merge the changes made since the release branch was created back into the Develop branch, and finally delete the Release branch.

  • Hotfix branch: When a product in the Master branch has a bug that needs to be fixed immediately, create a new Hotfix branch from the Master branch and fix the bug on the Hotfix branch. Once the fix is complete, merge the Hotfix branch into the Master branch and develop branch, add a new version tag to the Master branch, and finally remove the Hotfix branch.

Submission information specification

The submission should describe “what was done” and “why it was done,” plus “impact,” if necessary, and consist of three main sections: Header, Body, and Footer.

Header The Header contains only one line in the format of

(

):

.


Type indicates the type of submission. There are eight candidate values:

  1. Feat: New Feature

  2. -Leonard: Fix the problem

  3. Docs: document

  4. Style: Adjust formatting (without affecting code execution)

  5. Refactor: refactoring

  6. Test: Adds a test

  7. Chore: Changes to the build process or helper

  8. Revert: Undo a previous submission

  9. Scope is used to describe the scope of impact of a submission, depending on the project.

Subject is used to summarize the submission.

The Body is omitted

Footer omit

The benefits of doing this under this project:

  • For branches, I can see what everyone is doing.
  • For changes, look at the prefix to see what was changed in the file.
  • For version iterations, lookTagWhat’s on the line.

In short, at a glance.

Basic developer process

In this process, developers can only control the personal warehouse and cannot directly change the company’s warehouse code. When it needs to be submitted to the company’s warehouse, they need to initiate a PR request and merge the code into the company’s warehouse after the group leader CR.

The main branch code is isolated from the online code. The team leader releases the specified version of Tag to the production environment, and then the operation personnel directly pulls the specified Tag from GitLab and packages it for release.

Through the above process, the front-end code can ensure high quality, high stability of the state, running on the server side.

Engineering design

According to the actual business situation, team size and technical level, the key is to form a closed loop. The so-called closed loop is a full link from zero to online and then to iteration, with many nodes. These nodes need to be designed according to the actual situation to avoid excessive design.

Customize the Webpack project framework

Why not create-react-app

Create-react-app is a webpack-based packaging layer solution, including build, dev, Lint, etc. It takes the packaging experience to the extreme, but it does not include routing, is not a framework, and does not support configuration. So, if you want to modify part of the configuration based on it, or want to do technical convergence outside of the packaging layer, you run into difficulties.

Why not Umi

Umi offers many functions, which makes it too bloated. And you have to learn its encapsulation configuration, rather than learning the native third-party library configuration, if you just want some simple functions, the pursuit of higher playability, which UMI is not suitable.

So, I custom-built a set of scaffolding to do the following:

  • React, Mobx, Webpack, and React Router can be used to build a backend management platform
  • A routing system based on the React-Router implementation
  • Loading, do not need to repeatedly write component Loading judgment
  • Internationalization, based on the react-Intl-universal implementation of internationalization
  • Network request, request interception based on AXIOS implementation
  • Page interaction, based on mobx data interaction
  • UI, using the industry’s most famous Ant-Design
  • Code specification verification, using ESLint, pre-commit, Lint-staged, Prettier, stylelint
  • Simulate request data, based on a MockJS implementation
  • Packaging tool, by far the most popular Webpack

The following problems are solved:

  • Constraining developer code specifications
  • Easy to provide to other developers using standard scaffolding, and provide technical support

Complete the entire coding process with a closed loop:

  • Pre-coding: coding specifications, best practices
  • Coding: self-developed project framework and code verification
  • After coding: Release deployment tool JenKins, manual release or CI/CD

These nodes should be done at minimum cost, depending on the actual situation, and then gradually upgraded. For example, coding specifications, such as Airbnb’S famous JavaScript code specifications, were used with ESLint, Pre-commit, Lint-staged, Prettier, and Stylelint for constraints.

This project framework, the current development experience is very cool, in our company’s many product lines, put into use, and has been open source, the framework address, demo page is relatively few, if you feel good, you can give Star 🌟, also welcome to the project issues ~

The business scenario

We are engaged in ToB business, and there are a lot of use of forms on the page. Therefore, we make our form page configurable, realize the configuration of most page forms, and reduce the input of front-end human resources.

In view of the company’s actual business scenarios, other subsystems not particularly complex, page won’t be much, to share a set of account system, the idea here is only a project, regardless of master-slave system, through the Webpack configuration page, the more different subsystems into home page content is different, different loading content, menu navigation, The backend is used to differentiate each tenant, so that tenants can see different menu systems.

If the subsystem is particularly complex and has a master-slave system concept, consider using microservice design, which is not covered here.

Static resource

In addition to the business code, there are some common static resources on the front end, such as React resources, Ant Design resources, BizCharts resources, and some image files.

These files are shared by all projects. If these files are scattered among various projects, it is unnecessary and easy to cause the dependency files of different projects to be inconsistent.

We put it on S3 to accelerate CDN static resources, and then the front-end project uses these resources by introducing URLS, so as to reduce its own server network bandwidth consumption.

The project management

  • Task allocation, product related requirements, after discussion, feasibility analysis, through the project management tools, into the iteration plan, input development hours, test hours.

  • Document management, the use of project management tools with documents, documents can be team editing, you can view the editing history.

  • Weekly meeting of the project, we will discuss the current iteration progress, problems encountered, resources to be coordinated, risk control, etc.

  • In project review, the first thing to do is to make a statement of facts, start to diagnose and analyze the reasons for the differences, find out the root cause of success or failure and summarize the rules. Understand why it works, what key actions work, what conditions apply to those actions, and how valuable they are to the success of follow-up.

Familiar with product line business

The so-called technical service business is to find products to understand the existing business processes and pain points, and even some product planning to be done in the future. Good technical architecture requires consideration of various business scenarios, and how to design more granular components based on the complexity of business.

Draw a product architecture diagram

Improve the capability of related personnel

Product personnel

Demands are frequent and confusing, and decisions are erratic and start all over again. A good product manager in the market is very expensive, no 30 or 40 thousand is not enough to get a really reliable product manager who can resist complex product lines, but many company owners are not willing to spend this money, generally they will hire a product manager who works for one or two years to come first, the top position to make this tool. Precisely because of such a cognitive cause product manager this layer when he didn’t say, can’t let themselves idle again, so there are plenty of demand of came up, and the type of product architecture for a long time for the company to control not to live, if a product manager cannot play, responsible to the customers, responsible for the development, not for all requirements in terms of screening, the demand will only throw it to the development, No time control and quality control. Even to the existing product has what function, do not understand, then it is not a qualified product.

Therefore, the requirements for product managers are very strict, because a company, if the strategic direction is grasped, then the core is to see whether the product can grasp the market direction, is very critical. So as to determine whether or not you can occupy the market, because we are doing a ToB SaaS platform, therefore, must be product manager with a clear understanding of customer needs, the actual scene behind the demand, which is extracted from common requirements, which are customer customized requirements, and then discuss, to be born again the actual development.

The tester

For testers, try to cover all scenarios, ensure the smooth flow of the core process, and find the repeat steps to improve the efficiency of BUG solving.

The design specification

Since our company uses Ant Design UI library, the Design standards are made in accordance with Ant Design ready-made components and styles as far as possible to avoid secondary modifications in development. Please refer to Ant Design Design principles in this link

A list page

The general list, and the design, and the product are all agreed upon, with filters at the top, buttons at the bottom, and table displays at the bottom.

A detail page

The details page makes heavy use of forms, so use Ant Design’s From form component directly.

The number of rows in a form is based on Ant Design components.

This has the advantage of avoiding custom development as much as possible, and all lists and details are developed in this style.

Executive achievement

Development efficiency

The efficiency of staff development in the group has been improved by about twice as much as before. The common list page (search, display and popup) includes interface joint adjustment and self-test, which will be completed in about 1 day; the detail page, more complicated form interaction and form component linkage, which will be completed in about 2 days, including interface joint adjustment and self-test. Currently we are also exploring Vite, Snowpack, which greatly improves the development experience.

system

The SaaS system took 3.22 seconds to load without cache for the first time, and the three systems (30 + pages, 14 common components) were packaged in 9.3MB

There is certainly room for improvement

The design specification

At present, most pages do not require Design resources, try to follow the Ant Design Design standard and our own UI standard style to reduce the designer’s work input.

Project documentation

At present, all the product documents and technical documents are very standardized and traceable, as well as what kind of scenario and why such a solution should be made at that time.

conclusion

The above ones, including the others, took more than a year to complete. Our current infrastructure status is shown in the table below

If you find it helpful or inspiring, please feel free to like it and leave a comment.