A foot into the pit

I got into the front end, and it was back in 2010, and the three musketeers of the web at that time were Adobe Dreamweaver, Adobe Flash, and Adobe Fireworks.

These three software are very popular, the first can be dragged through the visual editor, fill and match can get a web page, although the concept of a lot of to get started, but also quite difficult to use, but at least that time do web page of the most awesome software;

The second is to do Flash, with an ActionScript language, at that time the Internet download a lot of big cow do very geek Flash website source code, but the code is very difficult to read;

The third one is for posters (because the posters are large, long, and memory intensive to cut, it’s fast) and GIFs, but I use them less and use Photoshop CS4 most of the time.

Although these three apps were the most popular, what really got me into the front end (there was no “front end” at that time, and some were “cutting pictures”) was that I wanted to be a web designer.

At the time, there were two reasons why I wanted to be a web designer:

1. Software engineering Java, C++, C is really quite boring, write a program, but also have to compile, deploy, wait for two or three minutes, especially speechless; And had contact with Web page development time (when) or a foreign lecturers, found in the Web page is amazing, in a Text in a Text editor to knock on a few lines of code to make it another extension, double-click on the page is displayed, the visual impact of the wysiwyg beauty, then let me give this direction, the move is buried under the curse 😄.

2. Can over the wall in infomation is glad to see a lot of foreign website, at that time the biggest feeling is beautiful, the atmosphere, white space is enough, and the web page where is domestic, UI design it’s don’t don’t of, no aesthetic feeling, was full of a bunch of text and box, and a pile of flash to flash to GIF (such as the “New”), Especially education net’s official website, that ugly simply don’t don’t. In addition, at that time, the QQ space is very hot, you can DIY your own space, but still feel not atmosphere, so at that time, he thought he would make a more high-end atmosphere grade website 😄.

During the university, although the idea of learning to design and make web pages was laughed at by the classmates around that this should be something that junior college students do, but it is true that I still stick to it. In addition to reading professional courses and completing course practice, I spend my time in dormitory, library, elective courses and laboratory with a pile of photostudio P video books and a thick copy of design materials. At that time, I taught myself Photoshop and also learned the principle of three primary colors in design, and applied it to the daily campus poster design, photo beautify and other work in the class. Now I have accumulated the ability to take photos with SLR at that time.

Then I found a lab project on campus, and worked with a group of people to build a take-out website, and served as the development part of the website. To be honest, at that time, they didn’t trust me to handle web development because I was still a beginner. So AT that time, I chewed W3C and learned while working on the Internet. Although there was a good jQuery framework at that time, I still manually used HTML4, CSS and Javascript to pull out the cascading region menu selector, and the UI was also designed by myself, which made me feel confident. So one project at a time, there was an overwhelming trend toward web development, or cutting graphics. This is probably my indissoluble relationship with the front end buried, it is a foot into the front end of this industry.

Review: A golden decade of Front-end development (Shallow Water)

When you really came out from the campus, immersed in work, you will find time to have a speed is much faster than you in school for more than one times, every time feel time not enough use, business is completely done, feel the time is for work, what is the cause I used to be in this reflection, also want to understand gradually, this kind of fast itself and the development of the Internet supplement each other, From 2G to 3G, to 4G, and then 5G, 6G… Thanks to the development of the Internet tide and the existence of those of us who push the tide, it is normal for our time to be faster. I know a lot of people don’t understand, but everyone in this community understands or has the same voice. Take the last 10 years of development as an example, and you’ll get a sense of it.

Here’s a detailed overview of the golden decade of front-end development for interested readers to peruse and uninterested readers to bypass with this overview: Front in the first, just in order to complete the development of a web page, and then, to be completed at the same time five, 10 or more page development, a challenge to the front, so the front-end work content from pure web development, split into modular development, split to before and after the separation, transition to visualize structures, systems, etc., The scope of functions has gradually shifted from web development to back-end development and full-stack development, and the scope of fields has also been subdivided from web development to PC development, mobile development, game/interactive development, Nodejs development, architecture engineering development, etc. The engineering content has also developed from a phase where a piece of jQuery code can be solved to a high degree of systematic engineering complexity such as construction, packaging, integration, testing, gray scale and so on. But productivity is also human flesh – based, the Internet front-end industry or labor-intensive operations.

Phase 2: Modular development & Framework upgrade

In 2011, after working as an intern at Alibaba, I was very excited to find that the pages of Tmall (then called Taobao Mall) were really high-end and magnificent, and I was really excited to work with designers (then called UED). When the front end of the small (including outsourcing, about 15 to 20 people), YUI is relatively popular in the company, blossomed KISSY started, see the previous code written order, it was really worship, so that most of the weekend in half a year’s practice life bubble or overtime in the company or yourself to learn predecessors. At the same time, the product has a very cow force in the company called TMS, through modular and templated thoughts, every minute can take out a page, simply don’t don’t of, that the cow force at the time of taobao mall double 11 (though a lot of people, then the double 11 when singles day) activities page is built from the big is completed. The idea of using modular building to solve the problem of page mass production, this idea is also leading the industry at that time, and this idea has continued to today. So if Alibaba had a product history museum, TMS would definitely be in it.

The historical period between 2011 and 2014 was dominated by the idea of modularity. In order to design Assets resource loader at that time, a modular protocol specification was developed. At that time, the most popular modular protocols were AMD (RequireJS), CMD (Seajs), and KMD (Kissy). In Taobao, Tmall, Kissy application is very popular, YUI withdrew from the stage of history, so KMD dominated the world; In Alipay and the external community, Seajs application is very hot, so CMD dominated the world, yu Bo big reputation and prestige in the front circle is particularly high; AMD is more popular in foreign countries, but gradually by the emergence of the CommonJS specification weakened momentum.

The front end at that time relied on the idea of modularity and various frameworks (YUI, jQuery, Kissy…) To support the production of web pages, front-end Assets are no longer bundled with the server code, but doc pages are still in the server web container, and the production of front and back ends needs to be coordinated and the order of release needs to be paid attention to. Although TMS is easy to use, it still has a strong advantage in marketing activities (such as 618 and Double 11). The data is still mostly static, and it cannot play a role in rapid production in the complex main links of product state such as channel, search and transaction. But fortunately, the marketing campaign was not so intense at that time, and there were only a few campaigns in a year, so the production pressure on the front end was not so obvious. But the pain is on the framework upgrade, the annual Kissy upgrade, let all the front end of the business painful.

Stage 4: Front and rear end separation & engineering perfection

At that time, this idea was proposed by a high P at the front end of Ali. The birth purpose of this idea was to solve the excessive coupling between the front and back ends on the Web container, resulting in mutual constraints on the research and development efficiency of the front and back ends. Therefore, this coupling was transformed into the coupling of data, data-oriented programming, and the Web part was completely handed over to the front end. This will greatly improve the efficiency of research and development at the front and back ends.

This idea was put forward at the initial establishment stage of NodeJS and NPM ecology. Ali made an attempt to separate the front and back ends with NodeJS. Amid many doubts on the back end, it killed PHP and abandoned Java Web container, and took the initiative of the front end on the Web container. In the front-end NodeJS ecology, there are also open source Web application frameworks such as Express, KOA, Egg and Begg, and engineering scaffolding kits (such as WebPack) completed with NodeJS have also been developed. At the same time, a new type of NodeJS development engineer has been derived. Basically all of Ali’s Java middleware ecology, there is a counterpart in NodeJS ecology.

The front end is separated from the front end, allowing the front end to dominate the Web container. The direct benefit is that the front end can carry out integrated production engineering design from both Client and Server ends, enabling the front end to maximize page loading performance. Of course, the expansion of front-end functions also brings additional work burden to the front-end, so if the department is not fully prepared with manpower, it will not try to be responsible for the WebServer side, after all, operation and maintenance costs. Fortunately, with the development of Docker containerization technology and the development of cloud infrastructure operation and maintenance capability, from IaaS to PaaS and then to SaaS, the operation and maintenance cost of the service side is greatly reduced, so the cost of front-end operation and maintenance of WebServer is greatly reduced.

Later: Now in the FaaS phase, it’s basically Serverless, transparent to the source and more invisible to the upper layer.

Of course, the separation of the front and back ends does not have too much improvement on the front-end research and development efficiency, but in the front-end engineering system is more perfect and sound. The front end used to be called a page, but at this stage the front end is no longer a page because the engineering architecture (IDE, R&D, build, packaging, integration, testing, grayscale, production services, etc.) is not much worse than Java.

Phase 6: Data-driven vs. framework

Fortunately, there are MVVM frameworks like Angular, React, Vue, RN (React Native), so that the front-end accepts the data-driven idea of the christen, but also through RN to complete the mobile experience upgrade, including later Weex, Flutter.

At this stage, the front-end starts to have the underlying architecture group of the terminal, and starts to conceive the loading performance and user experience performance of the front-end page on the mobile terminal. The front-end moves back and forth between Web and Weex containers on mobile development, adding to the burden of technology choice and not being able to reuse each other.

So in order to solve the problem of multiplex reuse, Weex uses the ecological Vue framework to get through both ends of WebView and Weex, dreaming of a set of code to run all over the world. But in reality, the two terminal container capabilities are not aligned, mutual constraints, a set of code to write carefully. At this time, the front-end is suffering from terminal technology.

But the good news is that the Web is growing stronger on mobile, and with some client-side capabilities (hybird, Cache, Prefetch, etc.), the Web page experience is strong enough to compete with apps. So after four or five tortured years, the voice of the Web is now dominant on mobile. The corresponding mobile framework has also been determined.

At the same time, in 2016, the concept of small program began to come online, a light App open solution began to set off a wave in China, wechat, Alipay, Baidu and a bunch of big Internet manufacturers (including mobile phone hardware manufacturers such as Xiaomi, Huawei, etc.) under this tide share. So a new DSL for small programs is born in front of the front end, which has to take care of the Web and the small program DSL between vendors, doubling the pain. There is pain, there is pain, such as WePY, MPVUE, Taro and other small program framework mushrooming, one after another (” small program third party framework comparison (WePY/MPVue/Taro) “).

In addition to mobile terminal, in THE PC C terminal and background business, respectively, what kind of technical solutions? Should I use the MVVM framework? React (Preact included), Vue, Angular which framework?

After years of repeated arguments from multiple voices, it was finally decided to adopt React in the middle and background, and the C terminal of PC adopted the same isomorphic scheme as the mobile terminal. Although experienced several years of pain and suffering period, but the framework of the dispute finally calmed down, the front end of the focus began to pay attention to the construction of higher-level components of materials (such as AntD, Fussion, ICE background materials, etc.) and the segmentation of the front end industry.

Stage 7: Domain segmentation & Visual construction

After the above debate and calm, the front end of the industry field began to more segmentation, domain upper level construction and depth of construction is also more in intensive, in addition to the above mentioned NodeJS field direction, there are the following vertical direction.

In the background

It is oriented to enterprise ERP, CRM, OA and other business scenarios, such as supply chain system. In this scenario, with the help of AntD, Fusion, ICE and background materials, a visual middle and background building solution is formed to provide one-stop middle and background production solutions for front-end, development or product roles of the business. Adoption of construction, the purpose is definitely for business production efficiency.

Interactive content

With the derivation and popularization of new technologies such as AR, VR, 3D, online games, short video and live streaming (WebRTC) on the Web, more interactive forms of rich shopping guides emerge in an endless stream. Therefore, this direction is to invest in the construction of rich interactive experience for future users.

…

There are many more verticals that I won’t go into here.

Looking back at the past 10 years, it was the fastest decade for the development of the Internet and terminals, the fastest decade for front-end development, and the fastest decade for front-end programmers to lose their hair and gray hair. Because no technology field, can emerge in an endless stream of new wheels, can be repeatedly overturned and upgraded and overturned, but fortunately, after a hundred schools of thought contend for the front end of the industry in each field of the construction depth is increasingly mature. At the same time, you will find that these complex constructions are also designed to solve business problems and improve your own productivity.

The front end has reached the bottleneck!

As we know, even though the engineering capability has been mature, the problem that still cannot be solved is the problem of “production efficiency”. Just think:

Let’s say it takes a week for a mediocre front end to produce a fully functional page, and two days for a great front end. Even if you hire a good front end, a good front end can only produce 4 pages in a week. If you only produce 10 pages, then you can hire 1 or 2 good front ends in a week. But if you produce 100 or 1000 pages? How much of a front end is appropriate to hire at this point? The tight demand of high-end talents and the control of recruitment cost will lead to the multiplication of business pressure on the front end of the factory.

The solution must be the bell, so the industry began to emerge continuously hardcode to lowcode direction of the improvement of efficiency boom. Apart from the outside world, taking Ali as an example, lowcode platforms for middle and background, C end and data visualization have emerged one after another. Although the complexity of getting started is very high (after all, the complexity of solving problems is there, just like Photoshop), they are also becoming mature.

But is that the rest of the world? In fact, no, because the speed of business iteration is too fast, even if these platforms exist, they still can not solve the urgent business, front-end efficiency is still the bottleneck of the industry.

Take the team I led as an example, the business volume and complexity of each offline line we serve are high (each line receives tens of millions of traffic, so the business complexity is naturally high). In addition to daily product iteration, at least 1 or 2 marketing activities are carried out at the same time every month, even if the above lowcode product is used, But still can not solve the business side frequently appeals to the dilemma of the important person, even the schedule, cut demand this traditional little trick now also has no effect on the business side.

How to do? One man can’t beat four hands, let alone a bunch of hands that can’t be counted.

Change of thinking mode

So how does the front end empower the AI?

This problem is difficult for pure front-end practitioners, difficult for algorithm practitioners, but not difficult for both front-end and algorithm practitioners. To clarify this, let me first explain what the difference is between the two modes of thinking, and help you to change your thinking first, so that you are more comfortable with it.

Let’s take a specific case as an example: When your product manager asks you to make a small game like the one below, the pipe hole is fixed in height and moves to the left at a constant speed. The bird will only go up and down and jump under the influence of gravity. How can you make the bird dodge the obstacle and successfully pass?

The demo address: xviniette. Making. IO/FlappyLearn…

If the front end sees the requirements above, his thinking pattern is usually like this: The bird Object has properties x, Y, width, height and alive. X and y represent its horizontal and vertical displacement. Width and height represent the width and height of the bird itself. The pipeline object has at least five attributes: X, Y, width, height, and speed. X and y represent the horizontal and vertical coordinates of the pipeline, width and height represent the width and height of the pipeline, and speed represents the speed of the pipeline moving to the left. Secondly, according to the moving speed of the pipeline, a radar warning mechanism should be established for the bird to constantly detect whether there is an obstacle in front of it by polling. Once there is an obstacle, it should constantly move up and down in the vertical direction to avoid it. Finally, the way to the end of the analogy.

If the algorithm sees the above requirements, its thinking pattern is usually like this: First, you need to find a model, take the network as an example, to use genetic algorithm to solve the above problems, the specific bird trying to collision is through 50 generations, each generation of failure of birds recorded gene, and then passed on to the next generation, form the genetic memory, so the bird will not have a barrier in the form of failure, and so on. Until there are no failed birds, the successful genes are trained, and a generation of birds can completely pass the barrier.

As you can see, the front end of the solution to the idea of the code is specific to explain how the bird should judge the obstacle; In fact, there is no specific code logic to teach the bird to overcome obstacles in the code that looks at the algorithm to solve the problem. Some of the code logic just extracts some features and feedback and transmits it to the network, while the real obstacle judgment process is done by the model. And this is the key difference between the two ideas, accurate engineers, programmers, and AI algorithm used type of thinking difference, the programmer’s mind has a “can I use code to define the” thinking, and AI algorithm engineer mind with “what kind of data training mode should I use to model their master right and wrong, as soon as possible,” thinking. The former is a subjective perspective to solve the problem by oneself, so the written code is purely translated to the computer how to solve the problem; The latter is an objective perspective in which the machine solves the problem for me, so the code written is purely about how to throw the problem to the computer and tell the input and the result right or wrong. As for the process and rules of how the computer solves the problem, the algorithm engineer does not care about the result.

See here, I think you have a personal sense of the two modes of thinking, if you don’t understand, you can also see the article “Front-end intelligence — the way of thinking change” by Teacher Zhen, which is a more in-depth introduction to this difference in thinking.

10 years of intelligence

• 2 ~ 3 years, the number of intelligent front-end practitioners doubled, AI in the field more or less some front end the application of the product form, the emergence of various front end machine learning framework user products in the design of intelligent experience also have corresponding tilt, community began to emerge in a variety of intelligent front-end engineering framework, training framework and AI platform;

• 3 ~ 5 years, the number of intelligent front-end practitioners continue to grow, the traditional front-end has been eliminated, the front field of intelligence in a specific field of small achievement, can solve some business in a particular field or human production efficiency, intelligent terminal experience will hasten gradually mature, immersive experience for the user to enhance, online experience no screen, no difference approach is the same, Community began to open source some front-end intelligent products;

• In 5 to 10 years, the front-end intelligent industry market has become saturated, and the end-end intelligent experience designers should be more popular in the market (such as immersive man-machine confrontation games, etc.). The nocode problem should be completely solved, but at the same time, it will bring other consumer demands, which may introduce new problems in the field.

About the recruitment

• How to get an Internship Offer from Ali? Ali P8 to teach you how to prepare for interview
• Social recruitment: [social recruitment/school recruitment] [Hangzhou] [Ali tao department of technology – channel and D2C intelligent] front-end recruitment: at this moment, only I belong to!
• Campus recruitment: The 2020 spring internship of Alitao Department is officially launched, welcome to deliver

Community account:

• Zhihu: IMGCook design draft intelligent code generation platform
• Nugget: Design draft intelligently generated code

Also welcome to join our community group, one group is full, please add two groups.