Responsible for front-end development of Taobao business for 9 years, talk about my experience

38afbd721dfed3f50771562338120c4d.gif

The author of this article, Yongba, is in charge of the PC revision of Taobao. He firmly believes that the development of history is a spiral, and those things that are believed to be right will definitely happen/be proven in the future.

Article guidance: Taobao PC revision! We chatted with a man behind the scenes for 6 years...

17da01e98bc7b1d047daea4600b7783e.png

origin

I have been engaged in the front-end development of Taobao's business since I joined Taobao UED (the front-end predecessor of Taobao) in 2014. It has been 9 years. I have always wanted to make a brief summary of a quarter of my career (if I can do it for 30 years), but I have serious "procrastination". I didn't make up my mind until I was invited to do a year-end summary a few years ago. up this article.

This article is a business front-end summary of how to support the business and how to achieve personal growth in the process. Some changes in the mental journey may not be in a certain moment, but formed imperceptibly in the process of practice.

11ab485283d8c2848910dcab5e5ad2e4.png

about me

In the first five years of my career, I was a front-line developer, and I also undertook the work of virtual TL during this period; since 19 years, I have become the front-end person in charge of Taobao's basic link (now user product technology). In terms of business, I have successively supported Yitao (Overseas Taobao & Special Sale), Taobao Education, Taobao PC Homepage, Taobao Tmall Store, Taobao Tmall Basic Products (Homepage, Information Flow, Product Details, Transactions, News), etc. In terms of technology, I have done cross-terminal (Weex/small program/Hybrid), construction, full-stack, open (two-party & three-party), data (experience measurement & monitoring), etc.

04e087b6881b5a5e105acfe02dba5ff8.png

The mental journeys I went through


▐Why do front-end  


I majored in Information Management as an undergraduate, and the dean of the department planted the seeds that I need to do a Ph. So it was logical to go to school for a few more years, and to conduct research work in the field of text mining during graduate school. After completing the research on words and sentences, limited by the corpus and unable to go further at the text level, he decided to join the industry. 

After looking for an internship, I found that I didn't know what to do in the future, and I didn't have any areas of expertise. After researching (hitting the wall) a series of directions, I feel that I can still be a programmer. So after studying C and PHP for a period of time, I successfully joined a startup company doing Taobao Express as an intern. I am very grateful to Yang Ge, the owner of the startup company, for giving me the opportunity to learn from Caiji. During the internship, almost every day from nine to ten in the morning, one person was responsible for the database design, interface packaging and UI implementation of the website. I also came into contact with front-end page development for the first time. I found that the front-end is much more interesting than the back-end (PHP), and one line of code can change the world. After the internship, I read all the front-end related books that I could find in the school library, and learned a lot from the senior sisters who got offers from other companies; Join Taobao UED at that time.

To sum up, during the undergraduate period, I systematically studied the basic knowledge related to management and computer science, probably at the stage of being able to know everything; during the postgraduate period, I cultivated my ability to discover, define and solve problems. Looking back on my university and postgraduate careers, I think the most important thing at this stage is to find a field that you love and can give full play to your comparative advantages, and work hard for it to prepare for your long-term career.

▐Do your job well  


After officially working, my work mainly revolves around how to quickly integrate into the team, achieve rapid growth, and prove my ability while supporting the business well. It can also be summarized as fulfilling business needs quickly and well (with quality and quantity), while gaining a sense of technical accomplishment. 

In terms of business support, I did not encounter too many challenges, and I was able to complete the tasks assigned to me quickly and with high quality. For example, in the first month after officially joining the company, I was independently responsible for the largest marketing activity of Yitao at that time - 88 Haitao section, a dozen pages were developed in 2 weeks. There was a small episode during this period. I was a little bit pursuing perfection, and I was always very confident in visual restoration. When I confidently sent the finished demo to the designer for experience, the designer asked me very surprised, the line ( border)? I was even more surprised, what kind of line, where is the line (it turns out that the pixels of my monitor are too low, the frame of #999 does not appear on my monitor). 

In terms of technology it's mostly about learning quickly and trying to make some changes. During this period of time, I was full of curiosity about various technical solutions, and wanted to know how certain functions, components, and libraries were implemented, what was the principle behind them, and a lot of wheels were built. It roughly includes three levels. First, purely build a wheel. Libraries/components that have not been implemented will be re-implemented by themselves, for example, waterfall components/paging components/jQuery, etc.; second, try to change the concept to re-implement the wheel, for example, For a while, I especially wanted to solve the problem of callback hell in business code, learned the programming mode of finite state machine, and applied this concept to multiple business projects. For details, refer to JavaScript programming based on finite state machines; third, try some new features or new frameworks in the front-end field. In early 2015, I refactored a page with React. There were no small challenges in management. 

In terms of integration, I earnestly wrote the daily daily and weekly reports, actively participated in the sharing and coding competitions within the team, and won some awards. As the saying goes, Maxima often exists but Bole does not. But you need to prove that you are Maxima first, then the daily, weekly, and weekly meetings will become a stage to show your strength. 

To sum up, at this stage, I am full of curiosity about various new technologies, and I am willing to spend time learning and verifying to achieve self-satisfaction and self-growth of technology; business is a very competent front-end for me, but it may be nothing more than that That's all.

393dd5d85d71f30efc44d6156307451a.jpeg


▐Put things to the extreme  


With a deeper understanding of the business and the understanding of the technologies that need to be understood, the problem we face is how to solve a deterministic problem well and exceed everyone's expectations-to do things to the extreme. From this stage on, I basically don't know technology for the sake of technology. Technology is the means and tool for me to solve business problems.

How to make things to the extreme? The premise is to be familiar with our business, that is, who his users are and what problems he solves for them; through competitive product research, extensive internal communication and own experience, we can confirm the gap between ideal and reality, and then confirm the business pain points. After we have a direction, we need to define a goal that is challenging and widely recognized by everyone. Note that the goal here is not what you think is a challenging goal, but a goal that experts (business & technology) in this field think are challenging; When it comes to strategy, it is best to use the strength of the team to follow the trend; when designing a technical solution, it is important to find the most reasonable path, not to challenge the largest technical solution. 

When I was doing Taobao education in 2015, pictures were the mainstream materials of Taobao, and there were very few videos. Mobile Taobao couldn’t even play videos on all models, let alone horizontal full-screen playback. But for users of Taobao Education, buying lessons and watching videos is the most basic requirement. In order to solve the video playback problem, I tried Native and pure Web solutions, and tested almost all models in the laboratory, but some models still have a black screen. At the end of the road, it was discovered that UC is promoting the UC browser kernel to access mobile Taobao. I tried to contact the classmates of UC Player, and they hit it off immediately. While solving the Android playback problem, they also helped UC Player to land in Taobao. In order to solve the problem of horizontal full-screen playback on the iOS side, I first brainstormed the solution of using CSS3 to rotate the Video, and then brainstormed the solution of rotating the WebView, so far the problem of full-screen playback has been completely solved. 

To sum up, to do things to the extreme, the most important thing is to find a good goal, and the criteria for judging are also very simple. When you tell everyone that you want to do xx, what is everyone's first reaction? If so how did you do it? Then congratulations, you have found a very good goal; if everyone responds why you do it, then you can explore again.

18370ece4cb2b9e3f03683cfd94f851a.png

▐ Data-driven


If I only do one business, what else can I do after solving all the known problems? This has bothered me for a while. Essentially, after the realization of the function of 0->1, how can we make a deeper breakthrough. The answer I found was data driven.

I have a belief in data, and I believe that data can help me discover and solve problems. Data-driven has the following characteristics. First, data thinking, that is, from perceptual analysis to rational analysis. Sensibility is the subjective perception of good or bad, but whether it is really good or bad is uncertain. Rational analysis is based on logic and data analysis. Taking Taobao education video playback as an example, the intuitive experience is that the video cannot be played, and the screen is black from time to time; speaking from the data, only 95% of the video can be played successfully. Second, data value, from focusing on functional value, that is, from scratch, from 0 to 1; shifting to paying more attention to long-term value, achieving a breakthrough from 1 to 99, that is, high-quality development. Third, data capabilities, we need to have the ability to analyze, process and interpret data, for example, write SQL to run data. 

In 2016, I took over the Taobao PC homepage, which was still tens of millions of DAU at the time. When setting goals, my supervisor asked me "What are you going to do?" 』, I chatted with my predecessor, PD, and development, and I did some research on my own. I think there is still room for performance optimization (the homepage is the face of Taobao, and its performance has always been very good). So I told my supervisor that I would like to optimize performance, and he said, "Maybe it's 20% tentatively"? I panicked at the time, I had done so well before, and it felt a bit difficult before there was a major technological change. I went to the person in charge of TMS at the time, Aoao (the former director of the homepage), and he said, "If you want to do it, double the performance, or don't do it." So I approached Shi Ran (the former supervisor of the homepage) again, and he said, "Okay, then you will be the first." At this time, I became even more depressed. The first screen of the Tmall homepage is basically a big slide, while the Taobao homepage supports thousands of people and faces, and there are 10+ interfaces on the first screen. After being depressed, although I don't know how to achieve it, I also know everyone's general understanding of this matter; so I started to set goals, determine the data platform, do A/B, etc., and observe the effect of each optimization and the potential space through the data . After a series of operations, the goal was finally reached on New Year's Day in 2017.

03eebfce4ef756241ea9fca714cb2378.jpeg

▐Business   value-added


When we have many choices, how to judge which is the most important. What does a technical team do to generate the greatest value for the company. 

When we set technical goals and plan technical systems, we usually dismantle them according to the dimensions of experience, stability, and efficiency (cost reduction and efficiency improvement); however, each person (team) has limited energy (resources). How should we choose, how to judge the priority of things. To answer this question, I think it is necessary to return to the business itself. The essence of business is transactions, and the value of commercial companies lies in the creation of profits. For e-commerce companies, the size of profits depends largely on the size of users and the size of transactions, and the source of profit growth can be open source or throttling. At the same time, we should realize that in commercial companies, the value of technology exists on the premise of realizing business value, and there is no technology for the sake of technology; if there is, it is to realize the potential long-term value of the business in the future. Therefore, we need to build our technical system based on short-term and long-term business goals, and drive the realization of business goals through the achievement of technical goals. 

When I was in charge of the front-end team of Tmall Taobao's basic products in 2019, the problem I faced at the time was how to make this small team generate greater value. We all know that the technical team is good at doing research and development to improve efficiency. But for a small team of less than 10 people, even if you set an ambitious goal-doubling the efficiency and halving the staff. But this income is a drop in the bucket for the company, and it is not sustainable; from a different perspective, can we help Tmall Taobao achieve e-commerce GMV improvement? We can do a simple derivation: GMV = customer unit price * order number, order number = DAU * browsing conversion * transaction conversion; the product details, shopping cart and order placed by our team are the three core products of "transaction conversion". The annual GMV of Tmall and Taobao is several trillion. If we can increase transaction conversion by 1%, it will be tens of billions. The goal looks good and sounds appealing, so how do you go about it? We can transform the product process of transaction conversion into a funnel model of user interaction and data communication; then the improvement of transaction conversion can be transformed into: removing a certain process in the funnel, or increasing the conversion rate of a certain process. According to this strategy, our team has made a series of optimizations such as stability improvement on the H5 and mini-program trading links, complementing the capabilities of benchmarking Taobao, experience upgrading and product optimization, etc., to help the business achieve an annual growth rate of several hundred million to several Billion incremental GMV. What can a front-end pursuit be? It is your own code that runs on the devices of hundreds of millions of users, and even one line of code may bring millions, tens of millions, or even hundreds of millions of commercial value.

71f577103bc46c03d0396936e26e406c.jpeg

▐Technology   dares to be business first


It is always easy for the technical team to meet and make demands. In today's increasingly fierce e-commerce competition, as a technical team, how can we help businesses find certainty from uncertainty, so that businesses can go faster and further. 

The great man has a popular definition of leadership: "Sitting on the podium, if you can't see anything, you can't be called a leader." Sitting on the podium and seeing only a large number of common things that have appeared on the horizon, that is commonplace, and it cannot be regarded as leadership. It is only when there is not yet a large number of obvious things, when the top of the mast is just exposed, you can see that this is going to develop into a large number of universal things, and you can grasp it, this is called leadership. Technology should be half a step ahead of business, and make technical layout in advance for business, and dig out things that may not be present but may be strong demands of business in the near future. From a macro perspective, we need to understand national policies, industry patterns, and technological trends; from a micro perspective, we need to know where our business comes from and where it will go in the future; analyze.

Since 2019, domestic mobile Internet traffic has gradually peaked, and more and more Taobao businesses hope to obtain more traffic from other channels (especially Alipay). After the merger of Taobao and Alipay's mini-program structure in 2018, mini-programs are the most suitable cross-terminal solution for multi-app delivery. But at that time, Taobao e-commerce only supported two solutions, Native and H5. The cost of the former for other apps was very high; the latter had relatively large bottlenecks in terms of control, security and experience. Based on the above judgments, we made a mini-program transformation of the details and transaction links, and adapted the technical solution of the basic link New Ortron + DX to the mini-program scenario to form a mini-program e-commerce suite. This solution better satisfies the open demands of business controllability, and the page performance has also been improved by about one time. Although there were not many businesses that hoped to access mini programs when the project was established, it ushered in explosive growth in 20 years. This solution also laid the foundation for the subsequent adaptation of WeChat applets.

2d3be5e968fd0a3ac22b2258f5ba6ebc.jpeg

69251dde9212d21a468a7a2177d6296b.png

Try to be the technical leader of a business-Technical PM

Although I started working as a technical PM when I was in charge of the Taobao homepage, and later also worked as a technical PM in several projects. However, I am familiar with the technology stacks and technical solutions involved in these projects, and the scale of the projects is relatively small, and the overall risks are controllable. Since July 22, I have been in charge of the second hop of information flow—the technical PM work of ND. ND is an immersive information flow product with endless content and products. Weex, data service TPP engineering and algorithm, regulation) and other aspects far surpassed the projects I was responsible for before. So far, I have been struggling for more than half a year. Although it is far from being a good job, I have some insights: 

  1. Responsibilities: The difference between the front-end business support and the technical person in charge is that the former is for post-oriented delivery of requirements, while the latter is for business-oriented delivery of R&D results. The former only needs to be good at oneself, while the latter needs to coordinate multiple product and technical teams to eliminate various uncertain risks and bring deterministic delivery to the business; 

  2. Perspective: Technical PM not only needs to have an end-to-end technical perspective, but also needs to have a business perspective; the former needs to understand not only the front end, the client, but also the server and algorithms; the latter needs to understand the company's strategy, business goals, Business strategy, strategy to product landing, etc.; at the micro level, it is necessary to understand the core indicators of the business, look at reports, cut streams, A/B, etc. 

  3. Organization: Project management of complex multi-team collaboration, relying on individuals cannot grasp the overall picture of the project, and requires the strength of the organization and the team. More time should be spent investigating the status quo and problems, and formulating rules that are widely recognized and effective to solve these problems. 

  4. Business: The biggest difference between the shopping guide link and the transaction link is - agility. In the transaction link, the design of the system is to produce deterministic results in deterministic business processes. In terms of system operation and maintenance, stability is also the premise, and the normal release rhythm is once a week. But in the shopping guide link, the system is designed to produce the best business results in the standard data processing process, and the content of the data results is changeable and uncertain. We once did a release statistics, and the ND front-end releases almost once a day, and I feel that it is already very fast; but the server (engineering & algorithm) can release dozens of times a day. In recent years, personalized algorithms with thousands of people and faces have shined brilliantly. One of the reasons is that there is a set of low-cost and fast trial-and-error infrastructure, and N experiments are running online all the time to select the best from the best.

▐   Try to make a technical product well


Since the end of 2017, I have been in charge of the front-end monitoring product of Amoy Department - JSTracker. The reason for continuing to invest in this field is that I firmly believe that in the context of increasingly complex business and technical systems, the only way to ensure business experience and stability is through the analysis and mining of online big data. This product has probably gone through the following stages: 

  1. Usability upgrade: JSTracker is the earliest monitoring platform of the group. Due to disrepair, it was almost unavailable when I took over. It must be downgraded every time there is a big promotion, but it cannot be used when monitoring is most needed. Therefore, at this stage, I mainly reconstructed the underlying data link (acquisition + stream computing/offline computing + storage) and greatly upgraded the product UI, and passed Double Eleven smoothly for the first time, with DAU rising from the original single digits to 20~30; 

  2. End-to-end monitoring upgrade: After the usability problem is basically solved, the focus of work is to enrich platform data and reduce business access costs. Started to access various end-to-end data sources and opened up various internal business platforms, operation and maintenance platforms and publishing platforms, and DAU increased to 50; 

  3. Field in-depth construction: After the end-to-end data sources are connected, it is necessary to build the core competitiveness and influence of the platform. So since 20 years, he has participated in the joint construction of the front-end committee of the group, and proposed and built the end-to-end grayscale monitoring and cross-end performance measurement solution for the first time. Among them, the first-screen algorithm developed by the team has obvious breakthroughs in accuracy and efficiency. And through safe production to promote business governance to improve the health level, the team also gave a D2 speech for the first time in 20 years, and DAU also rose to 100; 

  4. Terminal era: With the 22 years of Amoy's front-end from horizontal support to business verticalization, and the establishment of terminal engineer positions. The three directions of platform positioning construction are cross-terminal experience measurement, safety production (discovery and positioning), and user interaction analysis. In order to solve the problem of inconsistent measurement systems caused by different cross-terminal technical solutions, we collaborated with Mobile Amoy Native, Weex, PHA, and Flutter architecture groups, as well as Motu, JSTracker, TMQ, and ATS platforms to jointly launch the time-consuming standard for cross-terminal container pages in Taobao. The implementation of the container and the observation platform has become the unified standard of Mobile Taobao; in order to speed up the efficiency of troubleshooting online problems, and cooperate with the mobile Taobao infrastructure and cross-end architecture, Motu completes the full link log (rendering container log, network library log, backend interface log, business monitoring log) in series, laying a new foundation for the rapid troubleshooting of Mobile Taobao online problems. The team also attended the D2 speech for three consecutive years, and the DAU also reached 170.

Personal insights mainly include the following aspects:

Learn to delay gratification. When you firmly believe that your judgment is correct, then you should continue to invest and wait for the day when it will blossom and bear fruit. 

Technical products must define their own positioning and build their own core competitiveness. It should be avoided to be big and comprehensive, and having everything often means that everything is ordinary. Generally, it is not competitive, that is, it cannot attract users or retain users. 

Resources are always limited. We need to carefully choose our investment direction, control our desires, identify the most important problems and solve them well. 

The addition of new members may bring about qualitative changes in the development of technical products. To sum up, although I have been working for many years, the current product is only at a usable level, and how to design a good-looking and easy-to-use product in the future still needs more exploration.

▐   Try to bring a good team


After leading the team in real line since 2019, I have practiced in team building and accumulated some experience. However, team management is profound and requires further study and practice. 

People: Recruitment and talent training are the core tasks of team building, looking for like-minded talents who can bring business and technical changes to the team. It is easier to know than to do. When recruiting, you will often fall into certain setbacks and pressures and lower your requirements, knowing that you can’t do it. In addition, the most important thing for the technical team is openness and transparency, and the most important thing for each member is sincerity, and I sincerely hope that everyone can get what they want. In a sense, the size of the team determines the management mode, 10 people and 30 people are not exactly the same. 

Things: The biggest change from an individual to a team lies in how to transform from personal success to leading the team to success. One person eats enough for one person and the whole family is not hungry. There is no place for staying here, and everything is relatively controllable. The team means more responsibility, helping the business develop better, helping team members grow better, and cooperate better with partners; become the first person in charge of the business and the backup of all businesses, and become everyone when the team is confused Beacon of progress. 

OK: As a leader, you must control your own desires and give team members more room for development; try to establish rules instead of doing everything yourself. More output why it is done, how it is derived, rather than how it is done.


085dc57e38e838c2b6477eb67c14717b.png

one more thing


After being promoted in 2017, I have been confused for a long time about the future development and positioning of the individual and the team. At that time, I knew that I couldn’t maintain the status quo, but I didn’t know where to go. I vomited a lot of bitterness during the 1v1 with the supervisor. The supervisor suggested talking to Zhan Yan, so I took advantage of the salary negotiation node to complain to Zhan Yan. Fan. Originally, I expected Zhanyan to comfort my soul and guide me forward. Unexpectedly, Zhan Yan's first sentence is: "Yongba shouldn't be, as a core employee of the team, you should help the team find a position... (to the effect, I can't remember exactly)". After the chat, I felt incomprehensible. Afterwards, I calmed down and thought about the content of the conversation repeatedly. It was indeed my own problem. I did not do anything within my power to change the status quo except for complaining. In retrospect, I encountered similar problems when I was doing project research. I had to do text-level work, but found that there was no basic work at the word and sentence level. I also complained to my tutor and then stopped. Until one day I suddenly realized that since there is no work related to words and sentences, doesn’t it mean that this small field is still a space, and I published the first and second papers logically; people always step on pits in familiar places, At this time, you need someone to give you a hand or you need to have an epiphany. I am also very grateful to Zhan Yan for guiding the way forward and full of expectations. In the daily work process, we will inevitably encounter many challenges and resistance. At this time, we should calm down and do research to find out the status quo, instead of overemphasizing the current difficulties and being unable to extricate ourselves. At this time, it is even more necessary to have the courage and self-confidence to see the sun behind the clouds.


934d39eb4caf2181fb9aa854afd6ab12.png

Summarize


This article is a summary of my career so far. Due to the limitations of my experience, business and general environment, it is inevitable that there will be many deficiencies and prejudices. I look forward to you finding your own sweetheart. Finally, Wang Guowei's three realms of political science were used to encourage each other. 

Last night, the westerly wind withered the green trees, and I went up to the tall building alone, looking at the end of the world. 

The belt is getting wider and I don't regret it, and I am haggard because of Yixiao. 

I looked for him thousands of times in the crowd, and suddenly I looked back, but the man was there, in a dimly lit place.


7422ef5cfbe9367de8d4876de9a9edd8.png

team introduction

We are the front-end team of Taobao technology user product technology. We are mainly responsible for product details, forward and reverse transactions (orders, orders, returns and refunds, etc.), news, social networking and other basic e-commerce products. In terms of technology, we are exploring the ultimate efficiency and experience. The cross-end hybrid container solution, the new Ortron solution for two-party end-to-end openness, and the front-end security production and cross-end experience measurement solution.

¤  Extended reading  ¤

3DXR Technology  |  Terminal Technology  |  Audio and Video Technology

Server Technology  |  Technical Quality  |  Data Algorithms

Guess you like

Origin blog.csdn.net/Taobaojishu/article/details/130256611