2023 年大淘宝 Web 端技术概览

联合编辑：舒文、阿大、韦青、隐风、九十、卓凌、步天、永霸、海文、甄子、妙净、藤飞、林晚、繁易

背景

2022 年，大淘宝前端团队进行了调整：重新组织生产关系，按业务线拆分整合进对应的业务技术团队，同时保留了大前端虚线组织，确保研发基建的一致性、技术的持续投入以及推进人员的成长。

整个变化涉及超过三百人的前端团队，经过了半年多的运转，整个团队在技术上也进行了对应的聚焦和收敛。

新的组织协作形态下，大淘宝 Web 领域的工程师们正在做哪些技术工作、有什么技术产品，特在 2023 年开年之际向行业前端同学进行分享。

淘宝 Web 技术地图

我们按工程、研发、应用三个领域进行分层梳理了淘宝的技术地图（注：为降低理解成本，特进行了简化）：

应用：基于工程和研发，面向不同场域、不同用户提供相应的应用，包括面向 C 端消费者的前台应用，面向 B 端商家、达人、运营的中后台应用。

FY23 大淘宝 Web 技术大图技术产品介绍

对技术地图陈列的主要技术产品，我们尽量用最朴素、简练的方式介绍其定位和能力。

一、前端工程 - O2

O2 是阿里巴巴集团内部的前端工程解决方案品牌，致力于打造支撑 Web 开发者软件交付全周期平台，涵盖了需求管理、开发工具（本地&在线）、CI/CD 平台、在线构建和扫描检测能力与标准化前端动静态资源交付部署服务等。当前交付给 Web 开发者的核心功能有两大子品牌 O2 Space 和 O2 Code。

1、研发平台 - O2 Space

O2 Space 是一个一站式 Web 研发交付平台，能力包括应用管理、变更及迭代发布操作、代码构建与静态扫描等。

拓展阅读

2、研发工具 - O2 Code

O2 Code 是基于开源框架：OpenSumi 深度定制的 IDE，涵盖本地和 Web 版本，与阿里巴巴集团内部大量前端基础设施高度集成，致力于成为最懂 Web 研发的开发工具。

拓展阅读

二、研发质量1、JSTracker

JSTracker 是端到端的前端监控与数据分析平台，依托线上大数据分析与挖掘，重点建设前端安全生产、体验度量与业务分析等方向。具体包括以下几方面：

JSTracker 架构图

拓展阅读

2、磨刀石

磨刀石是基于阿里巴巴手机中台开发的一个面向开发者的在线云手机开发调试平台，它是一个在线真机实验室。通过磨刀石，开发者不需要拥有真机设备，就能在不同品牌、不同系统及版本的手机上进行调试、测试、跑自动化任务等。

磨刀石架构图

磨刀石产品图三、运行容器

在淘宝，主要存在三种运行容器：基于 Web 的 PHA 容器、面向跨端研发的 Weex 容器&引擎、基于云原生的 JavaScript 容器 Noslate。

1、Web 容器 - PHA

PHA 全称是 _Progressive Hybrid App _，是用于提升 Hybrid 体验的框架，在遵循 Web 标准的同时，PHA 提供了渐进式增强的策略、性能极佳的富交互组件来创建 Hybrid 应用，让这些 Web 应用具有与 Native 相同的用户体验。

借助容器/内核能力打造端上极致的 Web 体验，支持的能力包括但不限于：数据预请求、离线资源缓存功能、WebView 模板化、App Worker、Tab 框架方案、下拉刷新体验、启动屏体验、富交互组件。

2、跨端容器&引擎 - Weex 2.0

Weex 是一个可以使用现代化 Web 技术开发高性能应用的跨端框架。

Weex 2.0 是在 Weex 1.0 基础上做了大幅架构升级的新版本，定位依然是面向 Web 标准和前端生态，通过自绘渲染引擎、高效字节码引擎等核心升级，在标准化程度、性能、开发体验方面相比 1.0 版本都有大幅提升。其设计核心聚焦在以下几点：

Weex 技术大图3、云原生容器 - Noslate

JavaScript 是目前流行度最高、开发者数量最庞大的编程语言。

早年 Node.js 等技术的出现，使得前端能力边界得到扩展，在越来越多的业务场景中扮演部份服务端研发的角色。

但随着云原生/Serverless 等新架构概念的引导，弹性效率成为了全新的架构设计目标。为了能够让 JavaScript 任务拥有更高的弹性效率，进而满足在泛终端、全栈交付等领域的效率期待，我们逐步深入探索的过程中逐渐形成了 Noslate Project （原 Alinode Cloud），旨在提升云原生场景下 JavaScript 的被调度性能，解决诊断性黑盒问题。

Noslate 是最新的面向云原生场景，面向 Serverless 架构下的新产品，目标是通过提供完整的技术产品方案，将 JavaScript 打造成云原生时代最灵活的交付语言。目前 Noslate Node.js 发行版已经在进行针对阿里云 Ampere、阿里云倚天的定制优化，未来计划包括支持龙蜥社区中的其他架构。

2022 年 10 月，我们将 Noslate 项目正式开源[1]。

Noslate 它主要由三个子项目组成，分别体现了我们在提升 Javascript 任务弹性效率过程最关注的核心问题：

Noslate Workers 架构图

拓展阅读

四、开发框架1、前端框架 - ICE

飞冰 (ICE) 是开箱即用的终端应用研发体系，包含应用框架 (ice.js)、包开发 (ICE PKG)、微前端 (ICESTARK)、调试工具 (AppDevTools)、API 体系等。

飞冰 (ICE) 体系

拓展阅读

2、Node.js 框架 - Midway

Midway 是 Node 架构团队基于渐进式理念研发的 Node.js 框架。自 2014 年，Node 架构团队提出了业界流行的前后端分离技术，就不断的在 Node 领域深耕成长。

最新的 Midway 基于 TypeScript 开发，结合了面向对象 OOP + Class + IoC 与函数式 FP + Function + Hooks 两种编程范式，并在此之上支持了 Web / 全栈 / 微服务 / RPC / Socket / Serverless 等多种场景，致力于为用户提供简单、易用、可靠的 Node.js 服务端研发体验。

Midway 整体架构

拓展阅读

五、搭建体系1、天马

天马是大淘宝技术自研的面向 C 端页面搭建和数据投放解决方案，提供从研发、搭建、渲染、数据投放的一体化服务，支持一次搭建、多端（H5/Native/PC/小程序）渲染的能力，服务了阿里巴巴大部分 C 端搭建场景。天马为前端开发者提供了一整套模块研发方案，遵守一致规范的研发产物可以在各类页面研发搭建场景使用。

天马技术大图

拓展阅读

2、斑马

斑马系统是基于天马服务的通用搭建产品，也作为天马的 playground 和搭建范例。它提供了多样化的搭建模式及开放的搭建扩展能力，致力于让搭建更简单。

斑马目前核心提供了画布搭建（无代码不依赖前端角色的自由布局搭建方式）、文档搭建（专注于文本流页面的搭建方式）、模块搭建（以模块为标准进行积木式搭建）、源码搭建（在源码应用的基础上增加运营数据投放能力）。同时斑马也对外开放了搭建流程定制 - 业务可以不接入天马，直接基于斑马的能力，构建自己的业务搭投流程。

斑马页面创建流程六、前台应用

基于 Web 工程和跨端架构团队提供的各种研发能力和解决方案，各业务场域的 Web 团队在各自的场景里也沉淀了一些特定领域的技术产品。前台场景主要有基础产品、用户增长、互动场景、内容消费。

1、基础产品 - 新奥创

新奥创是淘系基础链路的端到端解决方案，解决跨端、动态化、业务定制等电商基础链路场景的常见问题。新奥创体系整体由以下 3 部分组成：

拓展阅读

2、用户增长 - ATC

在用户增长领域，我们往往会在手淘 App 以外投放各种广告内容，或是将站内的一些页面投放到 App 外，吸引目标用户点击，当目标用户点击这些广告或是内容，他们将被引入到 App 内，我们把这个过程称为唤端。

而唤端是一个看似简单、但实则有很多工程技术细节、并可深度运营的业务节点，为此我们着手设计对应的平台，提供给不同业务一站式的支撑各种唤端需求（如策略配置、分析能力等），提升成功率和精细化运营能力。

Starlink JS SDK 是一套前端接入方案，它提供了 H5 页面上的唤端能力，结合服务平台，具备各类扩展能力。

唤端技术迭代

同时，我们也在探索更多的端外用户触点，例如用户手机桌面 widget，用户系统日历等，并通过服务化进行开放。此外，我们也在关注用户进端体验，通过分析并优化链路卡点，目标使体验丝般顺滑。

3、互动场景 - EVA

在人口红利开始萎缩，各个 App 都开始以娱乐化互动作为重要手段来争取用户的在线时长。因此在诸如互动业务领域内，我们就需要打造核心轻量化、研发速度快、用户体验好的互动技术，它是 Web 技术的一块特定领域，融合了图形、渲染、动画以及前端工程和软件工程等知识。

大淘宝互动前端团队打造了完全自研的互动研发体系 EVA，包括：

同时 EVA 体系的建设也和阿里互动方向紧密结合在一起，打造阿里最优秀的互动解决方案，并最终实现我们的愿景：人人可开发、处处有互动。

互动案例

拓展阅读

4、内容消费

随着直播、短视频产品持续升温，内容化也成了大淘宝的核心战略之一。大淘宝在内容消费领域打造了淘宝直播、逛逛、点淘等核心内容场，我们的工程师面向 C 端消费重点打造了播放器 VideoX 和开放技术 ALive。

4.1、播放器 - VideoX

VideoX 是内容前端团队基于电商业务背景打造的面向大终端场景的前端播放器，使用 W3C 规范的 API 在各渲染容器（WebView、PHA、Weex、MiniApp）上播放主流的视频格式（H.264、H.265）和媒体协议（FLV、HLS）。

VideoX 应用案例

整个产品能力包括播放器规范、播放器内核、播放器组件、播放器配套设施：

VideoX 产品全貌

拓展阅读

4.2、开放技术 - ALive

ALive 提供了直播间、短视频等全屏页内的互动营销解决方案，大家在淘宝直播间里看到的各类互动玩法都是由 ALive 承载：

ALive 应用案例

ALive 构建了一个灵活、高效的直播容器，解决性能问题；提供一套直播间组件开发的工程链路，解决效能问题：

ALive 整体架构

拓展阅读

七、中后台应用

各业务域除了前台场景的应用，还有面向 B 端的中后台应用技术，受众主要有商家、达人、运营三类人群。

1、商家1.1、千牛

千牛作为一站式商家工作台，满足商家全场景经营诉求，技术侧建设面向商家视⻆的一站式工作台，统一构建商家场景化经营动线，分阶段把各个基础链路产品进行业务重构接入新千牛工作台。

给前端们带来的技术挑战是如何建设 B/C 一体的开放技术体系，满足手淘开放的业务诉求；优化商家 PC /无线应用技术体系，实现快速且高质量迭代能力。核心包括以下两件事情：

1.2、淘宝店铺

店铺作为一个超级流量产品，是消费购物和内容分发核心交易链路重要的一环。

店铺技术团队需要面向千万的卖家和亿级别的消费者打造一套高效、简洁的框架，构建分层的店铺，升级店铺行业垂直化的能力，让消费者在店铺可以逛起来。

同时提供面向 ISV 的开放解决方案，为商家提供更丰富的店铺运营能力。店铺技术团队从三个方向去建设：

消费者体验：业务上有历史包袱重、角色多样、技术架构复杂等难点，同时精细化运营带来业务逻辑日益繁复，对整个技术架构提出了更高的要求。将小程序、weex、web 等多种技术栈统一收敛为 Dx + web 的 web 同构架构，该架构上线后对于消费者体验和研发效率都有大幅度的提升。

商家&小二体验：基于商家经营方式和行业小二的专业能力，实现不同行业属性、不同经营属性的商家细粒度管控能力。基于“配平”平台为商家提供更高效的装修模板，同时行业店铺提供更多的经营工具。

开放能力：以小部件技术体系为基础，提供更高效和更丰富的开发能力，和 ISV 一起为商家提供丰富的运营工具；同时基于阿里巴巴模块规范提供符合端侧规范的二方 LiveCard 开放能力。

店铺域技术体系2、达人2.1、淘宝主播·直播推流

我们基于 Electron 打造了一站式的淘宝主播工作台。使得我们可以围绕主播全链路，提升播前、开播、场控、播后、数据诊断等环节的体验及效率。基于 Electron 和微前端方案，开发调试体验与浏览器端无差，前端客户端各司其职，同时提供了实时智能场控数字化、可视化、智能化的运营能力。

Electron 淘宝主播工作台

基于 Electron 跨端的特性，双端迭代变得可行并高效。

Electron 淘宝主播工作台技术架构2.2、亲拍·视频剪辑

同样基于 Electron，我们打造了视频模板生产和视频剪辑工具：

Electron 视频剪辑 - MAI 剪辑版

基于 WebRTC 还构建了 Web 云剪辑产品，实时的云端媒体处理，前后端完全解耦，提供轻量易集成的 Web 在线视频生产服务。下图展示了 Web 云剪辑在淘宝直播业务中落地的口播剪辑器，主播可以从直播回放中截取片段并通过 ASR 自动生成字幕，快速完成直播精简短视频，供二次传播：

Web 云剪辑-亲拍口播剪辑器

无论是 Electron 剪辑还是 Web 云剪辑，它们共用了一套剪辑 UI 库实现，这得益于我们 GUI + 剪辑内核解耦的架构设计：

视频剪辑技术生态3、运营3.1、运营工作台

电商发展 20 余年，形成了相当复杂运营体系，目标定位基于人、货、场、商全局构建技术及体验一致，标准化、数据化、高效易用运营操作系统的运营工作台应运而生。

运营工作台提供产研及权限、工具等能力的基础平台，基于人货场商构建的运营操作单元(PU)能力，通过 PU 基于运营动线构建的标准化操作流程(SOP)及最终针对各个业务域交付的站点解决方案，最终以运营工作台统一入口的站点以一致的体验提供给运营同学使用：

在运营工作台业务体系能力的建设的基础上，我们通过对业务不同层次的抽象，前端侧核心打造了面向中后台应用的通用低代码搭建 Iceluna 以及与业务场景更深结合的无代码研发解决方案 ORCA，大幅的提高了前端的标准化交付能力。同时通过体验度量中心的建设，将运营小二的操作流畅度和系统的稳定性整体监控起来，形成体验的常态化治理能力。

运营工作台前端架构

拓展阅读

3.2、营销场制作平台 - 方舟

方舟是面向营销活动及日常态营销业务的场解决方案，基于搭建、智能化技术为淘系营销业务提供场制作及场管理能力。希望能通过算法和数据赋能的场制作方案、以及面向营销业务的产品化协同机制帮助营销业务从人工运营向数据化运营转变。

我们在手淘里看到的所有会场均是由运营在方舟上搭建产出的：

2022 天猫双 11 会场

方舟的产品技术分层架构写在后面

同样是在 2022 年，阿里巴巴集团启动了终端人才升级项目 - 将前端开发、移动 App 研发等端技术融合成终端技术，对应的技术人才也统一到终端域，为工程师个体拉宽了技术通道，也为未来提供了更多的可能性。

而大淘宝，将前端大团队进行了全新设计，使 Web 技术在业务领域上深耕锤炼，在基础设施上治理收敛面向未来演进。

在互联网行业跑入进入寒冬的今天，任何企业、任何技术团队，只有持续不断地保持面向未来变化的敏感，才能获得在专业领域上的技术红利。

参考资料

[1]

Noslate 开源: