Developing and Deploying Frontend Code in Taobao: Eight-year Long Case Study Analysis

The Stone Age

Before 2013, the frontend development mode was not very different from the backend mode. In most cases, the SCM code was managed based on SVN. After daily development, the code was uploaded to the SVN server using tools such as the command line or TortoiseGit to complete the development process of the day. During deployment, the test code was uploaded to the test server manually or through FTP. After the test finished and the code version and content were manually verified, the code was uploaded to the production environment to complete the deployment process.

The Silver Age

Node.js, which had been developed for more than five years, became mature around 2014. The team developed a local CLI terminal tool called DEF based on Node.js. The tool featured a management mechanism for installing and calling Node modules. By encapsulating the development modules as plug-ins in the DEF system, tool developers call plug-in modules in different combinations to compile, debug, and deploy frontend projects.

The Golden Age

After the team completed the infrastructure construction of engineering tools and web service frameworks based on Node.js, more and more online and offline engineering systems developed in the following years. The services and tools designed and built during that phase have formed the infrastructure for the current frontend development and deployment processes.

Development Suite

With the development of local DEF tools, more and more tool plug-ins have emerged. Users find tools for any local development functionalities in the plug-in ecosystem. However, in actual project development, users must know what plug-ins to use, their usage, and the best combination of plug-ins. As the number of projects increases, users will find it more difficult to memorize tool combinations and need to be careful when they switch plug-in combinations between projects.

Deployment Platform

Cloud Building

Menshen

Capability Opening

As frontend engineering within the system develops, more and more development solutions designed for different business scenarios emerge. The deployment platform, Cloud Building, and Menshen have become the de facto standards and infrastructure for the group’s frontend development scenarios. In this context, underlying capabilities were further opened, and frontend development processes specific to the upper-layer business systems can be built using the matured underlying engineering mid-end capabilities.

Scaffolding Platform

Let’s understand how Pegasus Scaffolding Service used by the Alibaba economy was designed.

The Future Age

As the engineering system matures over time, in recent years, we have been thinking about the possibility of a groundbreaking and future-oriented solution in order for more efficient development. With many internal products constantly improving and iterating, new directions and patterns emerge.

D2C

The imgcook project originated from visual building and obtains its current form after continuous improvements and changes. From an external perspective, the project went through several phases:

  • The Second Phase: An image scanning engine was built for pixel scanning, and visual design tools such as Sketch were integrated to convert design drafts. In this phase, frontend developers uploaded visual drafts to the platform for code conversion.
  • The Third Phase (The Current Phase): Platforms are improving their image-to-code conversion capability through AI technologies like deep learning. The basic development process is also being streamlined on the platform side. The internal development mode is being migrated to the console for designing and coding, providing comprehensive development and deployment experience.

IDE

Since last year, we have been committing to a new direction of IDE, aiming to create a new and more efficient development mode based on the platform capabilities of IDE.

External Trends

Inside the System

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