What does the front end care about
It has been three years since I graduated. By chance, I took the role of FRONT-END team TL at a relatively early stage. In the past three years, I have met a lot of people and things, and I have tried to do a lot of things. In the process, I have had mistakes and successes. Looking back today, it’s really all about trying to explore, trying to see one thing, or trying to figure out the question: What does the front end care about? Or: What exactly is a front end? What are the core values of front-end output? What makes the front end irreplaceable?
It’s really asking the same question. The answer I’ve been able to give so far is to solve the user problem.
Second, who are your users
So, who are the front-end users, and whose problems are we going to solve? In my opinion, front-end users can be divided into two categories. One is internal. In fact, everyone in the front-end team and the partner team is the first batch of users, whether it is development, testing or product operation, and they need help to solve the problems of work efficiency and output quality. The other is external, where the users of our products need to solve their efficiency, performance, and experience problems.
In the following, I will share some of my own experiences, including the things I have done in the past three years, the problems I have encountered and some experiences I have summarized, and tell you how I have explored the above answer step by step.
Three, several stages of the mind process
1. Ignorant period
As a newcomer to the society, everything is strange, everything is fresh. There is no systematic thinking, also do not know what is systematic thinking; The accumulation of methodology is zero, and I do not know what methodology is.
2, find problems, in-depth problems, solve problems
Work nearly three years, the biggest impact on their own words is: “find problems, in-depth problems, solve the problem”, this is really a very cool words, can be used as a workplace white first N years of a core guiding ideology, around this idea to do things, to grow.
This idea is also very suitable for the learning of technical ability, you can find a technical point from a problem, and then continue to go deep at this point, constantly sinking down, you can go deep into the source layer, into the essence of the problem. Then, by points and surfaces, the scope is constantly expanded to connect these scattered knowledge and eventually form a knowledge system network of its own with the polishing and accumulation of time.
3. Combine technology with business
The core value of technology is to solve problems. There is no such thing as “pure technology”. The birth and evolution of every new technology is relative to the discovery and solution of a specific problem in the real world, and only the technology that can solve problems in real scenes is really useful and valuable.
A common problem for a large number of technical people is that they tend to fall into the blind worship of technology and get divorced from the combination of real business scenarios. The way to solve this problem is to start from the business scenarios, identify the pain points of the core problems, and explore the most efficient and feasible technical solutions to solve these problems, rather than looking for scenarios with technology and putting the cart before the horse.
4. Discover business problems and use technology to empower business
The longer you work, the more important and difficult it is to “see the problem”. In most areas of our daily work, there may not be so many cases that are too difficult for technology to solve, but at least there may be some compromise, AD hoc solutions to solve. The problem is that we can’t see beyond the surface to find the real pain points hidden deep inside.
In many cases, this situation will affect our efforts to find problems and optimize user efficiency and experience. The most feasible solution is to jump out and treat yourself as a white man. It may be easier and more profound to find problems from an outsider’s point of view, observing from the outside, being a deep user of the product developed by your team, and experiencing the daily workflow of your partner team.
When the real problems are identified, we start to think about how to optimize and solve these problems with our technical capabilities, which may be to improve efficiency, reduce cost, optimize performance and so on.
Discover the limitations of the technology itself
When you do enough things, you may also find another painful truth, technology is not everything, many times the good or bad of technology, to a business, to the development of a company is not as much as you think. In other words, the success of a business model has little to do with technical competence.
Does that sound painful and negative? But does that mean technology is useless? That’s definitely not true, and I think the more important lesson of this reality is that when you get to a certain point in your life as a tech person, you need to start stepping outside of the limitations of the tech community, not putting limits on yourself, and you need to take the initiative to embrace more of the unknown, which is what you call stepping out of your comfort zone. If you only limit yourself to the field of technology, or even the field of front-end technology, you will definitely narrow your path. It will be more and more difficult for you to obtain a sense of achievement and identity from this road, and the more time goes by, the more difficult and anxious you will be.
The ability of technology is limited, so what our technical team should do is to concentrate team strength, solve key problems, maximize the benefits of limited technical resources, empower the business, and fully reflect the value of technology in our realistic scenes.
Four, a few things that have been done technically
1. Improvement of front-end infrastructure and workflow
When I just joined the front end team, the company was also in its early stage, with almost zero technical infrastructure and almost no engineering and automation capabilities. Most of the work had to be completed by pure manual and human operation, and there was basically no standard constraints on workflow. But does that make it a bad team, a bad thing? No, I think this extremely simple, flexible way of working actually worked for a startup. Everything needs to be simple and put into business trial and error in the fastest and most direct way. What kind of infrastructure and engineering is there to talk about? At this time the simple copy and paste, quick work is the most effective most reliable!
Later, with the rapid expansion of the company’s business, the scenarios we faced became increasingly rich. The negative impact of the lack of front-end technical team infrastructure and imperfect workflow began to gradually emerge, and the technical bottlenecks began to appear. At this time, in view of the practical problems we faced, we improved the infrastructure, enriched the engineering capacity and automation construction, and made a lot of performance optimization for the front-end application, and also slightly involved in monitoring. So far, the team’s various infrastructure has been relatively complete, which is enough to cope with the current business pressure and complexity, and has made certain reserves for the next development.
2. Establishment of front-end specification system
Without discipline, everyone is free to act according to their own habits and desires. This is less of a problem when there are fewer people on the team, working relatively independently of each other and with less collaboration. However, when the number of people in the team increases and the project development requires multiple people to work together at the same time, this problem will be infinitely magnified, becoming a stumbling block to the progress of the team, reducing the work efficiency, and in serious cases, bringing about online environmental hazards.
Bear the brunt of the problem to be solved is that collaboration of code submitted, Git workflow specification problem, was the first to consider is directly copied big popular use some mature scheme, but a try then found that these very mature specification for us is a bit too cumbersome, not flexible, not suitable for the current team. Therefore, we customized our own code submission, merge, and release specifications based on the current team’s situation and problems, to avoid errors in the process when multiple people collaborate, and to use some automated scripting tools to intercept low-level errors such as branch merge errors and code conflicts that are not handled.
Another important part is the coding specification. After more than half a year of polishing and review, we worked out a whole set of front-end development coding specifications, including Eslint, Stylelint, Prettier, etc., and packaged them into NPM packages that are easy to introduce. Inheriting the common specification into the configuration file of the project, and finally covering all the engineering codes of the front-end team, ensures the consistency of the code style within the team, and enables the development students to pay more attention to the code quality and business implementation, without paying too much attention to the most basic style, naming and other trifles.
Over the past two years, we have gradually built a whole set of r&d standard system for the front-end team, from review, design, R&D, joint investigation, acceptance, testing and release, which has broken through all links of the whole product R&D process to ensure that team members have “laws to follow” in each link and ensure the stable operation of daily work. Teams no longer have to pay for mistakes caused by imperfect processes.
3. Advance front-end engineering
At the beginning of the team, the front-end engineer deployed the project code in a very simple and crude way, that is, after the code was written, he completed the construction and compilation on his own local machine, generated the dist file, submitted the code on Git, and released it through Web hook. As a result, we made a lot of mistakes, did a lot of unnecessary overtime, and had more and more problems due to environment differences, code conflicts, code rollbacks, and errors. Finally, after consultation with the operation and maintenance team of the company, we quickly built an automated release platform for the front-end project, placed the code in remote construction, shielded environmental differences, supported one-click release and rollback, and optimized the construction speed for many times. Later, it also customized the automation ability in this field for the special upload and submission operation of wechat applets, and finally supported the automatic packaging, preview and submission functions of wechat applets.
In terms of improving the research and development efficiency, THE UI component library of H5, wechat small program and PC background has gradually settled down with the development of technology and business. Up to now, there are dozens of components that can be used in business development, largely improving the r&d efficiency of the front end team. Based on the rich component library, we also build our own CMS management system in the upper layer to support the rapid output of H5 pages of operation activities, further enabling the business.
In addition, we also abstracted the front-end project engineering scaffolding that met the company’s business demands, integrated all the above specification systems and engineering and automation capabilities, helped to quickly generate and build projects at each end, and also improved the team’s work efficiency to a certain extent.
4. The gradual implementation of front-end performance optimization
In the early stage of product development, we did not invest too much energy in its performance and user experience, but tried our best to ensure rapid iteration and trial and error of the business. When the business achieved stable growth and the number of users reached a certain scale, various performance problems were exposed and became the focus of our attention. A large number of problems such as black and white screen, long list lag and flash back of wechat small programs began to break out in a concentrated way, making people confused for a time. So over the last year, the team has set up a performance optimization team to address these types of performance experience issues. On how to solve the small program performance problem, our general idea is divided into the following three steps:
1. Due to the black-box feature of wechat applet framework technology, we cannot know the detailed reasons for some underlying performance bottlenecks. Therefore, we first try to understand the technical implementation of the bottom of the small program, and try to find a way to do performance optimization entry point. We arranged a team of two technical ability of students, through to the compilation of confusion after small program for deep framework source code line by line, combining with the official document giving out bits of information, finally extracted some easy lead to performance bottleneck problems hidden danger point, summed up the our way how to avoid and optimized coding guidelines and avoid pit.
2. We took the first-class e-commerce products such as “Xx dog” and “XX Duo” as reference learning objects, analyzed their performance and experience, tested them in various operating environments and networks, and observed the measures they took when facing these problems as our reference.
3, combined with the underlying technology of information collection and industry related reference information, we according to their own small program the current existing problems, and made a number of performance indicators, developed our own optimization goal, and multiphase iteration step by step, from the view of rendering, polymerization, rendering picture loading, interface layer and logical layer multiple dimensions such as communication, code the subcontract by optimization.
Finally, we have achieved some results in the optimization of small program performance, especially in the first screen rendering speed, memory alarm rate, low-end machine degradation of these three key indicators of the data effect is remarkable, to achieve the basic performance and experience guarantee for users.
5. Improve overall efficiency by optimizing the architecture
Business boomed, historical baggage grew heavier, and old projects grew bigger and harder to maintain; New incubation projects spring up like bamboo shoots after a spring rain, and development resources are difficult to coordinate. Relying on the existing technical architecture, it is difficult to meet the current business demands, and the bottleneck of technology appears again. Therefore, we began to optimize the front-end technology architecture system and abstract out one mid-taiwan business module after another, so as to further improve efficiency and solve the pain points in the current stage.
For c-side small program applications, on the one hand, we precipitation our own business RESEARCH and development framework, the login authorization, sharing, routing, request, storage, monitoring and other basic capabilities at the bottom, so that developers put more energy into the business code; On the other hand will also be some high reusability of business process pulled out several page-level application, in the form of NPM plug-in generated H5 page, embedded in a small application or App, support new business fast access to the configuration of the way, such as electricity system in order, logistics, after-sale and customer service and other business modules, are some good usage scenarios.
In the background in the business, we are faced with the biggest pain points is “stone application” question, micro front-end application/micro technology architecture to become a good technical solution, we have already run for more than two years of a operating online backend system, according to the business module division, the split micro front-end application of 10 or so, It perfectly solves the problems of “boulder application” which are difficult to maintain, error-prone and low efficiency. At the same time, we also precipitation a SET of JSON configuration component framework, to solve the past HTML template difficult to maintain the problem, through JSON configuration way, automatic generation of HTML page forms and list content.
Recently, on the basis of the new micro-application architecture system and technology infrastructure, we have restructured the various businesses in China, encapsulated the general logic, and exposed the customized configuration of the differentiated part of the business, realizing the goal of easy expansion of old businesses and fast access of new businesses.
Five, how to get the results quickly landing
Under the general premise of results-oriented, as a team TL, we need to pay special attention to how to help the team and the students in the team to perfect the implementation of project development and get the results we deserve. In this regard, I have summed up three lessons:
1, small steps run fast, fast landing
We often need to do some technical infrastructure at the same time as our business is busy to improve our r&d efficiency. Such technical infrastructure work can generally require significant time and labor costs. For example, the need to develop a complete front-end exception monitoring system may require the continuous work of multiple development people, which is difficult for most rapidly growing teams. We take a small, fast approach, don’t do too big, too early, too much design, use the minimum resource cost to get a simple, usable version, and then immediately use it in a business scenario. What we need to do next is to polish and iterate the product in accordance with the theory of “finding problems, deepening problems and solving problems” mentioned above, and finally reach a satisfactory state. Do there’s another advantage, is that you don’t run in the direction of the slant, many technology-driven project easily in the process of deep from the actual scene, lead to the final results appeared deviation, we only by constantly to do periodic checking, the summary, to verify in actual combat, to guarantee the accuracy and effective work output.
To sum up, first find a good business position for technical output, see if there is a place to borrow, do not repeat the wheel. After rapid verification of the correctness of this direction, and then gradually more investment, plump technical design. Don’t do it on your own, silently, without the business scenario paying for it.
Another special reminder is that not all problems need to be solved by technical means. Technical ability is only one of our advantages and long board, but it does not mean that technology is all of us. Sometimes effective communication and coordination can also help us solve many problems. The code is great, but it’s not the whole story!
2, do a good job of upward management
In fact, whether we are TL team members or team leaders of project research and development, we are all engaged in management. An important part of good management is to solve problems from the top and obtain results from the bottom. Downward management may be what most people can think of quickly, but how to do upward management well? Did you know your supervisor needs you to “manage”?
Here is a real example, which might be more physical. Student A and student B are doing A valuable front-end technology-driven project respectively, but their ways of doing things and their results are quite different:
Student A: The c-side small program developed by the team encountered A big bottleneck in performance experience. Users often reported problems such as blank screen and lag, which seriously affected the user experience. Therefore, I arranged student A to organize an in-depth performance experience optimization project. Before doing this, the group has roughly analyzed the problems to be solved, the methods to be used, the resources to be coordinated, the quantitative indicators to be drawn up, the effects to be achieved and so on. Then, in the process of implementation, Each week the project’s progress, the investment of resources, the problems and potential risks are detailed in the form of project weekly synchronization, such as project will continue to follow up after online, to continue to look forward to collect statistical data of all kinds of indicators, and comparison between the old and new data in each dimension validation on-line effect, and collect all options, get ready for the next phase of iteration.
Student B: The front-end team is deficient in abnormal monitoring. It is often inefficient to check and locate some bugs in the production environment. Therefore, student B with strong technical ability is assigned to solve this problem. After doing some research, student B decided to develop a set of purely self-developed monitoring system. The general content is to start from scratch, develop the whole stack from front end to back end, and support customized visual charts to facilitate users to view data. So he began to work overtime every day until late at night, quietly toiling away for nearly two months, with no one but himself knowing what he was doing or how far he had gone. At the end of the month, you’ve produced a seemingly powerful, well-developed system that turns out to be almost unused, solves few real pain points, and is of little value to the business.
Obviously, two kinds of different habits and behavior, give people the sense of body is completely different, the final effect will also have a relatively large gap. More importantly, the failure of upward management will not only affect the inconsistent results and goals, but also affect the internal communication efficiency and trust of the team. If it is not corrected in the long run, the negative impact on the team and individuals is huge.
3. Use OKR management tools
If there are no more than five people on the team, it is very easy to quickly produce a goal and direction by sitting together, and the communication cost of execution is low. However, if the team size is large, it is necessary to use some tools for management, which can help us better and more accurately reach consensus among the team on the key goal results to be achieved, and can effectively track the input-output and schedule risks in the process of achieving the goal.
OKR is one such tool that can help us because, unlike KPIs, it does not set performance indicators for teams and is not tied to individual performance reviews. OKR pays close attention to the big goal is to develop a top-down, teams can disassemble layer by layer to the big target, and through several can be the key to clear quantitative results to describe and verify the big target completion, the advantage is once reached a consensus within the team, we can generally clear current work center of gravity, Technical and business work will also have a correct direction, to avoid the situation of information transmission is not smooth, the goal is not clear, do things will be more passionate, more motivated, more sense of achievement and identity. In the past year, our team tried to use OKR management tool. Although there is still a gap between the actual implementation effect and the expectation, I think as a tool, it has played its role to some extent, really helped us and solved many problems.
How to interview candidates
To build their own team, the first thing to do is to recruit, interview, I had the opportunity to work in your half year have been exposed to more in this area, this is a great challenge for me, because I have to face the most is that some work experience, technical ability, all aspects of precipitation is much higher than its own candidate. Therefore, only by learning to stand on a higher dimension and communicate with candidates, can we make a more accurate investigation of each other and discover people who are really suitable for our team.
With the continuous growth of their experience, the improvement of various aspects of ability, and the increasingly rich experience in the interview, I also summed up some of their own experience in the interview investigation of this matter:
1. Avoid question-and-answer tests
Many technology started to do the interview the interviewer students, it is easy to fall into the myth that will interview into a question and answer type questions, similar to the student in the era of the exam, ready in advance a set of questions, especially some self familiar or strengths in the field of knowledge, and even some copy from the network directly to the interview questions. Then go through them one by one during the interview and judge the interview on the percentage of correct answers. In fact, this is not an efficient and accurate way of interview. On the one hand, it is not good for candidates’ experience, as if they are measuring one’s ability by one point of knowledge. On the other hand, it can also be detrimental to the outcome of the interview. Such rigid interview questions are easy to predict, and candidates can do some preparation to create the illusion that they are good at something.
Remember, the interview is not a contest between the interviewer and the candidate, and the outcome of the interview is determined by the success of the interview. The interview should be a process of seeking common ground while putting aside differences, the two sides to constantly collide with each other in the communication of ideas, to consider each other whether oneself next, those who want to go to work for a long time, values and whether the company team, both sides will be able to have a high direction close to target, and in the next over a period of collaboration can reach a consensus on the way. Only when these aspects are relatively compatible with each other, can we make a relatively accurate decision on the results of this interview.
2. STAR Rule
As mentioned in the previous paragraph, candidates should not be evaluated by simple knowledge questions. How should one evaluate one’s ability? In fact, the answer is obvious, which is the ability to solve problems. How do you evaluate a candidate’s problem solving skills during the interview? We usually recommend using the “STAR Rule”, which instructs candidates to describe their past experience in solving problems, in order to gather the information they want.
The STAR Principle is divided into four sections, Situation, Target, Action and Result. I won’t go into details here. There are many systematic introductions and tutorials available online. The main idea of this principle is again what we have mentioned many times before: how to use technology to solve a real-world business problem, and then we look at the qualities and abilities of the candidates as they describe the experience of solving the problem.
3. Talk about something else
In the interview, in addition to examining technical skills, business understanding, and some teamwork skills, I also like to ask questions about things outside the job, so as to get a comprehensive understanding of a person from other aspects, so that the cognition can be more three-dimensional. For example, I often ask candidates what books they are reading recently, whether they like sports and fitness, whether they have long-term and short-term plans, whether they are confused and confused, and so on. In short, an interview is not a test, but a way for both parties to pick a partner to work with for a long time to come.
These skills and methods can not only be used for reference and application in the interview process, but also can be used as a reference in daily communication and heart-to-heart chat with team members to guide them to describe the problems they solve, the troubles they encounter, and the gains they have gained.
Seven, how to play performance
Performance appraisal is a kind of employee appraisal method adopted by most companies at present, which is used to quantify the periodical work output and personal growth of employees. Team TL is the direct executor of performance evaluation. Whether a performance is “beautiful” or not can largely reflect the level of TL management quality and ability of the team. There will be a part of THE TL to play performance as a difficult task, feel that efforts do not please easy to offend people, or formalism, painless to muddle through. In fact, playing performance is a good way for team TL to penetrate into the team, find problems, communicate with each other, and establish a channel of contact. For TL itself, the team can take inventory, summarize and review to find problems; For the students in the team, they can make a periodic summary of themselves, check the shortcomings and fill the gaps, do a good job of upward management, align the goals, and understand the key direction of the team in the next stage and the direction of their own efforts.
Here, BASED on my experience in the past three years and some cases, I sum up a few key words that can help TL achieve a “beautiful” performance.
1. Management comes first
In fact, the evaluation or scoring mentioned above is only a small part of the whole performance management. To really do a good job in performance evaluation and scoring, all links and details of the whole performance management cycle are crucial. In other words, we should not only do a good job in performance evaluation, but also do a good job in performance management.
Performance management is generally divided into performance counseling and performance interview, which are closely related and inseparable. Among them, performance coaching is generally carried out according to the “GROW Law”, that is to say, we reach a consensus with the mentored students on the four parts of Goal, Reality, Options and Will. And pay special attention to the point that, try to avoid in the process of their own subjective, to help students develop direction, and should be as the role of a coach, inducing the spontaneously to think about these problems and come to the conclusion that only the will of the heart spontaneously, only will be more active, more execution, others it’s difficult to get hammered in the idea of identity. In addition, it is also very important to give students full respect in the process of coaching communication. A relatively private, comfortable and good surrounding environment can lay the foundation for your success in a conversation.
When it comes to the performance interview, it’s easier to give a fair grade based on what’s already been agreed. It should be noted that prior notice should be made before the actual conversation, so that both parties can have time to think and prepare. For TL, they can set the goals of the conversation in advance, as well as the information they need to prepare and collect. In the process of conversation, we need to pay attention to conversation skills. Students with different types, experiences and personalities will have different ways. I will share a case about this below. After the conversation, the two sides need to reach some consensus or suggestions for improvement, and if some of them need to be signed in person, they need to be executed on the spot. This may be different for different companies and teams. For details, please communicate with HRBP in advance to avoid any deviation between the communication results and expectations.
2. Identify problems
No matter in the process of performance coaching or performance interview, finding problems is a crucial concern. Meanwhile, it is more important to let team members find their own problems through guidance. Then we will combine the problem itself and the goal, identify the gap between them, and formulate the corresponding improvement plan. However, for some students who are not positive in the communication process or it is difficult to get effective feedback through guidance, TL may need to pay more attention to the inner appeals of the other party.
For example, I encountered a similar problem in an interview with a female student in my team this year. She is an optimistic girl with good business skills. However, she rarely participates in team construction and some technical projects, which gives people the impression that she has no technical pursuit and does not want to make progress. After some discussion and guidance, she was able to tell some of her problems at the present stage. However, when it came to summarizing the improvement plan, I found that no matter how much guidance she gave, she could hardly come up with a reasonable and relevant plan. She hesitated and felt hard to speak. So I combined with the daily observation of the students, and to collect some information in advance, instantly realized that the key is that the students lack self-confidence in their own technological ability, so when the team has some technical construction opportunity arises, although you are interested, but worry that they will be go wrong, don’t have the courage to take the initiative to contact and to undertake, As a result, their sense of participation and presence are not strong enough. Therefore, I gave her some advice on improving her basic ability and technical depth, discussed and worked out some improvement plans, and soon reached a consensus, which she gladly accepted and was willing to make changes through efforts.
The heart is kind and the knife is quick
When some students in the team have a very low degree of agreement with the team, or it is difficult to reach a consensus for a long time, it is not a win-win thing to choose to leave at this time. Do not be unpredictable and unclear, or hide something, communication is not sincere, will eventually lead to a dismal end, both sides are unhappy, mistake others and mistake yourself.
A similar situation occurred in my team. After joining the team for two years, a student’s personal growth direction and development interest deviated greatly from the general direction of the team. It was difficult to find his own position in the team for a long time, and he was not very happy in his work. So I find the opportunity to try to communicate with him, after analysis found that in fact in a common environment for the students is a better choice, finally the students to find more suitable for their new environment at present stage, and made a good impression on our team, everybody still privately maintained good communication and contact.
Remember, if you are not really good at manipulating language skills, then please reject the white lie. We need to communicate our ideas to our partners in the most direct and honest way.
8. About the future
Working for three years and leading a team for two and a half years, this kind of special experience makes my growth path somewhat “non-mainstream” compared with most technical people. I also know my current areas to be improved, for example, business sence is not strong enough, and business thinking is still too little. Owing a lot of technical debt, technical details of the in-depth lack of, recently also actively make up lessons. The advantage is that I tried to look at people and things from a higher dimension early on, and understood that solving problems of people is more important than solving problems of things. In addition, we will also focus on building interpersonal connections and solve team problems in a people-oriented way.
A few days ago, a senior in the company told me a very helpful sentence, which probably goes like this: What is growth? Growth is to continuously see some problems and things that you could not see clearly in the past, and then along with this process, there will be continuous harvest, and occasionally some unexpected benefits, nothing more. For me, and the brothers I met and the connections I made with them, were some of the most valuable things I learned growing up.
As for the future, what I need to do is to continue to find my own problems, solve these problems, achieve self-value and gain recognition. If you have the strength to spare, you can help people around you to find and solve their problems, so that they can work and live better.