作者：千之

上篇回顾：淘宝小部件：全新的凋谢卡片技术！

2021 双十一，淘宝全新的凋谢状态「小部件」大促中首次亮相，并且撑持凋谢业务初步规模化；说起小部件，咱们还是先回顾一下淘宝小程序凋谢的前世今生。

小程序凋谢的前世今生

从页面级凋谢到模块级凋谢

淘宝凋谢业务的实质，就是通过联结三方凋谢生态的力量，帮忙商家在淘內实现更好的商业经营行为，提供优良的消费者体验。面对商家凋谢定制水平高、经营数据协同性强、更高效经营链路的谋求下，咱们对凋谢技术的摸索永无止境。

过来咱们提供了小程序的能力，突破了 H5 页面之间的边界和割裂，商家能够深度经营本身的消费者；在这个过程中，咱们借力了小程序成熟的业界生态和欠缺的工程基建，通过独立页面的状态来撑持了咱们本身业务的倒退，譬如购物小程序、淘积木广告等等。

起初，咱们和店铺团队单干，通过基于小程序环境下的插件凋谢，帮忙店铺引入了 100+ ISV 和数千家设计师，为上万的品牌和商家提供了差异化营销能力。这套技术人造是以小程序插件为外围的技术计划，也是小程序环境 + 小程序规范；将商家自经营主阵地店铺小程序插件化，并对旺铺平台降级，使店铺成为商家可高度模块化定制、个性化经营、差异化承接公域的外围经营阵地。

再起初，咱们发现小程序技术尽管带来了业务资源的对立和利用率的微小晋升，但小程序独立状态的实质让咱们的谋求受限。小程序独立的页面状态和消费者流量承接效率之间人造会存在博弈，这里包含用户点击会存在跳失率的起因，也包含整个消费者拜访门路过长的起因，也有短少消费者前台心智的起因。

种种原因下，基于在小程序多年的技术积攒和积淀，咱们启动了小部件凋谢我的项目。

小部件实质上是一个凋谢的模块全域通投技术， 通过小部件，咱们能够把业务投放在各大非小程序环境的业务场景中，譬如详情、搜寻、首猜、订阅等等，当然也能够在店铺中投放。

小部件和小程序的关系

小程序的姊妹状态

小部件和小程序的关系是什么？

一言以概之，小部件是小程序的姊妹状态。

过来，咱们基于在小程序多年的技术积攒和积淀，咱们积淀了小程序平台，作为小程序 / 小程序的外围零碎平台，也是小程序零碎的基石，提供着最根底稳固的运行服务和数据能力；

在开发者应用的凋谢能力的背地，咱们还有着诸多能力的根底平台，开放平台，提供了大量可应用可利用的根底能力；在小程序中咱们积攒了成熟的开发者工具体系，包含 IDE、构建器等等这些一站式的工程工具；此外，咱们在横向自研了一个高效又轻量的 Weex2.0 渲染内核，通过渲染内核的降级和打磨，咱们使得 Weex2.0 成为小部件渲染的外围根底；另外还有咱们有着在小程序下积攒的一批富裕淘宝特色的 API 和根底 API 能力，这些 API 能够无缝在小部件下被咱们的开发者所应用；再者，咱们领有和小程序同构的业务容器，稳固隔离的业务容器使得咱们能够高效推动小部件相干的业务在平安的水位下运行。

除了这些平台本身的根底能力，咱们还有来自广告公司、品牌的陈腐创意，通过创意的组合和生态的单干，咱们为业务供应养料；另外还有来自开源社区的输出，与之配套的强壮工程体系。

站在这些伟人的肩膀上，通过这些生产因素的组合， 咱们在小程序之外孵化了一个新的凋谢状态：小部件。

小部件通过规范、能力、场景的三层凋谢，开释了新一轮技术红利；咱们持续标准化了凋谢能力的应用和残缺的技术接入流程，通过新的场景凋谢晋升了生态的创收空间。

在业务侧，咱们心愿通过小部件能够撬动商家的经营心智，并最终晋升商家的经营链路成果，为商家的经营效果所买单负责。

小部件是什么

淘宝凋谢的新形态，卡片级凋谢计划

那么，回到小部件上来，小部件是什么？

小部件是淘宝凋谢的新形态，是咱们模块级的凋谢解决方案。

小部件生态里的开发者和设计师们能够通过咱们的前台业务（LiveCard/ 前置卡片）来进入小部件的生产流程，通过咱们的凋谢工具譬如淘宝开发者工具或者游戏引擎 IDE 来生产本身的物料，再通过咱们的云函数 / 云利用来连贯开发者本身的云，实现业务逻辑的研发闭环。

小部件的开发者生产完物料之后，会通过咱们简单的投放零碎来做投放；这里平台会有一些规定的检测和束缚机制来保障流通的效率，针对不同的场景下，开发者能够开发不同的小部件来适配场景和适应场景的业务规定，此外，针对投放侧还有一些配置数据的关系存储，最初这些业务数据会以报表的状态展示在商家前台；不便商家晓得自家模块的正题状况，包含消费者点击 PV、UV 这些，还有疏导成交数据等等。

投放操作实现后，小部件会在前台业务场景实现渲染，这里的技术细节会非常复杂。因为在不同的场景下会波及多个场景本身的容器，这里包含 PHA、Weex|DX、小程序等等，所以咱们须要通过一些形式间接嵌入在前台场景中。而后运行时会动静拉取对应的 JS 包再加以执行，这个逻辑也会非常复杂，在小部件容器层面，咱们会对立元信息、根底库能力、生命周期等等能力；局部能力和小程序容器是间接专用的。最初 JS 代码会传递到小部件的内核，也就是 Weex2.0 内核中，Weex2.0 内核中包含了咱们自研的脚本引擎、图形引擎还有渲染引擎。内核次要负责执行逻辑和提供渲染实现，通过 Weex2.0 提供的跨平台渲染一致性能力，咱们在 iOS/Android 上能够实现简直一摸一样的款式能力和动画能力，也能保障开发者的代码能够无缝渲染两端。

最初是咱们的撑持平台，通过开放平台、小程序平台、小二经营平台的横向撑持和上述生产侧、投放侧、运行侧的配合，咱们能够面向私域场景输送小部件的供应。这里包含店铺、详情、搜寻、首猜、订阅等等；面向这些场景下，咱们能够提供最上方的卡片供应，还有商品卡片、互动卡片、小程序卡片、内容卡片、权利卡片、3D 卡片等等。

对于小部件的具体技术介绍，能够参看笔者之前的文章：淘宝小部件：全新的凋谢卡片技术！

小部件能帮忙业务解决什么问题

那回到一个业务命题上来，小部件能够帮忙业务解决什么问题？

咱们拿店铺举例。

首先回顾一下店铺凋谢业务的往年策略，店铺往年从新做了凋谢业务的策略降级，次要是三个关键词。

1. 首先是「表白模式降级」，店铺模块降级为 LiveCard，并通过多个 LiveCard 组合为 MiniShop、每日好店等；
2. 第二个关键词是「凋谢模式降级」，通过视觉凋谢、性能凋谢、利用凋谢的三个纬度，能够以卡片组合的形式来作为业务的前台表白；
3. 第三个关键词是「内容供应降级」，过来店铺里的模块大多数是商品货架卡片为主，内容化的模块绝对较少，通过内容供应的降级，利用小部件丰盛的开发者生态和弱小的互动前置能力，咱们能够将互动游戏间接前置在店铺模块中。

刚刚好，小部件的技术体系完满符合了店铺业务降级的思路。

开发者开发的一个 LiveCard 模块在店铺装修后，能够流通到详情页，并且在详情页的体验和店铺首页的体验是截然不同的。当然，这外面详情只是其中一个场景，店铺通过 LiveCard 能够从单纯的货架类卡片拓展到单品、举荐、权利、互动、内容、小程序等多类型卡片，丰盛了各个场景的卡片供应，满足了商家多元化的经营诉求，最大限度得开释商家的生产力。

店铺应用小部件能够实现商家价值与平台价值的对立，业务能够通过小部件来积淀本身的商家资产，并作结构化积淀和利用，商家能够在店铺内通过小部件获取体验一致性和更大的凋谢空间作自家店铺的深度定制，对于咱们的生态来说，生态里的开发者能够获取多场景、多赛道的创收空间，帮忙开发者能够在更多的业务场景取得商业价值。

小部件在双 11 的规模化利用：店铺场景

为商家私域带来更为丰盛的场景体验和更弱小的翻新创造力

淘宝小部件第一次登上双十一舞台。在大促中总体笼罩商家数 300+，波及多个外围 KA 和 SKA 商家，前台峰值消费者曝光 PV 1900W+，UV 470W+。

• 撑持了双十一 98 个店铺 LiveCard 的上线，波及多个 KA/SKA 品牌的定制小部件和大量腰部商家的模版小部件；
• 帮忙平台上的商家通过 LiveCard 更快触达潜在客群，并在大促期间胜利获客蓄水。

小部件在双 11 的规模化利用：会员场景

帮忙 Nike 打造品牌会员定制标杆我的项目，晋升会员经营效率

1. 撑持了天猫行业 Top 定制我的项目「Wildwood」正式上线 Nike、Jordan、Nike Kids 三家旗舰店会员页，整体我的项目对外为「Nike 会员进阶打算」，我的项目残缺应用了小部件简单的交互能力，并串联了背地的小程序减少深度体验；整体消费者回访率和停留时长均高于大盘水位；
2. Nike 借助小部件引入一系列高度个性化、乏味且更为深刻的会员互动，借此会员进阶打算，优化了中国消费者的会员体验 。

小部件遇到的技术挑战

凋谢业务有着比拟显明且显著迥异于其余业务的业务特色，这些业务特色在往年双十一对小部件带来了全新的技术挑战。

交付工期短：

1. ISV 通常开发、测试的工夫筹备有余，交付工期被我的项目上线工夫压缩，短少严格测试周期能力
2. ISV 程度和品质都参差不齐，我的项目交付水准也无特定规范，短少最佳实际领导

上线不可控：

1. 商家私域业务上线工夫自在不可控，短少单业务粒度的监控和运维能力
2. 商家私域业务公布装修即全量，短少灰度放量机制

回滚难度高：

1. 上线后遇到问题再回滚 / 降级的老本商家是无奈 cover 的，并且存在投诉危险
2. 商家 / 品牌的业务预期一贯比拟明确，通常须要配合生意经营节奏，个别不轻易回滚

这些显著的业务特色给咱们的双十一带来了一些辣手的挑战，巨量的开发者提交版本和商家公布过程使得咱们在双十一期间经验了报警、回滚、排查、修复、公布的多轮考验。在不影响商家品牌的外围体验的前提下，咱们和开发者一起经验了多轮排查问题再修复上线的过程。

联合咱们的业务特色和双十一期间的一些问题，咱们总结了目前小部件最大的挑战和瓶颈，同时咱们也在苦楚中寻求解法：

其一，稳定性挑战： 次要是小部件内核成熟度欠缺导致的全局稳定性危险，目前小部件的内核（Unicorn）还在疾速迭代中，大量的性能需要和优化策略也在并行开发中；在疾速迭代的过程中势必会导致稳定性受到挑战，这里存在业务场景对稳定性的高要求和技术迭代过快之间的矛盾；针对稳定性挑战的问题，咱们前面会继续建设内核的稳定性，和内核团队一起把稳定性建设作为小部件最重要的技术指标；致力夯实内核的基本功，面向轻量、古代、高性能的渲染引擎指标迈进；

其二，语法能力： 小部件的款式语法限度目前还是绝对严格，次要体现在局部受限制的 CSS 款式能力和数据协定申明；绝对于小程序 /Web 体系的语法，小部件的一些语法限度对开发者的确晋升了学习老本，帮忙小部件的开发者获取和 Web 一样的优良体验，是咱们正在致力优化的一件事；咱们心愿通过后续文档的继续欠缺、内核对款式能力的进一步反对、工具链的继续加强来帮忙开发者进一步降低成本；

其三，开发体验： 小部件的研发工程链路细节毛糙；作为一个面向开发者的技术产品，小部件的工程链路上存在很多细节点须要深刻打磨优化，这里包含预览环境和实在环境的对齐、性能面板能力的提供、调试工具链的加强、线上监控数据的披露、多场景流传的最佳实际、B 端配置能力的降级等等；面这些开发者最关怀最迫切的问题，小部件会尽快通过产品化的形式来优化咱们的开发者体验，帮忙开发者能够继续通过平台能力的降级来晋升本身的开发效率和体验。

小部件的后续布局

小部件项目组全面撑持了凋谢业务的 2021 双十一大促，小部件技术计划实现了从框架演进到内核切换全流程的全面降级和优化。项目组 30 多位核心成员，胜利走过了 KO、计划评审设计、关闭测试开发、大促冲刺等各个阶段，历经考验、自证预言，顺利上线。

一路走来，筚路蓝缕。

咱们心愿后续继续构建可撑持多场景多状态、API 无差别能力、端到端建设的新一代凋谢技术，实现极致的全局凋谢，面向生态提供更高质量更广大的凋谢赛道。

[]()

在生态体验这块：

1. 咱们打算会面向生态凋谢全新的 Rax DSL，给开发者提供新的技术语言选择；
2. 咱们打算面向开发者降级整个监控运维体系，提供监控报警、自动化运维等报表；
3. 咱们打算持续丰盛小部件的款式和动画能力，并提供更多的 API 能力；
4. 咱们打算继续优化开发者的体验，帮忙开发者进步小部件的研发效率。

在技术基建这块：

1. 咱们打算继续接入更多淘宝的公私域场景，进步小部件的流通可能性；
2. 咱们打算欠缺小部件的跨场景流通能力，并晋升小部件的流通效率；
3. 咱们打算优化小部件的前台消费者体验，优化小部件前台加载时长和引入小部件集群计划；
4. 咱们打算夯实小部件内核根底稳定性，修炼内功继续建设底层基建。

通过生态体验和技术基建的双重建设，咱们心愿小部件能够成为商家在私域经营的外围武器，帮忙商家在淘宝能够更好经营本身的消费者。

关注【阿里巴巴挪动技术】微信公众号，每周 3 篇挪动技术实际 & 干货给你思考！