螞蟻金服體驗科技精選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 已開發完成，將會逐步升級相關組件；發佈 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

http://seinjs.com/cn/overview

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

9.軟件架構指南

https://martinfowler.com/architecture/

當軟件行業的人們談論「架構」時，他們指的是軟件系統內部設計最重要方面的一個模糊定義的概念。本文概述了做者對軟件架構的見解，並指出了有關軟件架構的更多資料。

關於精選

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