Frontend Production Methods in the Past 10 Years and the Next 10 Years

Origin

First, I want to talk about my connection with the frontend. Just like me, many people may have entered the frontend industry before understanding exactly what it was.

Getting Started

  • In college, I was able to use a VPN to access many foreign education websites. I found that foreign education websites were beautiful and elegant, with sufficient empty space. On Chinese education websites, especially the official education websites, webpages had poor UI designs and were basically a pile of text, frames, and flashing GIFs (such as the word “New”). Qzone, which allowed users to customize their backgrounds, was popular at that time. However, it was not very elegant. Therefore, I wanted to design webpages that were high-end, elegant, and attractive.
  • In college, many of my schoolmates laughed at me for learning webpage design myself, but I stuck to it. After I completed my classes and homework, I usually spent my time learning from Photoshop video tutorials and design materials on my own and through elective courses and labs. I taught myself Photoshop and the RGB color model and applied them to campus poster design and photo beautification. I developed my ability to retouch photos at that time.
  • Later, I participated in an on-campus lab project for making a take-out website with a group of people. On this project, I was responsible for webpage development. My partners didn’t think I could develop webpages because I was a beginner. During the project, I taught myself about the World Wide Web Consortium (W3C) technologies online. Even though the jQuery framework was available, I manually made a cascading regional menu selector with HTML4, CSS, and JavaScript and designed the UIs myself. This gave me a lot of confidence. Then, I worked on a string of projects and entered the webpage development industry. This experience bound me forever with the frontend industry.

Full Engagement

I first heard the word “frontend” from a Taobao interviewer. Although I didn’t know what the frontend was, I accepted a job offer to become a Taobao frontend development engineer without hesitation because the interviewer told me that I could work together with engineers and become an engineer in the future if I wanted to. Since then, I have been engaged in the frontend industry.

A Review of the Ten Golden Years of Frontend Development (Low Field Requirements)

When you leave school and start to work, time passes more than twice as fast, and you will be busy with work all the time. At first, I did not understand this, but I gradually came to understand that it was due to the rapid speed of Internet development. From 2G 6G, we are the promoters of Internet development. Therefore, it is normal that time seems to pass quickly for us. People in this community will all understand what I am saying. If you have reviewed frontend development over the past ten years, you will understand this as well.

Phase 1: Primitive Development

In 2010, Internet Explorer 6 was popular, and jQuery was dominant in the frontend industry. Even though YUI was also good, most frontend developers used jQuery. A powerful tool called Firebug brought immense benefits to the frontend. In my opinion, frontend development at this time was primitive. Even though visualized webpage editors, such as Dreamweaver, were available, a large amount of useless code was generated, data interworking was complex, and maintenance costs were high. Under the network conditions of the time, a lot of people used Dreamweaver, but I did not.

Phase 2: Modular Development and Framework Upgrades

In 2011, I came to Alibaba as an intern. I found that Tmall (known as Taobao Mall at the time) webpages were high-end and elegant and I was excited to work with the designers (known as UEDs at the time). The frontend team was not large, about 15 to 20 people, including outsourced personnel. YUI was popular in the company and Kissy started to take off. During the six-month internship, I always worked overtime and spent most of my weekends at the company to study the well-organized code written by my excellent predecessors. At the same time, the company had a powerful product called TMS, which allowed developers to use modules and templates to develop a webpage in several minutes. We used this product to build the activity pages for the Double 11 Global Shopping Festival. Modular webpage construction to allow mass production was a mainstream idea in the industry at that time and has continued up until today. If Alibaba had a product history museum, TMS would occupy a prominent place in it.

Phase 3: Browser Support and Improved User Experience

Phase 4: Frontend and Backend Separation and Engineering Optimization

This idea was first proposed by a Senior Expert on the Alibaba Frontend Team. It aimed to solve the restrictions on frontend and backend R&D efficiency due to the over-coupling between the frontend and backend in web containers. Coupling between the frontend and backend was changed to data coupling, with data-oriented programming and full web control by the frontend. This greatly improved the frontend and backend R&D efficiency.

Phase 5: Terminal Fragmentation and Technology Development

In 2013, mobile terminals started to develop and Alibaba proposed the All in Mobile initiative. Due to the slow development of browsers on mobile terminals, the web experience on mobile terminals could not keep up with the user experiences provided by apps. Technical products accumulated over many years in the PC era could not cope with the weak network environments of mobile terminals. Following the technical strategy of Mobile First, many infrastructures needed to be redesigned for mobile terminals.

Phase 6: Data-Driven Approaches and Framework Competition

Phase 7: Field Segmentation and Visualized Building

After the end of framework competition, the frontend business fields were segmented, which intensified the upper-layer and in-depth construction in different fields. In addition to the Node.js field mentioned above, several other verticals emerged:

The Outlook of Frontend Development Over the Next Ten Years (High Field Requirements)

Why does the frontend need to focus on production efficiency in addition to solving business issues?

Frontend Encounters Bottlenecks

Even though we have sophisticated engineering capabilities, our production efficiency is still low.

How Can the Frontend Make Breakthroughs?

To better understand this issue, let’s look at it from another perspective. As we all know, the market has two faces and an elimination mechanism. All industries must change over time. When an advanced technology emerges, outdated technologies are eliminated. In this process, the only independent variable is time.

New Ways of Thinking

How can the frontend take advantage of AI capabilities?

Review of Requirements

Now that we appreciate these two different ways of thinking, we can view the frontend production efficiency problem from a new perspective.

Intelligent Frontend Over the Next Ten Years

Summary

Even though the frontend industry faces many crises, its future is bright. We should make preparations in advance to take advantage of this. Currently, intelligent frontend is a new path.

Team Products

imgcook — One-click intelligent code generation from design drafts

Original Source:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store