This article was first published on InfoQ vertical public account “Top of the Front”, ID: Frontshow

Brief Introduction to interviewed Guests

Yang Yonglin, known as the “master”, has 8 years of front-end development experience. He is the former front-end technical expert of Sina Weibo and the chief front-end architect of Lianjia. Long-term research on Web access performance optimization and front-end framework construction. As a member of the initial team, the dean participated in the development of all PC versions of Sina Weibo, among which version 4~6 designed the front-end architecture of PC version of Sina Weibo as an architect.

During my tenure in Sina Weibo, the teaching director designed and implemented pipeline loading technology and modular code organization, which greatly reduced the development cost while improving access performance. His research interest is Web access performance optimization and framework organization. BigPipe technology has been implemented in one of the few places in China, which greatly improves the access speed of weibo. At the same time, the front-end code base package, front-end framework and construction tools of Weibo were all created by the master. At the end of 2015, the dean joined Lianjia and was responsible for the overall structure of the front-end.

In 8 years of front-end development, how did the guru step by step become a well-known front-end architect? Why did you choose to join Lianjia? With these questions, let’s get to know this intelligent and humorous architect.

>>>> You are a front-end architect in Both Weibo and Lianjia. Could you tell me what the specific job of front-end architect is?

Yang Yonglin: My understanding of the role of an architect is gradually changing and deepening.

When I first started working, I thought that an architect was someone who wrote fast and good code, a better version of an engineer.

After working for a few years, I found that it was not enough to just improve the efficiency of my own development. The team needed to improve as a whole. After discovering this, I started making and refining various development tools and writing development frameworks.

In recent years, as I’ve iterated on a number of products, I’ve found that framework tools that have previously been used to improve productivity can become a stumbling block later on. At this point, I started thinking about the guiding principles of architectural design, and I started thinking about trade-offs. If something can improve efficiency in the short term but does not conform to the principle, I choose not to do it or try to improve it under the guidance of the principle.

For example, I believe that changeable code is the code with vitality. In terms of architecture design, I also tend to make the code of the project evolve bit by bit, rather than reconstructing to the state when a word is incompatible. So I think of a front-end architect as someone who lays out the guiding principles of development on the front end and designs the development framework and tools around those principles so that more developers can work together.

>>>> You designed the front-end architecture when you were working on Sina Weibo. Could you introduce what components are included and what key technologies are involved?

Yang Yonglin: Mainly code base package, page loading framework and front-end building tools.

Two of the main problems with early front-end development were browser compatibility and a lack of rich apis, and the base packages were generally used to solve these two problems. At that time, Sina had a Sina package of its own, but the code is scattered, the model is not unified, each product line has its own extension, the same function may have a variety of implementation, not easy to maintain. Later, I used my spare time to develop a basic package with namespace management function, which is simple, clear and easy to use, and has been adopted by the team as the basic package of Weibo and used today.

The page loading framework was forced to come into being by demand. In 2010, the microblog business expanded and the page displayed more and more content, which made the page response speed become slower and slower. The team I work with has received requests for faster response times with more content.

At that time, Facebook introduced BigPipe technology, and we decided to implement it because we thought it was the right idea to solve the problem we were dealing with. But at the time, Facebook just shared what they were doing, they didn’t implement it, so it was a huge challenge for me.

I divided the page into independent sub-modules. Modules were completely autonomous and could be nested, so the page was a stack of modules in a tree. The server Chunked the module’s information to the page as blocks of JavaScript code, and the front end does an important job of managing the life cycle of each module.

I was very fortunate to have the opportunity to work with my team to develop this loading framework, and we were probably the first in the country to fully implement this technology for a large Internet application. In the following year, I have been working on the optimization of this technology, such as supporting out-of-order output of the server, ensuring that the server can use parallel strategy, compression, reducing predependency conditions, etc. In 2013, I implemented CBigPipe (parallel BigPipe) technology in cooperation with @laruence. Further improving the performance of the technology. The loading performance of weibo V5 version also reached its peak, with page loading speed almost equal to that of static web pages.

Front-end build tools have only become popular in recent years. In fact, as early as 2008, Sina has been using front-end small file development, using build tools to develop, test and launch. It was a bit ahead of its time, but at that time it required PHP, Python, and Java environments, which was difficult for the team to maintain, and it used string replacements, which had limited functionality.

In 2012 I revamped the tool so that it only required the Node environment and supported development, test deployment, and packaging to go live. With UglifyJS and the syntax tree, I added some features that I didn’t have before, such as a precompiled template engine, support for template nesting and motherboards, code health detection, redundant module analysis, etc.

>>>> front-end build tools before and after Grunt/Gulp, Webpack, NPM scripts, etc. What do you think of these tools, which is better? How to choose the right tool for your company’s products? What aspects should be considered?

Yang Yonglin: I think these tools effectively solve the problem of front-end development efficiency, their emergence is to promote technology, if I do tools when these projects appear, it will reduce my workload. As for which is better, I think the one you can master is the best. Because at the end of the day, the tool serves your business, and you may need to tweak it or write extensions, you may find that your familiarity with it becomes important.

The migration cost of a build tool is high, and I don’t recommend changing it too often, so it’s best not to follow the trends, but to choose the right one for your team. If it’s not a very large application, build results don’t make much difference. Instead of trying to figure out which one is better, play one thoroughly.

>>>> How to ensure that team members do not step on the same pit? Was this considered when designing the framework and building the tools? Please give an example.

Yang Yonglin: First of all, it is inevitable to formulate norms and share experience, but the paper comes to shallow sleep, most of the time, step on a pit, the experience will be profound. All I had to do was minimize the consequences of a team member stepping on a pothole. For example, the development environment I provided can completely simulate the online environment, and the test code is consistent with the online environment. Many unexpected situations can be found during development and testing. At the same time, the development specification should be checked by the tool to ensure that the code that does not conform to the specification can not be packaged online. For standard code, you can use tools to calculate the scope of business impact, which can effectively ensure test coverage. In general, it doesn’t matter if you step in the hole, the structure helps you, and the process of climbing out of the hole becomes an asset for the team members.

>>>> What do you think should be the focus of optimizing Web access performance? Among them, what is the most noteworthy point? Why is that?

Yang Yonglin: I think performance optimization needs to take into account all aspects, including network time, server computing time, page requests, downloads, page loading model, etc. Any of these performance improvements may require a lot of code changes or architecture changes, but the results may be minimal. Therefore, silver bullets are rarely seen, and are generally made bit by bit. Let me talk about two points that I think are worthy of attention but are easily overlooked.

One is the form of the product you serve, what users care about, which is easier for some engineers to ignore. Some products need to be quick to open and some need to be smooth to use. Some product users can tolerate old data, while others must be new; Some users turn them on many times a day, while others turn them off once. These differences in product requirements will influence your decision.

The second is the evaluation standard, with what to measure the quality of performance. Some people think that if the number of requests or the number of requests is reduced, the access will be faster, but this is not necessarily the case. It is possible that the things you put a lot of effort into will not seem to the user to have changed much. Therefore, it is important to have a metric that allows each optimization to be statistically reflected.

>>>> What are the front-end performance metrics? How to monitor Web access performance?

Yang yonglin: The products I work for generally focus on access performance, that is, how quickly users see content, so we usually use the first screen time to evaluate, and most performance testing services can provide this indicator.

There are two reasons for choosing this indicator: first, it is not a technical indicator, but a perception indicator, so it is closer to human feelings. The second is bypass detection, which is not in the system and not the data reported by the system, so as to effectively avoid the problem of survivor bias. Of course, it has some disadvantages: first, the data sampling is small, and second, it can be spoofed. So a little bit of statistical savvy and a good understanding of performance monitoring may be required.

In the process of monitoring, first of all, we should pay attention to the change of long-term trend. If there is no emergency, the absolute value of single point of data is meaningless. We should collect long-term data and analyze the change, especially when there is change. Second, pay attention to the bottom 25%. Some people will swipe their products on the Intranet of the company and feel very fast. In fact, no matter what means you use, as long as the Internet is fast, the user experience will not be too bad. Third, analyze data from different dimensions, such as region, network, time period, operating environment, etc.

>>>How can a front-end engineer become a front-end architect? What other skills do you need to develop besides programming ability and architectural knowledge?

Yang Yonglin: I think the job of architects in most fields is the same, which is to build a framework to solve problems, so that team members can work well together under the framework to complete the product development requirements.

We know that there are many ways to solve a problem, and trade-offs are important in this process. We also know that without a silver bullet, there are very few comprehensive solutions, and most of the solutions involve sacrificing something for something.

Therefore, as an architect, it is important not only to be familiar with the characteristics and costs of each technical solution (that is, programming ability and architectural knowledge), but also to learn how to choose. Obviously, the architect needs to make decisions based on the product’s characteristics and direction of development, and the architecture in the front end area needs to be seamless for the working teams. So in this process, good communication skills, empathy, altruistic thinking, it is very important. Not only do we need to complete the development task, but we also need to think about how we can help the project solve problems in our area.

>>>> < p style = “max-width: 100%; clear: both; min-height: 1em; How has this affected the development of the team and its individuals?

Yang Yonglin: This is my fault. I like to criticize other people’s plans. In my opinion, this is a process of thinking. Only by analyzing problems from different perspectives and challenging the rationality of solutions, can problems be solved more reliably. The same is true in the acquisition of knowledge. Only by asking why and tracing the root can the knowledge system become stronger.

I like to play the role of “villain” in a team, analyzing problems from the opposite perspective and challenging others’ plans. In fact, I’m not really going to deny him, but I hope that his plan is repeatedly considered, thoughtful, such a plan will be more robust. Over time, they will think I am a pushy person and will do enough to “challenge” me. They’d be happy to talk me to a standstill. This result is what I want to see, because it shows that the team members have given enough thought to solving the problem.

>>>> why did you give up the veteran status of Sina Weibo before, and choose to join Lianjia?

Yang Yonglin: I think people live in the society and work to create value and wealth for the society. It has nothing to do with what kind of occupation they are engaged in. There’s a tendency in the industry to think that programmers write code and don’t care what they’re doing. Even society labels programmers as “dull” and “low in emotional intelligence.”

I don’t think that should be the case. A programmer is also a social person, with social responsibilities, family responsibilities, companionship with his partner, taking care of his children, not just facing the code every day and ignoring everything else. People should not limit themselves because of group impression. People’s life should be diverse, rich and colorful, and life should be meaningful.

Personally, in the past few years, the products I serve have not only deepened the communication and understanding between people, but also made the information of the country more transparent. And the work THAT I do contributes to a product like this, and I can say that my work makes the world a little bit better. It makes my life feel a little more meaningful. As I build the front end framework, my personal role becomes less and less, and THE value I can continue to create becomes less and less, so I need another platform to continue to use my energy.

At that time, I had the opportunity to get in touch with Lianjia, a company dedicated to solving people’s housing problems and making China’s largest market transparent and orderly. I think what Lianjia has done is very meaningful. At the same time, in less than two years, it has gathered a group of talents in various fields, maintained the largest real estate transaction system in China, and made the transaction of houses easier, transparent and fast with technical means.

In the contact with Lianjia, I felt that kind of active problem solving vitality and pragmatic attitude. In addition, most of the technical people in Lianjia were previously the backbone of various large Internet companies, and I think there is nothing more exciting than working with like-minded people to change the world. At this time, Bird brother specially invited me to join homelink, I did not hesitate to agree.