How did I break through traditional industries?

background

Under self-introduction, four years of work experience, full-stack development for the first two years, full-time front-end for the next two years, and now he has reached the level of senior front-end engineer and has experienced three companies. The first company, in the e-commerce industry, ISV supplier of Ali 06098d38f881a5, serving Taobao sellers. It was also my first contact with one million UV products. I stayed in the first company for two years. As it reached the technical bottleneck period, I left for the second company in the shipping and logistics industry. I stayed for six months (the work intensity is really high for me). I was unwell. I didn’t agree to become a regular employee. At present, I have two roles of project management and front-end team leader. I have stayed for two years and have done a lot of things. I will talk to you about some of my thoughts.

Environment at the time of entry

This is a company in the insurance and financial industries. It is a technology company in the traditional industry. It is a bit outsourcing. Of course, it also has its own SaaS product. Since it is a company in the traditional industry, the technology stack is slightly behind compared to Internet companies. When I first came, the last front-end had to resign, and then did the docking work (tell me, if there is any problem, directly search the code), I am the picker, the shit mountain left by the predecessor, and the others, there are probably the following points :

Front end group 4 people

One of them is under the control of the CTO (back-end), and the other two are in Guangdong. When I joined the job, I didn't confirm whether or not I should bring people. When I came, I was already there, and my leader told me later that I wanted to take them down. I didn't even have the idea of bringing people. It was a pit.

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

• No front-end engineering system, long development cycle, poor development quality, and difficult maintenance
• Front-end mixed project, the front-end code is not stripped clean, many files in the back-end are there, I don’t know whether it is important, the front-end code runs on the server side, modify one line of code each time, to see the effect, you need to drag it to the server to compile and compile It takes about 1-2 minutes and it is very painful.
• The personnel who are fully familiar with the project have left their jobs (technologies and products), and the project handover has not been handled properly.
• The business logic is very messy, there is no related product flow chart, it's all based on memory.
• Node running on the server is 8.x to now, it is still 06098d38f8841e. Various low-version libraries are available, such as Ant Design for 3.6.2 . In project development, the shuttle box cannot be displayed in tree view (the code is exactly the same, in high Version 3.19.2 , can be displayed). Another example is this "translate.js": "git+https://github.com/MichelSimonot/translate.js.git”
• I have tried to upgrade the library and uninstall other libraries, and various errors were reported.
• The code lacks comments, a file has several thousand lines, and it lacks understanding of the use React and Redux

• There was an "explosion". If the project continues to iterate, it may continue to "explode" at any time. Now it is in the mine-strike development stage.

  On October 18, 2019, a production accident occurred at 24:00. The accident manifested itself as operating a specific page, the browser crashed, and it was stuck.

  

  The script execution time is very long. After investigation, it is caused by the following code

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

  In many places on the page, there are requests pageSize: 20000 . The code was written by the former front-end. The specific reason for writing such code is unknown. The solution is to be solved by the back-end. The front-end cooperates with adding the workbench field, 1 am Point left and right to be resolved.

• On one project, two systems are running.
• The packaged project code volume is 49.5MB , and the first page load time is 11.4 min

  

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

• In terms of human resource conditions, it is not allowed.
• From the perspective of company strategy, a project that can make money is a good project. However, this does not affect my construction of a front-end engineering system.

Weak project personnel

• There is no record of reproducible steps for testing and preparing BUG in the same journal.
• The task management tool platform is not really used, and related project requirements and BUGs are not organized and placed on it.
• The product does not understand the general technical realization, does not sort out the product documentation, keep it, and does not understand the real needs of the customer, so that the technical realization is relatively tasteless.

Front-end and back-end interface docking, no related documents

The original shape of the product painting and the UI design draft are not standardized

After enumerating the above points, there is too much mess. Fortunately, there is one point. The support from the leadership is not bad. It depends on how I break through.

Clarify your mission

The core purpose of front-end technology construction is to improve development efficiency, ensure development quality, and ensure high-quality and on-time delivery of projects. At the same time, considering the actual situation of medium and long-term research and development, combining the actual capabilities of the team, making technical reserves for the future and providing more for business development. Many possibilities, roughly divide one's own into the following four categories

• Infrastructure design , the main purpose is to start from the architecture level, through process design, avoid common problems and improve development efficiency.
• engineering design strongly related to the code. The main purpose is to improve the code quality, enhance the long-term maintainability of the code, and reduce the development time and cost.
• team management , through reasonable and effective team management, improve the team's human-efficiency ratio, and carry out talent reserve and technology research and development for future project research and development, technology development.
• Project management , to carry out reasonable project management, appropriate man-hour scheduling and iteration plan, improve the quality and efficiency of project delivery.

How to solve

First of all, we must sort out the existing problems, sort them according to the priority of the problems, and then realize the goals in stages. For the above problems, I probably compiled a table

problem	priority	cost	the goal
How to build a front-end engineering system	p0	high	Improve the development efficiency of the entire front-end team, deliver on time, and ensure delivery quality.
How to conduct team management	p0	in	Carry out talent reserve to improve the technical ability of team members
How to manage the project	p1	in	Control the overall situation, know what the people under the project are doing, coordinate resources

Team management

Personnel management

• to , the first thing is to chat with everyone, understand his/her thoughts, personal situation, technical ability, hobbies, personality characteristics, etc.
• Group building dinner , often invite everyone to drink milk tea/coffee, organize activities from time to time, usually dinner (personal expense), for the following work, easy to carry out.
• tutors help bring . After the newcomer comes in, arrange for someone to take him and answer common questions, from simple needs to core modules, and exert pressure little by little.
• 16098d38f88d9f newcomers adapt to newcomers, understand the project framework and development model, and then arrange them to optimize based on the existing pages to help them understand the business that different people are responsible for.
• Responsibility division , clarify the positioning of the personnel in the team, and make it aware that according to the different abilities and attitudes of the members, the tasks suitable for them are arranged.
• Front-end weekly meeting go through the things at hand, whether you have encountered any problems, some resources that need to be coordinated, and progress control.
• technology sharing , the front-end technology sharing from time to time, the subject is not limited, and the related shared information is uploaded to the front-end document management, which is convenient for future personnel to view.

authority management

Mainly refers to code authority control, the purpose is to ensure code security, problems are controllable, avoidable and traceable

The specific management measures are as follows:

• company warehouse , the code belongs to the company's property, the code is authorized to isolate, the internal network GitLab enabled, all external network access permissions are disabled by default, and the development is given specific permissions for each project according to actual needs.
• submission permission allows developers to submit under their own warehouse, but when it involves the merger of company warehouses, you need to initiate PR , and then submit to the main warehouse after the CR
• release permission , for the release to the production environment, the permission is given to the group leader, and only the group leader is allowed to release.

Front and back interface docking

A serious problem with the front-end and back-end development joint debugging is that when the back-end interface changes or the fields are changed, the corresponding front-end developers and testers are not notified before and after, resulting in low efficiency and various abnormal situations.

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

We use apiDoc as the front-end and back-end joint debugging standard.

However, in actual situations, there will still be some interface documents that do not match the actual interface, causing some problems. We are also thinking about this.

Front-end engineering system

When I first started, because there were too many project framework problems above, I tried to solve them before, but they couldn't solve them. The leaders realized this, and new projects came in, so I asked me to rebuild a project framework. Therefore, I self-developed a set Webpack . The purpose of doing this, as I mentioned above, is to improve the development efficiency of the entire front-end team, deliver on time, and ensure delivery quality.

Infrastructure design

Git branch management standardization

We are using the Git Flow branch management strategy

Git Flow was Vincent Driessen released by 06098d38f8914f and was very popular. This model was conceived in 2010, and it has been more than 10 years now, and Git itself has only been born soon. In the past ten years, Git Flow has been very popular among many software teams

Branch naming convention

• Master branch: There is only one master branch, and the name is master. GitHub is now called main
• develop branch: There is only one develop branch, the name is develop
• 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 description

• master || main branch: stores the officially released products, master || main branch are required to be in a deployable state at any time. master || main branch can only be updated by merging with other branches. It is forbidden to modify the master || main
• The develop branch: summarizes the work results completed by the developers develop branch can be semi-finished products with missing functional modules, but the existing functional modules cannot be semi-finished products. develop branch can only be updated by merging with other branches. It is forbidden to modify the develop
• Feature branch: When you want to develop a new feature, create a new feature branch from the master branch, and feature branch. After the development is completed, you need to feature branch to the develop branch, and finally delete the feature branch.
• release branch: When develop when items on the branch ready to publish, from develop create a new branch of release branch, the new release branch can only be released by the task-oriented quality testing, bug fixes, documentation generation, etc., can no longer add functionality. After this series of publishing tasks to complete, we need to release branch into master branch, and in accordance with the version number is master branch Add tag , then release modified since the creation of branches merged back develop branch, and finally delete release branch.
• hotfix branch: When master a branch in the products appear in need of immediate repair bug, from master create a new branch hotfix branch and hotfix be BUG repair branch. After the repair is complete, we need to hotfix branch into master branch and develop branch, and is master branch to add a new version number tag , and finally delete hotfix branch.

Submit information specification

The submitted information should describe the "what you did" and the "reason for doing so", and the "impact" can be added if necessary. It is mainly composed of 3 4 parts: Header , Body and Footer .

Header
The header part has only one line and the format is <type>(<scope>): <subject> .

type is used to indicate the type of submission. There are 8 candidate values:

1. feat: new features (feature)
2. fix: problem fix
3. docs: documentation
4. style: Adjust the format (does not affect code execution)
5. refactor: refactoring
6. test: add test
7. chore: changes in the build process or auxiliary tools
8. revert: revoke the previous submission
9. Scope is used to indicate the scope of impact of the submission, and the content depends on the specific project.

subject is used to summarize the submitted content.

Body omitted

Footer omitted

The benefits of doing so, under this project:

• Regarding branches, what everyone is doing, I can see the branches clearly.
• For the modified content, you can see what has changed in this file by looking at the prefix.
• For version iterations, see Tag is online.

In short, it's clear at a glance.

Basic developer process

In this process, developers only have control over the personal warehouse and cannot directly change the company warehouse code. When submitting to the company warehouse, they need to initiate a PR request. After the team leader CR , the code is merged into the company warehouse. under.

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 directly pulls the specified Tag GitLab through the operations staff, and then releases it in a package.

Through the above process, the front-end code can ensure a high-quality, high-stability state, and run 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 the full link from scratch to online and then to iteration. There are many nodes. These nodes need to be designed according to the actual situation. Avoid over-design.

Customize the Webpack project framework

Why not create-react-app

create-react-app is a packaging layer solution webpack build、dev、lint etc. It has achieved the ultimate experience in the packaging layer, but does not include routing, is not a framework, and does not support configuration. Therefore, if you want to modify part of the configuration based on him, or if you want to do technical convergence outside the packaging layer, you will encounter difficulties.

Why not umi

There are many functions provided by umi, which also makes it too bloated. And you have to learn its encapsulated configuration, not the configuration of native third-party libraries. If you only want some simple functions and pursue higher playability, which umi is not suitable.

Therefore, I customized a set of scaffolding to achieve the following functions:

• quickly get started with , as long as you understand React, Mobx, Webpack and React Router, you can quickly build a middle and backstage management platform
• routing system , a routing system based on react-router
• Loading , there is no need to rewrite the component Loading judgment
• Internationalization , internationalization based on react-intl-universal
• network request , request interception based on axios
• page interaction , based on the data interaction method implemented by mobx
• UI , using the most famous ant-design in the industry
• code specification verification , using eslint, pre-commit, lint-staged, prettier, stylelint
• simulates request data , based on mockjs
• packaging tool , currently the most popular Webpack

Solved the following problems:

• Constraint developer code specification
• It is convenient to provide standard scaffolding for other developers and provide technical support

Complete a closed loop of the entire coding process:

• Before coding: coding standards, best practices
• Coding: self-developed project framework, code verification
• After coding: release the deployment tool JenKins, manually release or CI/CD

These nodes should be done at the minimum cost based on the actual situation, and then gradually upgraded. Such as coding standards, we are using the industry more famous Airbnb JavaScript code standards, with eslint、pre-commit、lint-staged、prettier、stylelint to be constrained.

This framework of the project, the development of very cool experience, in our multiple product lines, put into use, and has been open source, frame address , the demo page is relatively small, bigwigs feel good, it can give Star 🌟, also welcome to submit issues to the project~

Business scene

We are doing the ToB business, and there are scenarios where forms are used extensively on the page. Therefore, our form pages are made configurable, which realizes the configuration of most of the page forms and reduces the front-end human resource input.

In view of the company’s actual business scenarios, other subsystems will not be particularly complicated, and there will not be many pages, and share a set of account systems. The idea here is that there is only one project, regardless of the master-slave system, through Webpack configure multiple pages, different The content of the homepage that the subsystem enters is different, the content of loading is different, and the menu navigation uses the backend to distinguish each tenant, so that the menu system that the tenant sees is different.

If the subsystem is particularly complex and has the concept of a master-slave system, you can consider using microservice design. I won't introduce too much here.

Static resources

In addition to the business code, the front end will also have some public static resources, such as React resources, Ant Design resources, BizCharts resources, and some image files.

For these files, they are shared by all projects. If these files are scattered in various projects, it is neither necessary nor easy to cause different project dependent files to be inconsistent.

We put it on S3 , do CDN static resource acceleration, and then the front-end project url , which can reduce the network bandwidth consumption of our servers.

project management

• task allocation , the product puts related requirements into the iteration plan through discussion, feasibility analysis, and project management tools, and enters development man-hours and test man-hours.
• document management , using the documents that come with the project management tool, it is required that the documents can be edited by the team and the editing history can be viewed.
• project week will be current iteration progress, problems encountered, resources that need to be coordinated, risk control and so on.
• project is . The first thing to do in the review is to state the facts, start to diagnose and analyze the reasons for the differences, find out the root causes of success or failure, and then summarize the rules. Understand why it succeeded, what key behaviors played a role, whether these behaviors are applicable, and whether it is of value for improving the success rate of follow-up actions.

Familiar with product line business

The so-called technical service business, looking for products to understand the existing business processes and pain points, and even some product planning to be done in the future, a good technical architecture, we must consider a variety of business scenarios, how can we combine the complexity of the business to design More granular components.

Draw a product architecture diagram

Improve the capabilities of relevant personnel

Product Staff

Demands are frequent and chaotic, decision-making is wavering, and often overturned. A good product manager on the market is very expensive. Every 30,000 or 40,000 won’t cost a truly reliable product manager who can withstand complex product lines. However, many company bosses are unwilling to spend this money and usually hire A product manager who has been working for a year or two will come first and make this tool at the top position. It is precisely because of this recognition that he has no right to speak at the level of the product manager, nor can he let himself idle, so the endless demand is piled up, and the company’s long-term product structure cannot be controlled. If one The product manager can’t do it. The top is responsible for the customer and the bottom is responsible for the development. They will not screen all the requirements, and will only leave the requirements to the development, and will not carry out the control of working hours and quality. If you don’t even know what functions the existing product has, it is not a qualified product.

Therefore, the requirements for product managers are very strict, because if a company grasps the strategic direction, the core is to look at the product. Whether it can grasp the market direction is very important. ToB SaaS in this way can you decide whether you can occupy the market. Since our company is making a 06098d38f8a08f platform, we must ask the product manager to clearly understand the actual needs of customers, the actual scenarios behind the needs, and refine which are the common needs and which are the customers. Customized requirements, and then discuss, and then carry out the actual development.

Testers

For testers, try to cover all scenarios to ensure that the core process is unblocked, and it is required to find recurring steps to improve the efficiency of development and resolution of BUG.

Design specification

Because our company uses the Ant Design UI library, so the design standards are as far as possible to follow the Ant Design ready-made components and styles to avoid the development of secondary modifications, refer to this link Ant Design Design Principles

A list page

Ordinary lists, designs, and products are all agreed upon. The top is the filter, the bottom is the button, and the bottom is the table display.

A detail page

Details will be used to form a large number of pages, so the direct use Ant Design of From form components.

How many pieces are placed in each line of the form are all based on the Ant Design component.

The advantage of this is to avoid customized development as much as possible. All lists and details are developed in this style.

Implementation results

Development efficiency

The development efficiency of the staff in the group has been doubled compared to the previous one. The ordinary list page (search, display, pop-up window), including interface joint debugging + self-test, will be completed in about 1 day, the detail page, and the more complicated form interaction, The form component linkage will be completed in about 2 days, including interface linkage + self-test. At present, we are also exploring Vite , Snowpack , which greatly improves the development experience.

System situation

SaaS system, the first time to load without cache 3.22s , the volume of three systems (more than 30 pages, 14 common components) packaged in 9.3MB

Of course there is room for optimization

Design specification

At present, most pages do not require input of design resources. Try to follow the Ant Design design standard and our custom UI standard style to reduce the work input of designers.

Project documentation

At present, all product documents and technical documents are very standardized and traceable, and why such a solution was made in what scenario at that time.

to sum up

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

If you think it is helpful or inspiring to you, please like and leave a comment.