Ali, a senior expert at the end of the road: standing 10 years of research and development on the road, looking at the front of the future


InfoQ· 2016-06-23 19:27:25

has gone through nearly 10 years of development, from the front to the slash-and-burn cultivation prosperity breeds All flowers bloom together., some of the trends and changes. Based on the moment, how to look at the front and back end of separation? How to look at the whole stack? For the future, what is the future of front-end engineers?

Tung , focus on front end for ten years, Alibaba B2B GIT senior front-end experts, training camp instructor. From the browser to the Web front-end, from digital television to the Internet, from social networking to e-commerce, from the technical architecture to team management, teacher Tung from these different angles, deep front field, accumulated a lot of experience, get a lot of sense, on the development of front-end have their own views.

Tung: my work experience is divided into three stages, the social direction from the digital TV industry to the Internet industry, and then to the direction of electricity providers.

when I graduated, accidentally entered the digital TV industry, the main task is to do the front-end development on the set-top box (at the time of the middleware architecture is based on the Web UI layer, and then the Web OS is a bit like). I in this industry for four years, including three years as front-end development, one year is to make the browser development. Style= margin-top: "15px

2011, Q+, a recruitment advertisement, inspired my passion for the Internet industry. Then joined the Tencent, soon to do platform products, and also responsible for the foundation of the team building. In the second half of 2014, I joined Ali B2B, to enter the field of B class electricity suppliers, and has been a different atmosphere and development space. Style=

> > > > what is the front-end project architecture you are in charge of? There is no use of the Hybrid model, why?

in recent years we have tried different teams of NG, Avalon, react, Vue of the mv* framework, the ultimate direction by us to PC React, wireless Vue folded & react line. Generally speaking, we own the wheel is not much, the general context is YUI - jQuery - mv*, the engineering system is also a few of the surrounding facilities plus some of our custom.

Hybrid is of course useful to, the reason is that to achieve a balance between experience in dynamic and development efficiency and the three users, there is not much choice in two or three years ago.

Hybrid project is in the actual project, the Native and Web complement each other, mutual backup. Here we can make special mention is that the need to do some trade-offs for the future: in principle, can do with Web or Web as much as possible to do a standard as a standard, encounter fragmentation, underlying ability is not flat, then use the way of Polyfill. Some of the performance and experience to do some of the things, as far as possible to Web developers transparent, architecture design orthogonal out.

first of all, we do a lot of scenes in the PC and wireless use of a set of core code, a different set of code. On the one hand is behind this layer and the back-end data and model combing front-end model and abstract, and different end equipment, in the model layer is very small difference, this part is extracted after the stability of a common layer. On the other hand, although the View layer does not look the same, but a lot of things in the way to describe the meaning of the way, and again to screen out some differences. So in the last part of the difference is just CSS, interactive logic, data adapter and custom and a small amount of View customized.

Second, the end of the fragmentation, we have to erase the part by Native, the other part, we introduce the UC WebView, will greatly help us to shield some of the bottom layer of the difference. Style= margin-top: "15px margin-bottom:; 15px

> > > > do you think the significance of the end of the front and back separation is big?" Is the project in the true sense of separation?

Tung: actually we're not here to love too early is more love about separation, before and after the end of fusion. From a technical point of view, the data model needs to be separated from the presentation layer, which is called the front and back side of the separation. What about the fusion? Is the implementation level and human level, because the B class business complexity, the complexity of the business across the threshold crossing is often greater than the complexity of technology, therefore, if we can put technical barriers on both sides of the lower through the service way, so when writing business, you can according to the situation, through the back end services the way to the front of Controller also wrote, or vice versa, through the front-end service way to the back-end View wrote.

the so-called real separation, should be in the decoupling structure, that is to say, whether you are the front or rear, in addition to a layer of Schema agreement, when writing Controller do not consider View, when writing View completely don't consider Controller. In this regard, we have been exploring a way to come, there are some interesting ideas and practices, and there will be a chance to share with you. Style= margin-top: "15px

> > > >; App mixed development of the advantages and disadvantages of what? Whether it will become the mainstream?

first, is the standard of compatibility on the burden. Because the WebView as a universal browser kernel, itself requires forward compatibility, for example, although the use of flexbox browser layout can be more efficient to layout, but it still must be compatible in order to recognize the floating layout, relative location and the layout of the table layout. The logic is very complicated, and the whole body. Now suppose I fork a new WebView, cut off flexbox support, it greatly reduces the complexity of layout logic, even if do not have to get a lot of optimization, not to mention the situation easier after also can do a special optimization for the flexbox layout, promoted a greater performance. Style=

secondly, the internal mechanism of the browser as well as the JS language in the design, in fact, there are some historical burden. For example, the browser from the beginning of the design, engine Dom and engine JS is the two separate black box, JS call DOM equivalent to a RPC call, each call will involve the preservation and restoration of the context. At the same time, excute Dom and render JS is running in a thread, even if there is no call relationship between the two, DOM also must wait for the completion of the JS render.

two things is the result of" in the process of operation in the two black box to switch back and forth between the various context switch, all waiting for each other, so off free in the difficult frame. So, if we can make engine Dom and engine JS in the implementation level can get through, change RPC calls for local calls, you can speed up a lot of. Further, if we can effectively use multi-core, excute JS and render in a certain condition in parallel, or the resolving layout and style in parallel, but also to enhance the performance of the new.

again, WebView itself is also faster, but some of the limitations of the OS or some old equipment WebView, will lead to fragmentation problems, it also slow our pace. This is more familiar with, such as Nitro's iOS, WKWebView in UIWebView, as well as Chromium after the WebView WebKit before the WebView Andorid4.4.

old Guo BeeFramework/Samurai, Ali birdnest, is on the left before the two subset of the Web standard burden, on the one hand, one hand to perform all the things attributed to Native runtime; FB React Native and Ali Weex, mainly on the left the first baggage (second part optimization); Mozilla Servo is committed to parallel and GC, mainly in the second Intel rejection burden; crosswalk and WeChat X5, Ali UCWebView, is in a certain range of third rejection burden...... In order to get rid of these burdens, we have put forward different solutions.

you no matter which way to go, there is a consensus or we are found, that is on par with several standard Web. Because the Web technology system in the UI description of the ability and flexibility on the design is very good, but also related to the development of personnel or recruit. So, if the mixed development refers to the Native in a Web standard, see Qi Runtime to write GUI, and part of the Native to the bridging ability Runtime to call it, then it should be a lasting trend. Style= margin-top: "15px

> > > >; what is the specific meaning of the whole stack? Is Ali to encourage engineers to work toward the direction of the entire stack of engineers to work?

in fact long ago, which is what everyone is before and after the end, engineers from A to Z, from database design to the interface, and then to the front-end display, from a stored procedure to load balance to deploy maintenance, we all have to do.

but the industry in the development of each segments are more complex, want to do from the beginning to tail is not no, not too hard, but it is impossible. If you really want to do it, then the understanding of each field can only be half a bottle of water, out of the thing is a toy. Then what shall I do? This requires professional subdivision, after the division of labor to the depths of their own development.

but again, after the division we still need to connect the various links, the proposed requirements for interface design, but also consider the FBI to this link. After the division of labor has the relationship between the upstream and downstream, duration, we also need to cooperate with the good. Style=

in addition, there is a situation: suppose there are two business, business logic is very complex, we have two people to do. If it is a front end of a back, the two complex business of most of the details, are two people have to understand. Because B class business is particularly complex, so this kind of situation is more common. This again is not directly back to the original "Tiger Balm" mode, how to do? "

full stack mode at this time was out. Different from the full stack and earliest universal mode is that each area through the service way to hide a lot of complexity and detail, full stack engineers mainly focus on business logic and business structure, and in order to achieve the business architecture, in the service of the boundary of the technology and solutions must be mastered before and after the end of. So you can compare the cost of small, two individuals were two pieces of complex business carried down. Style= margin-top: "15px margin-bottom:; 15px line-height:; 1.75em

for the issue of whether to encourage the whole stack, in fact, as long as it is conducive to improving the overall productivity of the way is certainly encouraged. Can the whole stack to improve production efficiency? This and business characteristics, the level of service before and after the end, as well as the team's personnel structure are related. In addition, also need to consider individual will. Style=

currently Ali full stack BU promote many different people, the stage, the progress is different, as the final outcome, let us wait and see. Style= margin-top: "15px margin-bottom:; 15px

> > > > in front of the field, how to base the present and face the future?

mention an earlier example, in the embedded browser, WebKit has not fire up. At that time, we maintained an in-house self research of the browser engine, when the JS engine and layout have all kinds of bug, but also very difficult to solve from the design. By the end of 2009, Android 1.5 on WebKit, we realized that we should give up the hand on this core Web, and then switch to WebKit. This is a big turning point, of course, the middleware to fully turn Andorid, but also an irreversible trend. And this matter, it shows the vision and grasp of the future direction is very important.

for the future, reflected in the occupation development, from the Internet to the broadcasting industry, and a large number of iOS/Android turn around the front to front, there is no what is right or wrong, but also back to determine trends, to believe that the future of the a. Style=

but the biggest reason is not in this, but in doing so "lost to the future expansion of compatibility". How do you understand it? I am here to take a concrete example we may understand: the Array.forEach method as an example, in the early years, Array object below and without this method, then the Prototype Library under the guidance of popular extension for the native object to facilitate " add some nice features, so many people all the way to add their own prototype add some methods to the Array, where there are a lot of people just choose to add traversal method forEach this method, such as Array.prototype.forEach=fuction () {...}. Style= margin-top: "15px margin-bottom:; 15px line-height:; 1.75em

this looks like a pretty good, but where is the problem? We think together: style= margin-top: "15px

to tell the truth, this design is very difficult to predict, such as the jQuery $.each method, the three parameter is the sequence of index, value, array, and later in the specification of forEach three parameter sequence is value, index, array. So imagine, if you were using the above parameters in order to extend Array.forEach, then the standard came out, how are you going to modify excuse me, to be able to make the station all rely on this method and to code and new standard method based on the code to play happily? Style= margin-top: "15px margin-bottom:; 15px line-height:; 1.75em

for the future, but also need to be based on the moment.

I have some structure management, technology management examples, but because of the need to explain too much, is not convenient, I think we can give HTML5 and XHTML2 standard for example. Style= margin-top: "15px

HTML5 able to beat XHTML2 to become a fact of the standard? Some people think that browser developers are more in fact the right to say something, so it won. But I have to say that this is more of the HTML5 follow the idea of success. We look at a few ideas behind it: "

to avoid unnecessary complexity: the key is to avoid unnecessary complexity, but also will not preclude the use of "

forward compatibility stable degradation: the old writing even if the design defects, will have to ensure that the operation was not damaged, but the development of state we can use tools to guide people to avoid the defective wording; some new features, give users a better experience in support, without support, but also to ensure the basic experience of

practical, down to earth: to draw and improve the solution of folk Case, not obsessed with the pursuit of perfect theory.

end user priority: once the conflict, end user priority, followed by the author, the second is to achieve the second, standard setters, and finally theoretically perfect.

the idea to ensure a standard to promote the process, can affect the subversive to existing ecology, to as many people as possible to support, through gradual way, by point and the way to landing.

maybe everyone has seen, VR and AR recently very fire. In view of the future, I believe that the change will happen due to the development of VR and AR, a large part of the front end of the skill tree, may be completely changed, the corresponding standard will take a great step forward, even the front boundary may also change a lot. At that time, said the front end engineer for the visual and interactive engineers, perhaps more appropriate.

but again, I think I'm quite conservative," visual and interactive engineer "this type of work appears not too near, some VR and AR products have recently seen, I think the maturity is not enough. The application of native API development are stretched based on not to mention on the basis of ecological and the birth of the corresponding standards, unified platform and the formation of UI and cross browser like such. Front end engineers to become the VR era of visual and interactive engineer, I'm afraid I have to wait for a while.

> important;

> important;

more exciting, please visit the official website of GIT

" read the original , more GIT training camp Hangzhou Railway Station information

The lastest articles of InfoQ

The practice of building fault tolerance of QQ membership level Web system

The architecture and technology analysis of the database schema of Ali cloud,...

How to grow to top coder? Nine kinds of programming languages

Talk about how to start-up companies go dada CTO server optimization of high...

Like CEO think about the same interview with the founder of the magnetic...

The old driver Wu Xuefeng take you to learn Scala programming skills, StuQ...

Promotion, Fu Yuanhui, Papi sauce... Technical secrets behind the video...

Day trillion level request! Design and construction of Twitter machine...

How to become the 1 Top 50 of the class a programmers talent? | Ka said live...