Scott nearly two years whether the interview or offline online technology to share, meet many front-end classmates, because team, personal and professional growth, technology direction, even family and so on reasons, between the ideal and the reality, between give up and stick to, swayed, sad hard fight, you can find me talk about the south north, Learn more about engineer destiny, see and hear more, Scott wechat: Codingdream.

There are 15+ articles in this series – click on this link, this is the first article, everyone read and retweet my circle of friends, I will be satisfied.

The text start

It is the destiny of a Tech Team Leader to make plans, manage people, resources and priorities.

In this article, Scott, from the perspective of a manager, would like to share with you how I have planned the technical stack of the team together with the front end students since I joined the team in July 2017, and how the skill points on the technical stack have grown in different businesses.

Let’s start with a picture:

This chart is the division of labor of technology stack architecture I made for the team in August 2018, which basically covers the technology stack capabilities required by the team from 2018 to 2020. It will also be fine-tuned and revised constantly along with the business and the team. I will rearrange a new version in August 2019. Will come here to share with you.

In more than a year of time, with the team for my team’s idea actually has changed many times, the abstract general, a total of two parallel process, a team from the people and perspective of good planning and management team, is a combination of business team to do specific route adjustment and the evolvement of the technology stack architecture, two processes will cross influence each other. These methods and the conclusion also has its special background and limitations, not necessarily apply to everyone’s business form of team, don’t be hard to move, you can watch these in the process of change, and I thought process, finally we return to this map, you can see a team behind the evolvement of the technology stack architecture and methodology.

1. Team management

First of all, team management, this is the premise, without supporting team management means, it is difficult to simply make technology stack continuous good changes, it is also difficult to promote the architecture concept to the ground, in the team management here I mainly divided into four steps.

The first step is to understand the team’s strengths and weaknesses

When you join a team, especially after you become a senior engineer, it is important to get to know the team as soon as possible. There are many ways, such as:

  • Take the initiative to look at the history of the code in the team’s repository to understand the coding level, the programming style, the way the project is maintained, and the maturity of the architecture
  • I had a chat with each student to discuss his or her views on a technology, his or her thinking on business, and his or her cognition on himself or the team
  • Invite everyone to have dinner, listen to what everyone is talking about, what to play, what to pay attention to, everyone’s aura and expression style, what is the difference between the desk and the table
  • Ask students from both the server team and the business team what they think of the front end team and what they think of collaboration
  • Ask questions during the meeting and observe the level of engagement and depth of presentation

We can also play games, watch movies, participate in company activities and so on. This is a rough understanding. After I joined the team, I also picked the above two or three ways to have a rough understanding of the team members, and saw many good features and many problems.

The good: all of them are young and smart, with good learning ability and strong plasticity. They are not sophisticated, passionate and enthusiastic about technology. The technology stack is very novel, and everyone has great potential.

Based on these, it can be predicted that as long as the focus of each stage is clear, the team can grow rapidly, and everyone can constantly break through the ceiling. Therefore, the big plate is good in nature and qualification. Now let’s look at the problem:

Question: Workplace professional degree is not enough, more emotional, for the business have certain resistance, mercurial career planning awareness, it is not good to the criteria of relatively narrow is closed, the whole instrument engineering and construction direction without too much thinking, for the entire industry’s judgment is more shallow, belong to the primitive wild stage, team members’ ability levels not neat, Filling and overall consciousness is relatively weak.

Methodologically, you can summarize the problems of recent weeks and then label them into categories, like this:

Combined with the business and development process, to sort out the common problems, the final problems can be summarized as:

  • Unstable hearts
  • Skills are short
  • Career Planning
  • Poor sense of cooperation
  • No team specification
  • Weak tool infrastructure
  • No service awareness
  • Echelon is not set up

Based on these, can predict team need a short period, need to gradually build trust in the period, at the same time according to different problems need to study tang’s monk tell everyone speak more often, namely by instilling the concept of let everyone have a right to do things in my head, and then according to the characteristics of the each classmate, allocation of tasks in different ways, drive and guidance, on the other hand, There are some things that we need to do together to form team force and cohesion. Finally, I chose technology sharing as a joint task, so that the team can reach the only consensus on this issue – the promotion of the influence of the technical team and the improvement of individual summary ability.

The second step is to spur the team to improve the internal weaknesses

The so-called internal short board, is entirely their own pot problems, such as publishing system is imperfect, such as the code is not standard, such as imperfect tools are dumps all don’t want to go out of the pot, with the first step, after summarizing can in these problems, first chooses have strong relationship with the business problem with breakthroughs made in key areas.

I choose is to develop on-line flow, is released from development to the development team must have just need ability, from the line split out a variety of tools and systems, favorite objections will be relatively low, and as a result of the system efficiency and stable performance to bring more resources to release, also can bring to participate in the enormous growth of the classmate, Therefore, it is a very desirable team management method to make up for the internal shortcomings by means of specification and engineering. See the following figure for the changes in the development process from the second half of 2017 to 2018:

The construction process of all the way for more than half a year in succession, probably the most people in the basic team work of meat the most dirty and tired, is done by machine off, although have no direct relationship with the business, but its indirect guarantee the sustainability and stability of the business, at the same time to upgrade all the way to play, also let to participate in the development of friends have larger programming and engineering ability to ascend, Become one of the earliest technical backbone.

The third step is to push the team into terra nullais

If have solved within the team at the heart of the problem, you can put with products, operations, business related links perfect, such as abnormal App running on the online monitor these, actually in the start-up, as a general rule, there is no one department directly responsible for it, everybody focus on business, so this time works out at the hands of the team from the front, The front end should drive and be responsible for it itself. Here I use online runtime monitoring as a separate line, which, together with GPM (GraphQL Data Aggregation Service Layer) in the Mock phase of internal problems, is out of the function of the front end team and has relationships with other teams, as shown in the following figure:

Not only for business, for the other department of China such as personnel, finance and administration are the same, as long as there is energy, can be as much as possible with the lowest cost of technical means, to no man’s land without the Lord in the company to do some collaborative tools and systems, this will cause a lot of positive word of mouth, the team also has technology improvement at the same time, the most important of all, In cooperation on the external and internal problems once you become a initiator and driver, your role and status is changed, you is both the product manager and project manager, is both the demand and business party, for an individual will have a great comprehensive ability of ascension, for the whole team within the company the influence of ascension can also help, There is also a lot of work to be done to help each other, which makes sense for a team of engineers who are not very articulate.

The fourth step is to encourage team technical and business innovation

From the previous steps, you can see my routine, with the team forward, more stable is from inside to outside, from technology to cross team affairs to the business, in the end, that is, the fourth step, and then return to the combination of business and technology, to take advantage of technological innovation to drive the business, using the business possibility reversed transmission technology breakthrough, though this is not the ultimate state, But it’s a very acceptable state of affairs for engineering teams.

Around May 2018, I began to push the front end team to step into the business. No matter it was technology pre-research or business scenario mining, while doing a good job in business support, we tried our best to think about how so many cool front end technologies could relate to my business. How to dig into the product manager can not dig the place, another way to create possibilities for the business, so in this point, because it will touch the company’s core trade secrets, I will cite an early desensitization case for you to feel.

When our mobile ecology is App, wechat ecology is also booming, so if the product is extended to small programs, how will we support, you know at this time the whole company has no business including products have similar specific planning, but everyone has some very empty ideas and concepts thrown in, At this time, through to the business party on a business trip to customer site have to evaluate the possibility of a small program fall to the ground, after come back we started doing small technical pre-research program, through this process, we take in front of the business and product, do the necessary technical reserves, to quickly open the WeChat ecological later, into the new carrier of the small program camp laid the key technical basis. If the engineer has no sense of initiative to enter into business at this time, is also impossible to let business are information even intend to enter a new ecological, so wait for part of the team of engineers can grow out of this kind of consciousness and ability, I think is an appropriate time, to make long-term planning technology stack.

Ii. Technology stack planning

In front of me to bring team 10 months, actually I also try to do too fragmentary technology stack planning, but the effect is not very desirable, is an objective does not meet the construction foundation, it is difficult to do relatively reliable and can be born planning, one is the overall consciousness of team members include personal ability not, then do a little too soon, even will cause the resistance of group members, In summary, it is necessary to have small and relatively fragmented technical planning, but it is not recommended to collapse the big cycle to do big and complete, can do 1 ~ 1.5 years or so.

ReactJS – First large-scale application of technology stack alignment

No matter RN or ReactJS on PC, React technology stack on the front end of the side was normalized in the first three years, but it was normalized but not standardized, and there was a historical burden such as the old App was a native architecture, but generally by the second half of 2017, The React technology stack plus Webpack is now standard on the team.

This unified technology stack, combined with the NodeJS capabilities behind it, spawns our two core front-end frameworks:

  • Client RN framework Brick
  • PC ERP single page frame Highway

NodeJS – second large-scale technology stack lock normalization

Let’s go back to NodeJS, which was initially used at the beginning of 2017 and deeply used at the end of 2017. Since the end of 2017, NodeJS has become a core capability of the team. Through it, we have realized all the infrastructure of RN, such as scaffolding, componentization, code verification, etc. Machine packaging, support for white list hot update release, package installation success and failure tracking, side user access behavior data visualization, side operation exception monitoring and assignment, and so on. All these allow us to have confidence to reconstruct all apps to the fixed RN version of the latest route.

In addition to supporting client infrastructure, NodeJS also opens the door to internal system development — server capabilities. This door is a great benefit for both the front end and the company. From the front end, you can master more skills, support more business, and play with technology more. Without large-scale use of resources in front and back end products and operations, front-end engineers can independently complete businesses that are relatively less coupled to the business, saving money and time, which is a very cost-effective input-output ratio.

So on the NodeJS technology stack, we’ve developed a lot of capabilities that help the business a lot, and for the team, a core server-side framework:

  • Node server (based on Egg) framework Cross

Cross was developed because we used ExpressJS/KoaJS/ThinkJS all the way. The customization, upgrade and integration of the framework we wanted to reuse were not standardized or rigorous enough. Until EggJS was used, it could be easily integrated based on its strong convention and plug-in mechanism. To customize our own framework, we will start the customization of this framework in the second half of 2018 until the end of the year.

GraphQL – the third small-scale technology stack attempt

GraphQL will definitely become a relatively high-frequency word in 2019. We started to use it in 2017. Meanwhile, in April 2018, we directly developed the aggregated data service system, which was integrated into our gateway and provided the ability to customize data for each App. We have tasted a lot of good, but also met a lot of resistance and adjustment, we will continue to cultivate it in 2019, at least in specific areas of large-scale use.

There are also some assembly layers for data collection, processing computing and visualization that we have given to Python and C#, and even Rust’s attempts, which can be regarded as pre-technical research and cannot be considered as our core capabilities, so they will not be the evolution target of the core technology stack for the time being.

MPVue/Vue – the fourth large-scale small program technology stack normalization

If GraphQL is a surprise egg, then Vue is a surprise egg. It was not included in our original evolution path, but due to the complexity of our business and the limitations of options on the market at that time, we finally chose MPVue as our small program framework carrier. At that time Taro from JD was still too young to be used in the production environment. Although MPVue brought us a lot of possibilities and efficiency, it also brought us trouble. That is, the technology stack was separated to a certain extent within the team, after all, it differs from React in grammar and ecology. So far, based on the applet ecology, we have implemented normalization based on such an end domain with MPVue as the core applet technology stack.

Overall down as a whole, then, will find that we, the evolvement of the technology stack is infrastructure maturity with team ability, which is of a certain team management and development and change, it will also have strong affinity with our business and the ecological, in addition, the technology stack planning is indeed a looking at very objective but in fact is more competent work, it comes to a lot of factors, These factors have different weights at different times. When the team is strong, you can plan for the long term and be more hardcore, while when the team is weak, you should be more flexible.

So in the second half of 2018, I started to do the relatively core technology stack and architecture planning, which is the first picture:

There are twelve topics and directions:

  • Node services include support tools, service systems, o&M, and monitoring
  • Front-end infrastructure to support dozens or even hundreds of PC/H5 ERP/Saas tool systems in the future
  • Front and back collaborative solutions support data aggregation in specific business areas and reduce development costs
  • Monitor behavior data, provide product design and business adjustment decision for business/product/operation
  • End performance monitoring and tracking ensures end reliability and stability
  • The terminal data computing center provides high-performance computing services for visualization, graphics and video multimedia
  • Build and deploy, and provide operation and maintenance capabilities for the overall development, testing, packaging, release and deployment of multiple terminals
  • Client side reverse, provide the necessary technical underlayer solution for community /CRM/ human new link relationship
  • Security prevention and control, to provide security monitoring, alarm, interception and other escort guarantee for the whole end
  • Platform componentization to provide low cost reusable UI components and future intelligent assembly across terminals
  • Interactive research, for interactive experience, ABTest, user behavior value, design expression output tools and methodology
  • End/data report perspective and visualization, provide the whole company with a friendly report visualization scheme that can be quickly produced and maintained

These topics go down and then extend the direction planning of each technology stack, which is what we start and continue to pay attention to in the current team. The next technology stack will continue to evolve and upgrade along these topics.

Finally, business support, technology value and personal growth, organization to upgrade this is indeed difficult to achieve the ideal balance between, but create more business value based on the core theory, constantly find breakthroughs such action is to search for the scene we as managers and technical backbone to stick to it, no matter when, This is the responsibility and destiny of good engineers and technical decision makers – to be responsible for people, and to be responsible for the results, to fix things, to make things happen.

Finally, this article, as a warm-up, aims to output the following topics for you:

  • To automate the team from zero to one
  • Growth process summary output to the community, to help more small teams less detours
  • The confusion, precipitation and methods and paths at the front of the side dishes are gathered in a quantifiable way to bring more creative sense of achievement to the team
  • From the perspective of team management/technology evolution/personal growth, to explore the value maximization of engineer team

If you are interested, our front end team will gather the collective wisdom together to write and launch a small book on the front end career, technical growth and team growth, and give it back to you. Please remember to leave comments and requests after the article.

Scott nearly two years whether the interview or offline online technology to share, meet many front-end classmates, because team, personal and professional growth, technology direction, even family and so on reasons, between the ideal and the reality, between give up and stick to, swayed, sad hard to carry, you can find me talk about the south north, To learn more about the destiny of engineers, to see and hear more, Scott Codingdreamer, can also follow Scott sparrow follow up the latest developments, this article is not allowed to be reproduced without permission, permission please contact Scott, otherwise in the public number directly reproduced, especially after cutting content reproduced, I will directly to the complaint processing.