How to build a front end team
preface
As FAR as I know, the state of the front end team in most companies is not developing well, and in the team, it may be a page developer role.
At the same time, there are issues that have to be addressed, such as how the front-end team can be more valuable, how team members can grow within the team as a whole, and even how individuals can break through career bottlenecks in personal development.
In some large companies, a good front end team is often characterized by efficiency. There is also an important responsibility – business innovation!
To understand this problem, start with the advantages of the front end:
1. Compared to other developers, the front end is closest to both the product and the data. The front end’s job is to make an efficient and beautiful presentation, and the front end knows where the data is coming from. (such as database operation through Node, such as interface data forwarding through Node)
2, efficient problem, is every advanced front end, are thinking about the problem. From the perspective of the market, the front-end of many companies has gradually become the bottleneck of business development. With the development of 5G technology, there will be more and more front-end applications in the future.
3. The frontier of the front end is expanding all the time. What was thought of as the front end was DOM manipulation, jQuery. At present, single-page applications (three frameworks) are the mainstream. Gradually, some native applications are also written in front, such as Weex, React-Native, Flutter and so on. Also, you’ll find that desktop applications can be written in front, like electron. During node’s evolution, the front-end can also write server applications.
The front end looks so good, but why are there so few good front end teams? Sometimes I want to say that it is because we know too little and do too little about business development that most teams are still developing in the backend.
I want to record my understanding of front-end technology and share it with others through writing. The purpose is to provide some good practice thinking for small and medium sized companies at the technical level and empower the front end team.
How to do
First of all, team building involves a wide range of aspects, which only provide some technical perspectives to transform the team through technology. Other aspects are beyond discussion.
From a technical point of view, the front-end teams of most companies have more or less such problems, which greatly affect the improvement of efficiency.
1. Lack of specification, such as Git specification, coding specification, code review specification, workflow issues, etc.
Have you found that sometimes, our code, do not know who changed, or merge, how the code conflict, sometimes, we develop multiple requirements at the same time, but some requirements need to go online, some requirements do not need to go online, the branch management is not standard so many people exhausted!
Everyone’s coding style is different, the code difference between the expert and the rookie, so that everyone is very uncomfortable to look at others, and even some teams’ daily, is to evaluate some people’s code.
Each technology level is different, especially for the early intermediate front-end development, in the implementation of some more complex business, according to their own way of writing code, resulting in serious code quality problems. For the later code maintenance, caused a serious obstacle, the code readability is very low!
2. Lack of precipitation, such as precipitation on the technology stack, precipitation in common component libraries, precipitation in common tool libraries, precipitation in template repositories, etc.
As you all know, ANTD provided us with a number of basic components that solved some of the problems we had during react project development. Element-ui also provides similar functionality for our VUE project development.
Imagine how much less productive we would be without this library of UI components. Even without these component libraries, a lot of early and mid-level front-end development wouldn’t be writing projects. My personal understanding is that if some React projects had a 20-day development cycle, our development cycle would have been at least 5 days longer without such a UI component library.
The basic component library has solved some of our problems, but there are still some problems that have not been solved, because each company’s business is different, we can do some customized development according to our own business, do some more integrated business component library. Such as copy components, upload components, search domain components, advanced forms components, and so on.
So, before we developed some pages, maybe a patchwork of basic components like search boxes, tables, pagings, and so on, now we have a business component library, and maybe those basic functions are configurable, and what used to take three hours of development effort now takes half an hour.
Template repository, another topic, is about integrating common things, such as common CSS, common project configuration, common component integration, monitoring integration, buried integration, and so on.
3. Lack of qualified technical leaders
First of all, we need to understand what is a technical leader, a technical leader is a person who creates a good technical team atmosphere, dares to tackle technical pain points and difficulties, and forms best practices.
Generally speaking, a TeamLeader should play such a role.
For example, if our current team problems are low development efficiency, the role of the TeamLeader is to find solutions to these problems, rather than making everyone work overtime desperately, to figure out what is hindering the improvement of efficiency.
At the very least, we can improve development efficiency in several directions, such as developing process within the team, promoting the front and back end, and unifying the interface format. For some projects, do some technical precipitation so that development feels like copy and paste. Do some technical sharing to promote the technical learning atmosphere of team members. Do some code reviews to prevent major code quality issues.
In specific practice, different methods should be used according to their own team and specific problems.
The article discusses and shares
If there is no practical significance, I will share a series of articles to extract some solutions that can be used in the company. Each of the following articles will analyze one of them and summarize the output.
It will be divided into two parts, one is the basic engineering part, I personally think it is universal, every team needs. The other part is the advanced part, mainly for the front-end team’s own business, do some technical innovation and business innovation.
Basic Engineering
How does the front end team do the Git specification
Introduction: Mainly about Git branch management, Git command submission message format verification, etc.
Link: juejin.cn/post/685705…
How does the front-end team do the Lint specification
Introduction: Mainly about ESLint configuration, stylelint configuration, autocommand repair and more.
Link: juejin.cn/post/685819…
How does the front end team do code review
Introduction: Mainly my own practice and experience in code review.
Link: juejin.cn/post/686036…
A template repository for the front-end team
Introduction: a good template warehouse, exactly how to do?
Link: juejin.cn/post/685889…
Scaffolding development for front end team
Introduction: Introduces two simple scaffolding development examples that combine template repositories to make development as simple as the command line.
Link: juejin.cn/post/684490…
Front-end team tool library
Introduction: Integration of common tools and methods within the team.
Front end team monitoring and burying points
Introduction: As a small company, how to quickly and efficiently do buried point monitoring
Link: juejin.cn/post/687258…
LowCode and NoCode think and practice
Introduction: How to write as little code as possible in business!
Automatic release integration
Introduction: Liberation and development have nothing to do with manpower loss, let efficiency fly.
Advanced article
ProComponents introduction and reflection
Feature – the mechanism of the owner
Technology && business dual track system
Innovative practice of self-research projects
The above articles will be published on the Nuggets one by one and will be updated continuously.