The author | ink ghost

Product | alibaba tao front-end team

2020 618 promotion has passed, as an important promotion activity of tao department every year, what role does the front end of Tao Department play in it, how to ensure the smooth progress of the promotion? What new technologies are being used? Amoy department’s front end team hereby holds an essay on 618 series to introduce the front end figure in 618. The author of this article is Mo Ming from the marketing campaign team. She introduces the front end technology system behind the 618 Promotion.

preface

The 618 e-commerce promotion campaign that lasted nearly a month has finally come to an end. The author is honored to be the front person in charge of ali’s 618 promotion, so I take this opportunity to share with you the front technology system behind the 618 promotion, as the beginning of ali’s TAOBAO series 618 front technology sharing series.

Business background

In the first few months of 2020, the rampant COVID-19 epidemic confined people to their homes, causing a huge impact on China’s offline economy such as service industry and tourism, and greatly promoting the development of e-commerce online shopping, online office, online medical services and other services. For e-commerce platforms, businesses and consumers, 618 this year has become the largest e-commerce consumption node in China after the epidemic, which plays a key role in boosting domestic demand, promoting domestic consumption and driving employment. As a leader in the field of e-commerce, Alibaba has consistently maintained its competitive advantage over its friends, created new digital consumption records, and made some new changes in business play and strategy this year. Such as:

  • Super long sales cycle: 5.25 pre-sale, 5.29 opening, 6.4 multi-band category day, 6.16 Carnival day
  • Voucher distribution: The platform, local governments and businesses have issued more than 10 billion yuan in vouchers and subsidies
  • Live delivery: users can better perceive goods through live delivery, improve the efficiency of flow realization, and form a new mode of e-commerce shopping guide
  • Interactive task system: 618 Ideal Life Train, do tasks, earn meow coins, share 1 billion platform and merchant welfare
  • .

After years of precipitation and development, Tao Department has built a relatively complete technical system to support Alibaba’s e-commerce marketing activities including 618 and Double 11. Next, the author will briefly introduce the Amoy front-end technology system and the scene appeal based on the 618 promotion on this technology system, and the innovation point of technology evolution.

Tao department front-end technology system



Amoy front-end technology system big picture

Engineering system

  • Front-end R&D specifications: unified coding specifications, component specifications, module specifications, etc., to ensure cross-business and cross-team R&D quality and collaborative efficiency
  • Publishing tools: Front-end publishing toolset built in the cloud. Improve front-end development efficiency through supporting specifications, process definition, authority management and data log, ensure consistency and replicability of team development process, and improve code quality and security
  • Debugging tools: support source map, breakpoint debugging, local proxy, cloud real machine and other capabilities of the debugging tool set
  • Local IDE: A local development environment that integrates publishing tools and debugging tool capabilities
  • WebIDE: Web-based, lightweight integrated development environment, using a browser can be front-end coding research and development

The infrastructure

  • Terminal architectureBased on:Rax (open source, ultra-lightweight, high-performance, easy-to-use React multi-terminal rendering engine)Terminal architecture. Rax DSL through the construction of different products can run in the Web, Weex, small programs and other containers, to provide a rich component ecology, to achieve one code multi-terminal, to help the front-end efficient research and development of wireless pages

  • Middle background architectureBased on:ICE (Open source)The middle background front-end research and development architecture. It supports micro front end, rich middle and background components, and domain templates to help the front end quickly build middle and background applications

  • Interactive architecture: Interactive architecture based on Alibaba’s internal efficient, high-performance, scalable interactive engine EVA (not open source yet). Provide rich interactive materials and component ecology to help the front end develop interactive gameplay efficiently
  • Live broadcast architecture: Live broadcast architecture based on ali’s in-house developed players and streaming media services. Provide multi-terminal consistent player, low delay channel, reliable two-way communication mechanism, help the front-end to efficiently develop rich short video/live play

Technology platform

  • Partnership platform: Based on the rich module system and partnership services, No Code enables businesses to build thousands of pages and provide operational data delivery management capabilities
image.png
  • Middle and background RESEARCH and development platform: Based on ICE architecture, it provides Pro Code, Low Code and No Code three ways for front-end and development to efficiently develop middle and background pages and applications
  • Interactive RESEARCH and development platform: based on EVA interactive architecture, it provides the ability to generate interactive gameplay through process orchestration, and deposits the library of playing methods for direct use by businesses
  • Live broadcasting Open platform: Based on the Live broadcasting architecture of ALive, it provides integrated solutions of live broadcasting, interaction and marketing, enabling live broadcasting capabilities of two and three parties

Online services

  • Gateway access: the unified gateway access layer of the front-end page provides domain name management, source return service, traffic limiting, and gray scale
  • Rendering engine: a container of server-side rendering template written based on Node.js, which provides ali with a unified front-end template rendering engine for the whole platform

end

  • The client:
    • PHA: Progressive Hybrid App, a Progressive Hybrid application, provides auxiliary capabilities within the client and improves webView rendering performance and experience
    • Weex: a framework for developing dynamic, high-performance native applications using modern Web technologies

  • The browser:
    • PWA: Progressive Web App, which uses various technologies to enhance the capabilities of Web Apps, such as notification push, offline caching, etc

618 Technical highlights

Based on the above taobao front-end technology system and the 618 business demands, tao is the front-end further made a lot of technologies and solutions, the highlight of innovation such as PHA, namely rendering, intelligent front-end exploration, extreme performance experience, marketing interaction effect, small programs, such as information loss prevention and control, relevant technical solution will do some summary and precipitation in the form of series, Let’s take a quick look.

The Evolutionary Road to Interactive Productivity

This year on 618, we’re bringing you an interactive game called “Lucky Train,” featuring agricultural products and food from across the country to get you a taste of China this summer. From “building buildings” on Singles’ Day in 2019 to “driving trains” on 618 this year, behind the promotion of interactive games are multiple games involving business variability, product stability and r&d efficiency. This article will introduce how tao Interactive front end team deals with the challenges of R&D efficiency and product stability, covering two technical solutions of “interactive intelligent testing” and “popup scale production”.

Full Disclosure of Venue Performance Guarantee

As a front-end engineer, higher performance and smoother experience are our constant pursuit goals. As a big promotion line, the performance of the venue page directly affects the purchase experience of hundreds of millions of consumers. So how do we make our customers feel better, feel better, and feel happier in the thousands of venue pages on 618 this year? This article will provide a brief overview of this year’s 618 event and how we ensured the venue experience through pre-caching, request optimization, and monitoring testing.

Development Plan of Video Player with High Stability for Hundreds of Millions of Users

2020 live with goods is one of the new modes of e-commerce shopping guide. The excellent performance of PHA framework makes a large number of businesses return to the cross-platform and open Web system, but the stability, performance and playback ability support of the player of the native system are difficult to meet the standards for live broadcast/short video. In this context, this article will introduce how we can use Native player developed by Alitao in The Web through the same layer rendering technology to achieve zero failure during the period, no overall degradation and a stable crash rate at the end.

Capital Loss Prevention and Control – Code Scanning Technology Revealed

Nowadays, the prevention and control of capital loss in daily business has become more and more important in the process of production safety. Especially during the promotion activities (such as the 618 promotion), once the occurrence of capital loss failure is more likely to cause significant losses. If only through code review, the efficiency is low and the quality is uneven, which cannot be guaranteed. This article describes how we can detect and fix problems early in the development phase by introducing a code scan that automatically detects and alerts the risk of capital loss in the code every time the code is submitted.

“AutoCode” P2C- Unexpected requirement to generate code directly”

The rapid development of AI technology makes it possible for machines to replace human coding. P2C is a technical solution that directly generates usable front-end code from structured product requirements documents through intelligent algorithms. Realizing P2C will bring huge efficiency breakthrough to code research and development. This article will focus on the goal of automating code generation, sharing our thoughts on this process, and our practice in the 618 session.

Channel Business Black Technology – Industry Rubik’s Cube

In the past year, the business development of Tmall industry has increased the demand for rapid site construction and efficient use. However, the development mode of the front end of the industry is still labor-intensive, which does more harm than good to the long tail business like industry channel. Benefit from the tao is the accumulation of the front-end, began late last year, and UED Tmall industry, product team finished TaoUI component specifications, and to build a web component center to settle the material supporting industry, so, if according to certain specifications, using direct data model of direct drive components, can we don’t need to develop the most universal module? So the rubik’s cube came into being. Mixed Feeds stream is supported in the commodity content of tmall Apparel industry 618 conference. This article will share a more general and lightweight solution to bring a richer experience to the marketing conference, so that users can not only buy cool, but also see cool.

conclusion

As the beginning of alitao 618 front-end technology sharing series, this article mainly introduces the front-end technology system of Alitao as a whole and the technical highlights in the 618 promotion. Please look forward to detailed sharing articles on various topics in the future. Finally, although 618 is over, the global Carnival of Double 11 will be launched soon. High complexity, large-scale marketing activities business scenes continue to promote Amoy department’s front-end technology system toward the ultimate direction of iterative evolution, looking forward to more students to join the Amoy Department’s front-end team, together to create a new history of 618, Double 11, at this moment, only you! Resume: [email protected] **

The Amoy 618 series is expected to be 7, covering interactive, performance, multimedia, PHA, capital loss prevention, party P2C, intelligent UI, shop mini program, industry Rubik’s cube and other contents in Amoy 618.


Welcome to pay attention to the “Amoy department front end team” public account to continue to subscribe.