618 大促背后的淘系前端技术体系

前言

业务背景

• 超长的售卖周期：5.25预售、5.29开门红、6.4多波段品类日、6.16狂欢日

• 消费券发放：平台、各地政府和商家一共发放了超100亿元的消费券和补贴

• 直播带货：通过直播带货让用户更好地感知商品，提升流量变现效率，形成电商导购的新模式

• 互动任务体系：618理想生活列车，做任务，赚喵币，瓜分10亿平台和商家福利

• ......

淘系前端技术体系

▐  工程体系

• 前端研发规范：统一的编码规范、组件规范、模块规范等，确保跨业务，跨团队之间的研发质量和协同效率

• 发布工具：云端构建的前端发布工具集。通过配套的规范、流程定义、权限管理以及数据日志提高前端开发效率，保证团队开发过程的一致性和可复制性，提升代码质量和安全
  

• 调试工具：支持source map、断点调试、本地代理、云真机等能力在内的调试工具集
  

• 本地IDE：集成发布工具、调试工具能力的本地开发环境
  

• WebIDE：基于Web，轻量化的集成开发环境，使用浏览器即可进行前端编码研发
  

▐  基础架构

• 终端架构：基于Rax（已开源，超轻量，高性能，易上手的类React 多端渲染引擎） 的终端架构。Rax DSL 通过构建不同的产物可运行于Web、Weex、小程序等容器，提供丰富的组件生态，做到一码多端，帮助前端高效研发无线页面
  

• 中后台架构：基于ICE（飞冰，已开源）的中后台前端研发架构。支持微前端、丰富的中后台组件、领域模板，帮助前端快速构建中后台应用
  

• 互动架构：基于阿里内部高效、高性能、可扩展的互动引擎EVA（尚未开源）的互动架构。提供丰富的互动素材、组件生态，帮助前端高效研发互动玩法
  

• 直播架构：基于阿里内部自研播放器、流媒体服务的直播架构。提供多端一致的播放器，低延时通道，可靠的双向通信机制，帮助前端高效研发丰富的短视频/直播玩法
  

▐ 技术平台

• 搭投平台：基于丰富的模块体系和搭投服务，以No Code 方式让业务能够搭建成千上万的页面，并提供可运营的数据投放管理能力。

• 中后台研发平台：基于ICE架构，提供Pro Code、Low Code、No Code 三种方式让前端、开发高效研发中后台页面和应用
  

• 互动研发平台：基于EVA互动架构，提供通过流程编排生成互动玩法的能力，并沉淀玩法库提供给业务直接使用
  

• 直播开放平台：基于ALive直播架构，提供直播、互动、营销一体化解决方案，赋能二方、三方直播能力
  

▐  线上服务

• 网关接入：前端页面统一的网关接入层，提供域名管理、回源服务、限流、灰度等能力

• 渲染引擎：基于 Node.js 编写的服务端渲染模版的容器，为阿里提供全平台的统一前端模版渲染引擎
  

▐  端

• 客户端：
  

  1、PHA：Progressive Hybrid App，渐进式混合应用， 提供客户端内的辅助能力，提升 webview 渲染性能与体验

  2、Weex：一个可以使用现代化的 Web 技术开发动态高性能原生应用的框架

• 浏览器：
  

  1、PWA：Progressive Web App，使用多种技术来增强Web App的能力，如通知推送，离线缓存等  

618技术亮点

基于以上淘宝前端技术体系和这次618的业务诉求，淘系前端进一步做了许多技术和方案的亮点创新，例如PHA、同层渲染、前端智能化探索、极致性能体验、营销互动提效、小程序、资损防控等，相关技术方案将以系列文章的方式做一些总结和沉淀，让我们先简单一睹为快

▐  618会场性能保障全揭秘

▐  亿级用户高稳定性视频播放器养成计划

▐  资损防控-代码扫描技术揭秘

▐  P2C - 需求智能出码的思考

▐  旗舰店小程序升级，承上启下的一步

▐  频道业务黑科技-行业魔方

结语

• https://rax.js.org/

• https://ice.work/

• https://weex.apache.org/zh/?spm=a1z3tx.-.0.0.26f7c8ee5B9gQq