备案控制台

大淘宝技术-阿里云开发者社区

大淘宝技术

旗下包含淘宝技术、天猫技术、iHome等团队和业务，是一支是具有商业和技术双重基因的螺旋体。大淘宝技术部的愿景是致力于成为全球最懂商业的技术创新团队，打造消费者和商家一体化的新零售智能商业平台，创新商业赛道。依托大淘宝丰富的业务形态和海量的用户数据，我们持续以技术驱动产品和商业创新，不断探索和衍生颠覆型互联网新技术，以更加智能、友好、普惠的科技深度重塑产业和用户体验，打造新商业。

全部

官方博客

活动

技术作品

技术沙龙

1

回答

为什么要做P2C ？

已解决
詹姆斯邦德00 2022-10-25 1095浏览量 回答数 1

在开发链路中耗时较长的两个环节是「沟通成本」和「编码成本」，「沟通」一般是需求明确的过程，一般体现在各种需求评审上。而前端的「开发」成本则主要可看作两个部分：视图代码与逻辑代码两个部分的开发工作。目前我们团队的 D2C 产品（imgcook 设计稿到代码） 已经能够帮我们准确的生成大部分的视觉代码了，甚至还可以分析出部分简单的的业务代码，因此对前端开发来说在开发中的成本主要花在非通用的逻辑表达部分，即粘合剂。

对于这些“粘合剂”逻辑，在产品的prd 中我们可以找到准确答案，但有时产品的prd 是不够结构化的，信息丢失也比较严重，这非常不利于机器学习进行学习和理解。因此我们需要一个平台来规范产品的需求，使产品能够按照要求进行结构化的录入。这就是我们做P2C 的初衷。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

以 行业魔方 为名的通用模块为2020年618大促提供了哪些帮助？

已解决
詹姆斯邦德00 2022-10-25 1283浏览量 回答数 1

这批模块成功帮助我们在短期内支持了7 个淘宝/ 天猫行业的频道业务，以及服饰行业新风尚的营销场景混合Feeds 需求，有效释放了研发压力。在这批模块中，我们首次引入了数据驱动UI 的形式，通过运营在搭建平台配置的数据源DSL 来编排数据获取行为，并进行数据与组件物料的组装。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

自动化统一化生产的前提一定是要有一个标准化的表达做支撑的，这个中间 DSL 该如何设计才能承载住全量

已解决
詹姆斯邦德00 2022-10-25 1319浏览量 回答数 1

  1. 首先我们解决的问题一定是有边界的是处在一个业务领域的，并在这个业务域下进行分析。因此我们分析了一下我们最常见的业务形态- 模块。而据统计“相同业务能力，不同技术实现”的模块在整个天马体系中的占比非常的高，单单拿通用商品坑来看就有上千个，而这些模块大部分都是相同的逻辑实现，也有很多是处于不同时期的技术产品。

  2. 一个模块在前端的开发设计里，大概可以分为4 部分，通用组件，通用Action，视觉代码，驱动逻辑。

  3. 我们可以看到视觉和通用组件以及Action 都是已经有了的，变动周期比较低。而驱动逻辑部分是是业务中的主要实现逻辑，如何让这部分逻辑能让运营进行产出呢？

  4. 首先我们将这部分能力进行一个拆解，我们得出一个初步的结构，就是由 运算符 + 表达式 + 基础action + pipeline 组成的表达结构，这个表达也可以组成一个新的action，再加上trigger，整体就完成一个workflow 的能力了。

image.png

new Expression = Variable + Operator + Expression + Pipeline

new Action = Expression + Action

Workflow = Action + Expression + Trigger

业务模块的四个部分中，驱动逻辑就是我们主要核心产出的内容，根据我们的经验这部分ProCode 大部分都是表达式 Expression 内容。因此我们只要能让运营能够自主的完成 ProCode 部分的编排即可高级定制需求的产出物。

让运营完成所有的ProCode 也显然是不现实的，但是对于IFTTT 这种简单的逻辑表达，只要将这部分内容的表达可以使用更接近自然语言的表达方式，自然会降低整个的理解难度。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

什么是AST？

已解决
詹姆斯邦德00 2022-10-25 1126浏览量 回答数 1

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST）或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

这是一段引自百科上的解释，什么意思呢？让我们一起来看下面这个例子：

image.png

可以看到，非常简单的一句初始化赋值代码 var str = ""hello world"" 被拆解成了多个部分，并用一棵树的形式表示了出来。（如果想查看更多源代码对应的 AST，可以使用神器 astexplorer 在线尝试）

其实，我们每天日常工作都在使用的 js 代码编译工具 — Babel，它也离不开AST。为了将 ES6 甚至更高版本的 js 语法转换成浏览器兼容性更好的 ES5 代码，Babel 每次都需要先将源代码解析成 AST，然后修改 AST 使其符合 ES5 语法，最后再重新生成代码。总结一下就是3 个阶段：parse -> transform -> generate。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

要怎样一步步达成我们的终极目的“ Auto Code”呢？

已解决
詹姆斯邦德00 2022-10-25 1113浏览量 回答数 1

这个过程通俗来讲就是 通用组件 + 配置信息 的模式，配置信息即 ProCode的部分，该部分即为需要 AI 自动产出的内容。因此想要完成自动出码，就需要对ProCode 的部分进行样本制造和监督学习。

我们来总结一下我们的三步走计划：

  1. 需求的结构化收集 （为了降低NLP 的分析难度）。

  2. 创造结构化需求到标准逻辑表达的样本（为机器学习ProCode 部分提供充足样本）。

  3. 通过机器学习对样本进行学习，以达到AutoCode 的目标（长期目标）。

即我们需建立要两个平台，我们称之为P2C 的 2.0 代 和 1.0 代。P2C 1.0 负责打标需求数据，并为 2.0 的智能出码提供庞大准确的数据。而 P2C 2.0 则主要进行需求的结构化收集并与1.0 的样本进行关联学习，训练出码模型，最终达到创作和自动完成需求的目的。

两个平台所代表的关键词分别是：

●P2C1.0：精确收集，精确产出

●P2C2.0：开放收集，创新产出

那么精确收集样本就成为我们 P2C 1.0 的主要工作方向。

打标样本一定要从实践出发，并能在该阶段帮助需求真实的进行产出，即我们提供的打标平台能真实的完成业务需求，因此我们决定开发一个可视化编排的平台，通过该平台来收集样本数据，并且可以顺手把需求也消化掉。

那么问题来了，这么多的样本打标的工作到底由谁来完成呢？

我们通过调研发现运营的角色在可视化编排方向上，是有着非常高契合度的。为什么呢？其一，运营都具备模块搭建的能力。其二，很多运营的需求都不一定有机会能够落地，主要原因是开发资源不足导致的，这也是多年来存在的业务与技术矛盾，前端这十年来一直朝着工程化、规范化、模块化的方向发展，本意是为了更有效的重用业务能力以达到解放生产力，而产品却一直在朝着丰富化、精细化的方式来运作，各个业务方不再是单单为了满足功能诉求而更讲求的是用户心智。最终致使现在对一个个性化需求的提出往往是用一个标准化方案来落地的。当业务方为资源不足妥协时，其业务整体感官也会越来越平庸化、趋同化，最终导致产品对用户的心智弱化。

image.png

因此对于运营的诉求是希望能将创新和业务思考带入到自己的产品中，而不是简单的拆解为一个个的标准实现。如何拉大与竞争对手的运营差异、交互差异、创新差异、视觉差异才是对于运营真正的核心价值。

在AI 的介绍篇中我们讲了对于复杂的逻辑关系我们依然可以采用抽象的组件化来实现，而这部分实现对比传统搭建体系的组件颗粒度更细，传统搭建一般是对模块的自定义配置，而在我们的编排体系里最小的组件应该是原子化的不可再被拆解的，比如一个Image 组件，而对组件的配置可以是一段编排好的逻辑实现，因此它能有着同代码一样的绝对灵活性。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

什么是P2C？

已解决
詹姆斯邦德00 2022-10-25 1016浏览量 回答数 1

P2C 即通过 prd 自动产出 code，即是我们开头所讲的需求即代码的终极目标。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 1

1

回答

Splayer 的复杂使用场景，在1x2 模块播放器视频切换过快情况下，消失动画延时，封面图移除时机

已解决
詹姆斯邦德00 2022-10-25 1068浏览量 回答数 1

调整底层播放器封面图移除时机，在播放前移除。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

2020年618大促场景中，播放场景抹平是什么意思？

已解决
詹姆斯邦德00 2022-10-25 973浏览量 回答数 1

Videoplus 针对环境做了一层抹平处理，不同场景使用不同的播放器，本次 618 新增同层渲染播放器，能力上更加完善。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

2020年618大促场景中，事件/ 属性/ 监听是什么意思？

已解决
詹姆斯邦德00 2022-10-25 1019浏览量 回答数 1

Videoplus 针对播放器的时间、属性、监听进行一层抹平，符合 w3c 标准播放器的 api 标准，用户使用时，如果上手过 video 开发，接入成本大大降低。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

Videoplus 从业务角度来说，视频播放主要分为哪两种？

已解决
詹姆斯邦德00 2022-10-25 996浏览量 回答数 1

直播和点播。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

Videoplus 在2020年618大促中，播放能力整体分为哪几个维度？

已解决
詹姆斯邦德00 2022-10-25 1021浏览量 回答数 1

●全量降级终极兜底方案，开启后，所有 Videoplus 播放器强制降级成 poster。

●播放器场景降级方案（H5/weex/PHA）支持 H5/weex/PHA 场景，对应场景（直播或者点播）播放器出现意想不到的情况时应急采用。H5/weex/PHA 场景分别带有：1、禁用直播2、禁用视频。

●指定 bizFrom 降级方案在某一业务使用播放器时发生问题时，兜底使用。当开发业务接入播放器时，需要传入唯一业务指定 bizFrom，具体需要到播放器管理者处申请，如果未传入值，则播放器不可使用。可直接指定某项业务(bizFrom) 关闭播放功能，一旦关闭，直播和视频在该业务场景下不可使用。

●指定客户端 / 客户端版本号使用指定客户端版本及版本号使用。在手淘及天猫客户端版本中，如果播放器被发现某些bug，可通过此开关降级。粒度控制到三位版本号，例如手淘 10.0.0 版本。

●指定操作系统版本号此场景由于某些操作系统及版本下播放器出现问题，粒度控制到三位版本号，例如 iOS 10.0.0 版本。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

2020年618大促场景中，Splayer在实例管控方面提供了哪些帮助？

已解决
詹姆斯邦德00 2022-10-25 950浏览量 回答数 1

Splayer 总能保证当前播放器只有一个播放器实例，避免因为实例无限增长导致 OOM。

对于类似会场模块组成形式的页面，Splayer 要求各个模块引用的版本一致，实例化出来的 SplayerEmitter 保证唯一性并能监听到其他模块发送的指令。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

2020年618大促场景中，Splayer在事件监听方面提供了哪些帮助？

已解决
詹姆斯邦德00 2022-10-25 983浏览量 回答数 1

Splayer 提供了一系列事件监听方案控制视频播放器，可以通过Splayer 提供出来的 SplayerEmitter 完成播放器的销毁或者创建工作，并且无需担心其余播放器的处理( 在每次操作播放器时，Splayer 会同时管理其他播放器实例)。

●滚动监听：当滚动停止时，Splayer 会寻找播放器最佳位置播放。

●指定 id 播放监听：存在播放器列表场景下，指定单个播放器监听播放，此时VideoManager 会销毁其余播放器，并将指定 id 的播放器实例化。

●Appear/DisAppear 监听：依赖于 rax 的 appear/disappear 方法，在每个Splayer Appear 时，VideoManager 会缓存当前的播放器，并从当前缓存的Appear 播放器队列中选择最佳位置( 居中) 的开始播放。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

相较 H5 播放器，Native 播放器有什么优劣势？

已解决
詹姆斯邦德00 2022-10-25 1523浏览量 回答数 1

淘系技术部 Native 播放器内核的多年沉淀，Native 底层播放器处于稳定状态。相较 H5 播放器来说，Native 播放器支持格式更广、解码能力更优、性能体验极佳，但灵活能力不足。基于 Native 播放器的同层渲染播放器，在体验上与 Native 播放器达到达到持平状态的同时，灵活能力兼具。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

前端移除之后，PHA Tab 切换挂起webview，导致异步操作失效未将播放器实例销毁，主会场头图

已解决
詹姆斯邦德00 2022-10-25 1152浏览量 回答数 1

播放器监听PHA 页面 disappear，强制停止播放，并forceUpdate 同步销毁播放器解决此问题。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

2020年618大促场景中，weex代表什么意思？

已解决
詹姆斯邦德00 2022-10-25 1135浏览量 回答数 1

使用 weex 底层封装的播放器。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

同层渲染播放器方案中的同层渲染是指什么？

已解决
詹姆斯邦德00 2022-10-25 1199浏览量 回答数 1

是允许将 Native 组件和 WebView DOM 元素混合在一起进行渲染的技术，能够保证 Native 组件和 DOM 元素体感一致，渲染层级、滚动感受、触摸事件等方面几乎没有区别。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

Splayer是一个怎样的播放器？

已解决
詹姆斯邦德00 2022-10-25 1172浏览量 回答数 1

Splayer 严格意义上来说不是一个真正的播放器，是一个业务基于在 Videoplus上的封装层组件。Splayer 不针对播放器本身功能做特殊处理，把重点放在了业务日常开发播放器中更关注的一些实用功能上。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。****

胡嘞嘞 评论 0

1

回答

2020年618大促场景中，手淘 H5代表什么？

已解决
詹姆斯邦德00 2022-10-25 1051浏览量 回答数 1

使用同层渲染播放器播放 3、外部 web：使用多媒体前端团队videox.js。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

H5 的播放器和同层渲染播放器在自动播放、H.265、HLS、FLV上有哪些不同？

已解决
詹姆斯邦德00 2022-10-25 1170浏览量 回答数 1

image.png

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在2020年620大促性能保障方案中，模块按需加载？

已解决
詹姆斯邦德00 2022-10-25 1018浏览量 回答数 1

image.png

除了模块缓存下发，今年的618 会场还通过“模块按需加载”的优化方式，最小化的控制了当前页面的模块数量，这对首屏的JS 资源请求、数据请求都有一定的缩减。在实现方案上，通过在数据网关层先读取服务端所缓存的定向投放条件，判断当前访问的URL 参数、客户端信息等是否满足模块的展示条件（例如，搜索框模块仅在手淘内才展示）。不满足条件时，则直接从页面中移除这一模块。例如，在外部浏览器里打开618 超酷数码会场时，页面所加载的JS 资源大小可因此减少40+%。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在2020年621大促性能保障方案中，监控检测是怎样的？

已解决
詹姆斯邦德00 2022-10-25 1133浏览量 回答数 1

这次的618 使用了两套检测机制来保障会场性能。第一套是模块级检测，通过与H5 自动化测试平台等打通，批量化的对所有大促模块进行了性能检测，从中发现了例如部分模块的引用图片未压缩、资源域名未收敛等问题。

image.png

第二套则是页面级检测，在小二们完成了会场页面的配置填写后，批量化的对所有的618 会场进行了自动检测，使得一些页面加载、数据请求、模块渲染等相关性能问题，可在上线前得以被发现和修复。

而性能监控上，与双11 整体保持一致，今年618 使用了一套接近于FMP 的性能指标，以自定义采集上报的方式、联动前端监控平台，实现了分钟级的性能看板，帮助我们更快的发现线上性能问题、并作出针对性的调整。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在2020年619大促性能保障方案中，资源请求如何缓存模块资源？

已解决
詹姆斯邦德00 2022-10-25 1211浏览量 回答数 1

模块的JS+CSS 资源，因为不同页面所使用的模块不同（例如男装会场和家装会场），并且总计有上百个模块，无法做到全量的提前缓存。这里我们通过捞取top流量页面的方式，仅将首屏相关的核心模块做了模块缓存下发，较好的缓解了模块请求的耗时。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在2020年622大促性能保障方案中，降级策略是怎样的？

已解决
詹姆斯邦德00 2022-10-25 1077浏览量 回答数 1

同层播放组件的引入对会场页面的内存占用提出了较高的要求，尤其是低端机、老系统等。针对这个问题，今年的618 会场域统一接入了客户端所提供的降级平台，可直接根据机型、系统版本、客户端版本等条件动态的执行降级策略。例如，可设置在手淘版本≤ 9.5.0 + iOS 版本≤ 10 时不播放商品短视频等等。

今年的618 会场，线上整体稳定性良好，未出现因会场内存占用过高而导致的客户端crash 飙高情况。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在2020年620大促性能保障方案中，数据如何请求优化？

已解决
詹姆斯邦德00 2022-10-25 1138浏览量 回答数 1

为了给消费者们推荐最贴心的好物，现在的大促会场使用的更多是千人千面、个性化的算法推荐数据。但推荐所带来的算法耗时增加，使得数据请求成为了当前会场性能的耗时最长板。如果能够降低当前会场的数据请求耗时，那么首屏时间也会随之明显减少。

所以在今年的618 会场中，我们落地了一套基于线上实时埋点的请求优化方案，通过更精简的首屏模块数量来实现了对首屏接口耗时的直接优化。

在方案中，通过采样上报的方式获取到了模块高度，并结合设备信息、页面模块排序、个性化数据等条件，个性化的控制了每次访问的首屏模块加载数量。例如，小明在访问数码会场时只需要加载5 个模块，而小强只需要加载4 个模块。以线上RT情况为例，针对于单个会场，方案可使得首屏耗时平均减少100+ms。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在2020年618大促性能保障方案中，资源请求如何做到页面预缓存？

已解决
詹姆斯邦德00 2022-10-25 1252浏览量 回答数 1

在手机淘宝、天猫等app 内，我们利用了端侧提供的静态资源缓存方案，将HTML 和基础JS 等资源，推送下发至客户端。在客户端的webview 请求资源时，端侧可根据域名来匹配已下发的缓存包，在匹配成功后直接从本地缓存中读取对应的HTML 和JS 资源，而无需每次都请求网络、大大缩短了页面的初始化时间。例如，主会场的html 加载耗时在推送缓存后可平均减少70+%、命中率可达到97%。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在618 的“开列车”弹窗规模化生产技术方案中，解耦下的弹窗视图层是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1081浏览量 回答数 1

为了给予设计师更多的发挥空间，我们对UI 进一步结构化拆解，直到要达到可以快速编排出UI，以及支持动态下发。

一个项目中往往会有多个弹窗，每个弹窗有许多图层组合，假设类型比较简单只会有组、图片、文案等类型的图层，图层上会有静态& 动态的属性描述。

我们可以通过经验所得来的项目 > 场景 > 图层各个维度的拆解，把静态配置+动态绑定等能力对弹窗的UI 进行结构化描述，如下图。

image.png

首先UI 部分是纯函数式的，所以只需要支持UI 描述以及动态参数，就可以展示实际的弹窗UI，让业务开发专注在弹窗的逻辑描述上。

配合提供相应的UI 设计器，开发者就可以根据需求绘制出所有弹窗，把弹窗的UI 开发成本降到最低。

image.png

image.png

通过结构化UI 层我们就很方便的做很多事情，首先弹窗UI 跟逻辑方案都是DSL+Runtime 的相同机制，所以只需要配合搭建平台或者异步接口，就能快速支持动态下发的能力。

以及面向开发者协同以及视觉还原的真实预览能力，在发布时，平台上的弹窗预览功能将原来可能需要近半小时的弹窗配置review 环节，缩短到几分钟，且准确度更高。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在618 的“开列车”弹窗规模化生产技术方案中，解耦下的弹窗逻辑层是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1002浏览量 回答数 1

我们将弹窗的能力分为UI 层跟逻辑层，大致结构是逻辑通过事件唤起弹窗，先抛开UI 层那么先对逻辑进一步结构化，最终逻辑层的结构以及逻辑层跟UI 层的关系如下图所示。

image.png

逻辑层通过监听业务数据层变换，初始化后Trigger 管理器负责从配置队列中检索到匹配条件的行为，开发者几乎可将所有诉求类的弹窗根据Conditions（触发条件）、 Times（展示次数）、Level（层级面）等能力描述出来，并通过配套的runtime快速生成业务所需的逻辑，例如一个初始化进来后的弹窗只需要描述这样一个DSL。

image.png

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

强化学习是什么意思？

已解决
詹姆斯邦德00 2022-10-24 1093浏览量 回答数 1

强化学习是机器学习中的一个领域，强调如何基于环境行动，以取得最大化的预期利益，也意味着能够更快速的到达互动玩法的最终状态。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在618 的“开列车”互动智能测试技术方案中，自动回归测试是怎样的过程？

已解决
詹姆斯邦德00 2022-10-24 1212浏览量 回答数 1

互动场景下的前端交互非常复杂，然而前端功能回归一直以人工方式为主。我们在项目中尝试自动生成测试用例，用于回归测试。

从用户交互的视角出发，收金币、购买车厢、合成车厢都对应用户的一次交互行为。我们在 Puppeteer 环境中运行页面，根据沉淀下来的数据，回溯到特定的状态。

并结合强化学习，择优触发前端Action 事件，模拟真实的用户操作，最终形成用户的前端交互行为树。

image.png

得到用户交互行为树之后，我们会对行为路径再进行优化，排除无价值的链路，合并重复链路，并最终拆分成简短的片段便于测试。如合成车厢N 次，会处理成为N 个测试用例，尽量以同种状态下的最短路径作为最终的测试用例。

image.png

在需要回归测试时，我们可以在 Puppeteer 环境中回放测试用例，做到了前端功能的自动回归。这个过程中，我们把各个测试用例的UI 快照保存了下来，利用图像识别技术进行最后的校验。

以倒计时浏览任务为例，我们需要验证在跳转后的页面上，是否正确的展示了某个组件，通过图像元素的对比，可以判断该功能点是否正常。

image.png

互动项目的业务逻辑，是一系列用户行为带来的反馈的组合体，智能测试方案在本次 618 互动项目中，成为了前端开发测试阶段的提效利器。在线上阶段发生变更时，可以快速完成线上功能的全量回归和新功能的验证，保障线上业务的稳定。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在马尔可夫决策过程（MDPs）中，Agent通常代表什么意思？

已解决
詹姆斯邦德00 2022-10-24 1013浏览量 回答数 1

学习和做决策的主体

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在马尔可夫决策过程（MDPs）中，Action通常代表什么意思？

已解决
詹姆斯邦德00 2022-10-24 1017浏览量 回答数 1

行动，Agent 会根据当前的状态选择 Action

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在马尔可夫决策过程（MDPs）中，Reward通常代表什么意思？

已解决
詹姆斯邦德00 2022-10-24 1050浏览量 回答数 1

奖励

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在马尔可夫决策过程（MDPs）中，State通常代表什么意思？

已解决
詹姆斯邦德00 2022-10-24 982浏览量 回答数 1

Agent 的状态

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

强化学习中，马尔可夫决策过程（MDPs）是什么意思？

已解决
詹姆斯邦德00 2022-10-24 1335浏览量 回答数 1

MDPs 简单说就是一个智能体（Agent）采取行动（Action）从而改变自己的状态（State）获得奖励（Reward）与环境（Environment）发生交互的循环过程。Agent 会持续的和环境交互，根据当前的状态选择 Action，而环境会给 Agent 新的状态和 Reward。

image.png

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在618 的“开列车”弹窗规模化生产技术方案中，弹窗的表达层与逻辑层是如何解耦的？

已解决
詹姆斯邦德00 2022-10-24 1043浏览量 回答数 1

一般情况我们可能会将弹窗沉淀成包含UI 的弹窗组件库，也会进一步会将弹窗细节抽象出header、body、button、footer 等配置项。但这样会有一些问题，在互动领域下的一个按钮布局、一个图标形式都会让这个“组件”越来越臃肿，所以不要天真的试图用前端的设计思路，去预判设计师天马行空的设计理念。毕竟不同的玩法和品牌形象下，对UI 的定制往往有较强的诉求，因此在营销互动中很难达到真正的UI 可复用，因此我们要将表达层完全抽离出来，弹窗方案的逻辑层只负责模型的处理，表达层通过接受数据变化带来的“表达”变化。

image.png

例如实现了一个抽奖玩法，逻辑层包含了数据模型、登录初始化请求数据以及抽奖事件的后续逻辑行为，那么该数据模型下最终表达层选用的是老虎机、大转盘还是直接点击抽奖按钮其实都是兼容的。

image.png

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在马尔可夫决策过程（MDPs）中，Environment通常代表什么意思？

已解决
詹姆斯邦德00 2022-10-24 985浏览量 回答数 1

Agent 交互的对象

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程技术平台中，直播开放平台是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1262浏览量 回答数 1

基于 ALive 直播架构，提供直播、互动、营销一体化解决方案，赋能二方、三方直播能力。

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程线上服务中，网关接入是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1252浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程线上服务中，渲染引擎是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1325浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术体系中，客户端是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1231浏览量 回答数 1

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

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程基础架构中，中后台架构是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1300浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程基础架构中，互动架构是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1228浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程基础架构中，直播架构是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1225浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程技术平台中，互动研发平台是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1237浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程技术平台中，中后台研发平台是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1267浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程技术平台中，搭投平台是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1306浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程体系中，前端研发规范是怎样的？

已解决
詹姆斯邦德00 2022-10-24 457浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

在淘系前端技术工程基础架构中，终端架构是怎样的？

已解决
詹姆斯邦德00 2022-10-24 1248浏览量 回答数 1

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

以上内容摘自《大促背后的前端核心业务实践》电子书，点击https://developer.aliyun.com/topic/download?id=728可下载完整版。

胡嘞嘞 评论 0

1

回答

《大促背后的前端核心业务实践》可以在哪里下载？

已解决
詹姆斯邦德00 2022-10-24 421浏览量 回答数 1

下载链接：https://developer.aliyun.com/topic/download?id=728，这本电子书收录于开发者藏经阁，有兴趣的可以看下，还有很多技术类电子书：https://developer.aliyun.com/ebook

胡嘞嘞 评论 0
立即提问

了解更多

更多内容为你解读，持续关注！

展开

大淘宝开源，欢迎star哟

  • coobjc: https://github.com/alibaba/coobjc