螞蟻金服體驗科技精選1-3期

螞蟻金服體驗科技精選，是螞蟻前端工作小組出品的一個雙周刊，内容包括螞蟻前端技術動态、原創文章、以及行業動态的精選。目前已出到第三期，我們将前三期内容整合起來在這裡釋出，後續，我們将在每一期出來後同步進行釋出。

螞蟻金服體驗科技精選創刊祝詞

從業十餘載，内心一直有個聲音問自己：除了支撐好業務，阿裡經濟體 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 已開發完成，将會逐漸更新相關元件；釋出 [email protected]，Tree 支援虛拟滾動，Icon 抽離以降低尺寸；釋出 [email protected]，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

http://seinjs.com/cn/overview

SEIN 緻力于打造一個專業的多平台（目前已支援 Web、小程式、小遊戲，未來還會更多）的 3D 遊戲開發解決方案。提供了從簡單快速開發到複雜穩健設計的各個過渡階段，來靈活應對各個項目的需求。

9.軟體架構指南

https://martinfowler.com/architecture/

當軟體行業的人們談論“架構”時，他們指的是軟體系統内部設計最重要方面的一個模糊定義的概念。本文概述了作者對軟體架構的看法，并指出了有關軟體架構的更多資料。

關于精選

螞蟻金服體驗科技精選由螞蟻前端工作小組旗下品牌工作小組出品，主要内容将圍繞着體驗科技展開，包括每期精選、原創精選、螞蟻動态和行業動态四個版塊。