蚂蚁金服体验科技精选，是蚂蚁前端工作小组出品的一个双周刊，内容包括蚂蚁前端技术动态、原创文章、以及行业动态的精选。目前已出到第三期，我们将前三期内容整合起来在这里发布，后续，我们将在每一期出来后同步进行发布。

蚂蚁金服体验科技精选创刊祝词

从业十余载，内心一直有个声音问自己：除了支撑好业务，阿里经济体 2000 多名设计师及 2000 多名前端工程师，还可以做点什么，怎样为业务创造更大的价值，如何才能在历史的洪流中开出鲜艳的花？

体验科技是对上面这些问题的一个答案。2013 年始，蚂蚁金服肥沃的业务土壤中，逐步生长出 Ant Design、支付宝小程序、语雀等微小而美好的产品。这就是蚂蚁金服体验科技，尝试融合艺术与科技的力量，去做出一些对世界有幸福感的东西出来。

此次推出《蚂蚁金服体验科技精选》，是想在体验科技前行的路上，让彼此不孤单，让我们能共同看见业界的最新进展，同时让业界多一扇窗了解蚂蚁金服在做什么。

期待体验科技的同行者能越来越多，期待体验科技的微小美丽之花，开遍万里江山。
——蚂蚁金服体验技术部负责人玉伯

头条

1.Hello! Umi UI
https://github.com/sorrycc/blog/issues/86
Umi UI 是 Umi 项目的本地研发工作台。使用可视化的功能更好的服务 PRO CODE 的开发模式。目前已具备可视化的项目管理、配置管理以及任务管理等功能，欢迎试用。

2.可能是你见过最完善的微前端解决方案
https://mp.weixin.qq.com/s/_kdPDwXQfvOmYQULIOjG_w
目前社区有很多关于微前端架构的介绍，但大多停留在概念介绍的阶段。而本文会就某一个具体的类型场景，着重介绍微前端架构可以带来什么价值以及具体实践过程中需要关注的技术决策，并辅以具体代码，从而能真正意义上帮助你构建一个生产可用的微前端架构系统。

蚂蚁前端动态

1.L7 地理数据可视化引擎 1.3 版本发布
https://www.yuque.com/antv/blog/ri3gpm
L7 是蚂蚁金服 AntV 地理数据域方向的可视化产品。国内首款开源WebGL 地理可视化引擎。本次发布主要包括“海量文本渲染、支持文本标注”、“线图层可视化增强”、“热力图”等新特性。

2.AntV：今年的目标是在重分析场景破局，以此为目标完对 G2 和 G6 进行改造，同时在地理可视化和图分析探索海量数据的离线/实时分析方案。

3.Ant Design: 新版 Form 组件已经开发完成，合入 4.0 分支；虚拟滚动基础库 rc-virtual-list 已开发完成，将会逐步升级相关组件；发布 4.0@alpha.2，Tree 支持虚拟滚动，Icon 抽离以降低尺寸；发布 4.0@alpha.3，rc-select 重写完成，测试覆盖 100%。

4.Ant Design Mobile：Antd-mobile 发布 2.3.0，Toast 增加全局方法 Toast.config 、Toast.hide，Input-Item 金额键盘 新增 disabledKeys 属性，后续计划支持蚂蚁视觉规范以及主题定制。

5.Bigfish / Umi: Remax 以类似 React Native 的方式完整的支持使用 React 研发小程序，用熟悉的 React 即可快速开启小程序研发，不需要再学习一门语法。并且支持多平台构建（目前支持支付宝和微信小程序），另外它对 TypeScript 也有着良好的支持。

原创精选

1.前端的深水区
https://www.yuque.com/antfe/blog/yy19zo
我们常说，现在前端已进入深水区，但这个深水区到底是什么？我们该做哪些准备？

2.基于 CSS 实现的 Dark Mode 页面效果
https://www.yuque.com/antfe/blog/xhnmdn
自 macOS 中有了 Dark Mode 之后，随之发布的 iPadOS 以及 iOS 13 都迎来了 Dark Mode，紧跟着各个 App 似乎也都准备去迎接 Dark Mode 的效果。虽然并不完全明白在网页中实现效果最终能带来的作用是什么，有人说护眼，有人说省电，但无论是什么，总之基于 WebKit 内核的浏览器也逐步开始支持了。

3.基于 Lottie 的新动画投放方案
https://www.yuque.com/antfe/blog/fu6hnr
支付宝客户端目前打通了 Lottie 到客户端的投放，让投放终端上的 banner、弹屏 的内容更加生动、富有层次感。在过往无数次的AB实验中反复证明更加富有氛围感的banner能够明显提升最终的成交转化。而且动态跟静态的相间投放，让各类活动的主次更加层次鲜明。

4.我是如何将业务代码写优雅的
https://www.yuque.com/antfe/blog/oa9fl4
我是一名来自蚂蚁金服-保险事业群的前端工程师，在一线大厂的业务部门写代码，非常辛苦但也非常充实。业务代码不同于框架代码、个人项目或者开源项目，它的特点在于逻辑复杂、前后依赖多、可复用性差、迭代周期短，今天辛辛苦苦写的代码，上线运行一周可能就下线了。能熟练书写框架代码、构建底层基础设施的工程师不一定能写好业务代码。

5.「一带一路」下的异常与性能监控
https://www.yuque.com/antfe/blog/gcnu24
蚂蚁全球化选择了「一带一路」，海外已有 9 个电子钱包，与中国大陆的「支付宝」形成 1+9 的局面。别人家公司的全球化都是借船出海（贴牌出口或者投资并购），我们则是出海造船（模式赋能），通过「技术出海 + 当地合作」模式，一国一策，因地制宜地共同打造当地人用的「支付宝」。

6.云凤蝶中台研发提效实践
https://zhuanlan.zhihu.com/p/78425921
最近我们在蚂蚁内部发布了全新云凤蝶 2.0，把产品的重点由 H5 搭建彻底转向了中台方向。使用云凤蝶，快速制作高品质中台应用。

7.Remax - 使用真正的 React 构建小程序
https://zhuanlan.zhihu.com/p/79788488
Remax 将 React 运行在小程序环境中，让你可以使用真正的 React 构建小程序。

行业动态

1.Serverless For Frontend 前世今生
https://mp.weixin.qq.com/s/LL0KDHaCwQxCMXSdR2yPEA
所有人都在说 Serverless，几乎没有人知道如何落地 Serverless ，阿里作为 Node.js 国内的引航者，在 Serverless 领域深度实践多年。在此分享给大家一些心得，抛砖引玉。

2.[译]摆脱JS框架，5年web组件开发经验总结
https://mp.weixin.qq.com/s/YiCuPLbhaRVOmU54A7_r4g
Web 组件的出现让开发者可以使用 HTML、CSS 和 JavaScript 创建可复用的组件。这意味着无需使用框架也能创建组件。本文作者与大家分享了在零框架下，近五年来只使用web组件开发的经验。

3.[译]愿未来没有 Webpack
https://juejin.im/post/5d4bcdb7e51d453b386a62c6
作为一名身处 2019 年的 JavaScript 开发者，我也有同感。我们明明已经拥有了这个崭新的 JavaScript 模块系统（ESM），它可以直接在 Web 环境中运行。可每次开发点什么，我们还是得用打包工具处理一下。这到底为什么？在过去的几年里，JavaScript 打包界的炙手可热已经从只优化生产环境转变到了逢开发必打包的程度。不论你喜欢与否，都很难否认打包工具给 Web 开发带来了变态级别的复杂性，而 Web 开发明明是一个一贯以源码可见和轻松上手的精神为荣的领域啊。@pika/web 试图将 Web 开发者从打包地狱中解救出来。都 2019 年了，你使用打包工具应该是因为你想要用，而不是因为你不得不用。

4.Visual Studio Code有哪些工程方面的亮点
https://zhuanlan.zhihu.com/vs-code
Visual Studio Code（VS Code）近年来获得了爆炸式增长，成为广大开发者工具库中的必备神器。它作为一个开源项目，也吸引了无数第三方开发者和终端用户，成为顶尖开源项目之一。它在功能上做到了够用，体验上做到了好用，更在拥有海量插件的情况下做到了简洁流畅，实属难能可贵。我是VS Code用户，同时也为它开发插件，插件市场里的众多Java插件基本都是我们团队的作品，所以我在日常工作中观察到不少VS Code在工程方面的亮点，下面就来逐一探讨。

5.2019年大前端技术趋势分析
https://mp.weixin.qq.com/s/2JMze2w6GQixA7Vcl3n9Zg
一晃眼 2019 年已过大半，年初信誓旦旦要学习新技能的小伙伴们立的 flag 都完成的怎样了？2019 年对于大前端技术领域而言变化不算太大，目前三大技术框架日趋成熟，短期内不大可能出现颠覆性的前端框架 (内心 OS：出了也学不动了)。本文结合个人和团队经历对 2019 上半年做个技术总结。

6.Baseline Interpreter：Firefox 70中更快的JS解释器
https://hacks.mozilla.org/2019/08/the-baseline-interpreter-a-faster-js-interpreter-in-firefox-70/
现代 Web 应用加载并执行的 JavaScript 代码比几年前多很多。虽然JIT（即时）编译器成功使 JavaScript 拥有较高的性能，但我们仍然需要一个更好的解决方案来处理这些新的工作负载。

7.用 MediaPipe 实现设备端实时手势跟踪
https://ai.googleblog.com/2019/08/on-device-real-time-hand-tracking-with.html
用 MediaPipe 实现一个开源跨平台框架，是一种新的手感知方法，用于构建管道以处理不同模态的视觉和音频的感知数据。该方法可以在手机上实现实时性能，甚至可以扩展到多手。

8.SEIN.JS

SEIN 致力于打造一个专业的多平台（目前已支持 Web、小程序、小游戏，未来还会更多）的 3D 游戏开发解决方案。提供了从简单快速开发到复杂稳健设计的各个过渡阶段，来灵活应对各个项目的需求。

9.软件架构指南
https://martinfowler.com/architecture/
当软件行业的人们谈论“架构”时，他们指的是软件系统内部设计最重要方面的一个模糊定义的概念。本文概述了作者对软件架构的看法，并指出了有关软件架构的更多资料。

关于精选

蚂蚁金服体验科技精选由蚂蚁前端工作小组旗下品牌工作小组出品，主要内容将围绕着体验科技展开，包括每期精选、原创精选、蚂蚁动态和行业动态四个版块。