See Conf 悠鶴《螞蟻莊園背後的技術與思考》筆記

時間 2019-11-07

原文原文鏈接

前言：前端

運氣不佳沒有被選中到現場參加第二屆 See Conf 螞蟻金服體驗科技大會，全程看的直播，印象最深的分別是上午場樓院長的分享以及下午場悠鶴大佬的分享。react

原先只是簡單整理一下筆記，在記錄過程當中，本身有一些想法冒了出來，因而就成了這篇筆記裏的「XX注」。webpack

因爲當時在星巴克看的直播，有些內容沒有聽清楚，加上本身理解誤差因此筆記不免有所疏漏或者錯誤，本身也在有疑惑的地方標註出來了，歡迎各位大佬指正web

演講人：悠鶴，螞蟻金服前端技術專家

主辦方：螞蟻金服，第二屆 See Conf 螞蟻金服體驗科技大會

筆記製做信息

製做人：XX，愛回收網前端開發，微信：X_XDalston算法

公衆號：清風迅來，攝影/美食/旅行/前端/翻譯/閱讀/健身……redux

開場白：關於螞蟻莊園的偷吃，微博上有位才子寫了首小詩：

XX注：一開始沒仔細聽講者說的內容，還覺得是講者寫的，就想，果真前端都這麼文藝有才的啊…性能優化

關於螞蟻莊園的用戶故事

1.某某邀請親戚朋友一塊兒養雞，某天小雞跑到父母的家裏偷吃，父母說這是孩子的寵物，把它也當成本身的孩子，就不忍心把來偷吃的小雞趕走

XX注：想起了上午場的「情感」要素，或許有時候產品設計師也不會想到產品在海量的用戶羣體下，開放式的交互，結合真實的情感，會本身演化出各類意想不到而又在情理之中的體驗服務器

2.一對情侶在一塊兒的時候，在螞蟻莊園各自養了兩隻小雞，後來，分手了，但雙方並無互刪支付寶好友；直到有一天，小雞跑到了對方家裏，或許，會讓雙方有所感慨……

XX注：依然仍是一個情字：情感、情緒、感情。微信

WebGL，想說愛你不容易

最初選擇的緣由/優勢：

比傳統渲染技術（Canvas）更高效、性能更好

測試階段發現問題/缺點：

在低版本安卓上，渲染錯亂 & 其餘問題

實際業務場景：

開發時間短，項目工期趕
用戶量大（且低版本安卓仍有很多用戶）

最終方案：

採用穩妥方案：對安卓仍採用 Canvas

結論：WebGL 想說愛你不容易

XX注：簡而言之，這是：日益增加的性能優化/開發效能需求與落後的兼容性問題之間的矛盾；無關對錯，關乎取捨；

0.3 6 顆雞蛋？對小數點說 NO！

現象：

好久好久好久之前，某個未上線版本，用戶的雞蛋數量是帶小數點的，0.36顆雞蛋

XX注：就問你怕不怕，驚不驚喜，意不意外

問題：

小數部分容易形成困惑

XX注：這個就不用解釋了吧……

數字增長，用戶感知不明顯

XX注：比如網遊宣傳語，一刀999，秒升99級，還行是吧？但換成：一刀 3.1415，秒升 0.618 級……（黑人問號？？？）

用戶對於可收取的感知不明顯

解決思路：

百分比進度條給用戶以期待感
- eg：講者提到了王者榮耀每一個英雄在等級邊上都有升級進度條，給人一種期待感
  
  XX注：順着這個例子，XX以爲這樣有利於玩家隨時瞭解當前升級狀況，有利於一些戰術操做從而給對方一個驚喜，或是判斷當前場上局勢，或者只是單純地告訴玩家，很快就要升級了再加油補幾個兵。
進度條變化給用戶以感知
數字真正表明可收取的數量

「支付寶設計的神細節」之小蜜蜂

XX注：PPT 裏的小蜜蜂是會動的，確實跳着8字。講者描述的內容沒仔細聽，但這張圖片的動效以及旁邊的文字足夠清晰和生動形象了，

講者提到了，最後的實現是經過：兩個三角函數疊加（而後說線上版本好像沒有？什麼新版主題來着？XX沒聽清楚……）

XX注：

細節，上午場也有提到「細節」。在幫助引導系統中，經過不打擾用戶的狀況下，提供一些小細節給用戶帶來溫暖的感受；而講者在以後的演講中也提到了細節兩字，注重細節貫徹了螞蟻莊園的核心價值觀：爲世界帶來美好而微小的改變。在同類產品競爭激烈的狀況下，細節或許是有能力打動用戶的關鍵因素之一。
另外一個方面，既然稱爲細節，就很容易被忽略掉，就好比我書讀的少，也沒仔細觀察過蜜蜂，若是不是講者提到蜜蜂🐝是跳8的，若是看到這個細節，我也不會有所共鳴、不會在心裏有一種「啊哈，這個好贊！」的感受。這樣的代價或許就是，因爲部分用戶的認知能力沒法Get到產品細節，因此某種意義上浪費了部分開發投入成本。
但又換句話說，考慮到人與人之間的交流，或許某個午後，一個發現這個神細節的人會由於這個細節而與另外一個朋友進行分享…… 好了打住不說了，隨緣。

如何優雅地「搞雞」

XX注：上面提到的大體都是關乎用戶體驗的，這裏來了點技術貨。大概前面關於用戶體驗方面的內容讓個人思惟一直處於感性思惟模式，因此一會兒畫風切換，有點跟不上突如其來的理性模式，因此筆記有點沒跟上，思考力和理解力也沒跟上（說白話就是講者說了啥如今都忘了，如下內容基本都是靠看PPT腦補）……

如何「搞雞」

採用「分層設計」：
- 業務層：
  - 理念：組件化、數據驅動
    
    XX注：忘記講者提到用了什麼框架，但看到有 redux，那應該就是 react 了吧，但圖上一堆 luna 又有點不肯定,估計是內部項目代號…… 組件化和數據驅動，就不解釋了
- 數據層：
  - 基於 Redux
    
    XX注：核心概念：單一數據源、State 是隻讀的、使用純函數來執行修改
  - 細節：增長了「防抖」、「組合」
    
    XX注：防抖（debounce），通常老是會拿來和「節流」（throttle）一塊兒說，二者相似而不一樣，目的都是優化高頻執行操做的性能，例如監聽屏幕滾動事件處理，看似只是滑動一下，實際每移動1像素都會觸發一次滾動事件。防抖，舉個例子，乘公交車，以司機開公交車爲例，只要必定時間內，有人還在上車，那麼司機就一直等，等到一段時間內沒人上車了再開。例如模糊搜索通常爲了減小服務器壓力，會採用防抖，經過keydown的間隔判斷只要用戶還在輸入，就一直等，等到認爲用戶中止輸入了，再發送請求。
- 遊戲層：
  - 理念：
    - 工程化
    - 配置化
  - 舉例：雪碧圖，抽取出來可配置
好處：減小開發在實現新功能時考慮的事情，下降了維護成本

如何優雅

效：遊戲渲染調試
- 遇到問題：不知道邊框在什麼位置？（記不清）
- 如何解決：（XX忘記了）
淨：調試代碼無侵入
- 經過 webpack loader 保證不發佈到生產環境
巧：圖片自動合成。
- 自動化 => 雪碧圖合成工做
- 嘗試
  - 最初：因爲受 webpack 生命週期限制，不能很好地實現這種功能；
  - 最終：改成 webpack loader
微：打磨動畫細節：（螞蟻莊園理念：爲世界帶來美好而微小的改變）
- 關於微，若是作得很差，那麼 => 微不足道的問題，等用戶體量大時，都會成爲致命的問題
  
  XX注：所謂防微杜漸，千里之堤毀於蟻穴。或許前陣子的 Ant Design 聖誕節彩蛋可能就是一個很不錯的反面教材…… 就我我的角度而言這個彩蛋是個驚喜，但當用戶體量大了，用戶畫像的數量和規模遠超過彩蛋的可控範圍了，那就沒法稱之爲驚喜了.
極：純手工切圖

XX注：此處又是一種取捨，優雅的第一條就是「效」，而純手工切圖怎麼看都和效率搭不上邊，但正如上午婁院長提到的「高跟鞋隱喻」，所謂工匠精神，就是哪怕效率很低，開發很不爽，很痛苦，但看到最終圖片體積小了，同時圖片質量也很高，讓產品的體驗更好了，也願意去作純手工切圖……
- H5圖片體積嚴格；
  - png 無損壓縮、不斷壓縮
- 對大圖片進行拆分；
- 每個點作到極致；

沒有什麼可以阻擋，對調通接口的嚮往

XX注：第一眼看到這個標題的時候，忽然以爲他們組的服務端小夥伴們無辜地躺槍了……心疼三秒

例子：出於無奈，用（和諧和諧）兩字來表明小雞... 來完成服務端的接口聯調

XX注：mock 數據的事情平時再常見不過了，但能 mock 得如此清麗脫俗氣質不凡而又形象生動意簡言駭，做者必定是個骨骼精奇萬中無一的習武天才

講者補充：（這個畫面你們確定沒見過，若是見到了確定是嚴重的線上事故）

裝扮與主題，開放與雙贏

XX注：這裏沒啥特別想說的，只是不知爲啥忽然想到了 LOL 以及王者榮耀很重要的盈利點就是賣皮膚裝扮，尤爲是各類節日限定的皮膚，更坑的是 LOL 有時候還會拿過去限定的皮膚返場，經過10連抽卡的形式來賣，…… （實際上是想到了本身非洲人的黑歷史，惟一歐洲是當年總算抽到了龍年盲僧李青，所謂龍瞎……）

需求：

節日主題：（2018年春節主題）

高級裝扮：推進業務成長，爲了螞蟻莊園與其餘業務方的雙贏

XX注:此處引用一位朋友的原話：穿上這個套裝，我就是最靚的崽兒。

方案：FreeStyle 裝扮製做平臺

目的：解放開發與視覺的生產力

爲了性能，不擇手段；小問題，大算法

XX注：接着上個話題，上個話題能夠說是表面上看起來很光鮮，各類裝扮，把小雞打扮的賊靚；可是這光鮮背後大概就是程序猿/設計師小哥哥小姐姐們多少個日日夜夜費勁頭髮不斷優化的成果。

一個例子：中秋節的需求

需求介紹：

XX注：這類需求太常見了……
- 只在中秋節3天展現特殊樣式
- 原先吃餅乾動做改爲吃月餅
團隊狀況
- 任務時間很少
- 現有的素材，已經有 1M 大小
解決方案：
- 向時間妥協。再追加五套幀動畫，1M 的體積上，又加了500多 KB

解釋：因此說這是最大的挑戰

1M 大小緣由：全部小雞動畫都是幀動畫。每一個幀動畫有20多幀，加起來有 1M 多
影響：每次進入首頁，有1M多流量消耗，用戶會發現流量忽然用掉好多，會對此質疑

解決過程：

從幀動畫到骨骼X幀動畫
- 想法：
  - 用骨骼模型來重寫
- 嘗試：
  - 白鷺時代，dragon bones
- 問題：
  - 倆字兒 => 不會
    
    XX注：這熟悉的北方口音，竟然給我一種好親切的感受……
- 進展：
  - 從10月底，嘗試使用。發現仍是 dragon bones 實際上仍是用到了幀動畫
  - 後來（此處沒記下來）而後與視覺合做
  - 最終：數據文件+骨骼模型，100多K
另外一個需求：支持動態換裝

- 方案：

	- 資源系統

- 優勢：

	- 根據服務端版本，實時更新

- 主要優化方案：

	- 加載策略：

		- 介紹：優先加載 js 文件，而後異步加載主題圖片、裝扮圖片

		- 好處：加載 js 能保證主要功能不受素材文件加載異常的影響

	- 利用工程化手段：

		- 優化圖片數量、體積、尺寸

		- 解決圖片雲構建系統依賴問題
複製代碼

優化無止境：爲了小性能，不擇手段，優化內存
- 問題：圖片資源多，內存佔用大，
  - 安卓內存佔用和圖片尺寸成正比，會有各類渲染錯亂、閃屏
- before ：5200b

XX注：減肥前

- 網上找算法

	XX注：減肥中

	- max-rects-algorithm

		- 問題：

			- 大學學的算法都還給老師了

		- 解決方案：

			- 讓新進來的校招生，來實現該算法（還成功了）

				XX注：算法鬼才，XXX淘到寶了

		- 大體思路：

			- 改變圖片排列

- 優化了圖片體積 
複製代碼

XX注：減肥後

In Tiny.js we trust, in R3 we trust.

XX注：具體說了啥記不清了……就記得下圖有兩個遊戲是用 R3 實現的，圖3爬山賽我還真玩過…… 曾經有一次爲了拿第一，原本差點就到第一了，結果手滑失誤了，當時連刪除當時第一名好友的心都有了，反正又不是微信…… 這裏面刪除好友的成本很低……

基於R3實現

又回到最初的起點； WebGL 青澀的臉

XX注：凡是過往，皆爲序章。天道好輪迴，……（？走錯片場了）

回顧螞蟻莊園上線一年多歷程

線上遇到不少穩定性問題，可能與內存、CPU有關

XX注：安卓機：怪我咯？
螞蟻莊園，雖然是 2D 的，不像 3D 那樣對性能要求那麼嚴格，可是仍須要優化
9月份，開啓新版本的性能測試，
- 發現問題：用戶閃退
- 嘗試思路：WebGL 能避免閃退問題
- 實際業務場景：在一年多時間裏，經歷支付寶版本升級，支付寶內核升級，對安卓手機的支持度更好了
結論：又回到最初的起點： WebGL 青澀的臉

XX注：那些年，咱們填過的坑、改過的 bug、禿掉的頭髮……

問答環節

XX注：此處記錄的誤差可能較大，僅供參考

提問：提了一個線上的bug，螞蟻莊園排行榜，小雞來偷吃的時候，有提醒，但點擊的時候發現並無（大概是這樣，當時過於震撼第一個問題竟然是提bug，而後就記不清說了啥）

回答：由於用戶體量特別大，因此數據不必定會準，可能存在數據延遲。

提問：建議：揍小雞的功能，加個新道具：中毒卡，做用是吃飼料的速度變慢。

回答：反饋很好，後期會與產品討論。

問題：小雞幀動畫的問題，用什麼引擎or工具解決？cocos2d

回答：這些都差很少。

問題：小雞換裝的時候，每次都要從新切圖，拼裝，不順利。

回答：作了一個系統，把這些工做給視覺去作……

XX注：畢竟大公司，系統說作就作……

結語

前端職責：做爲一名前端開發，不該只知足產品需求

更高要求：對產品負責，好比：給出本身的建議；甚至能夠主導產品；

XX注：此處沒聽清楚具體的，但大體意思就是上面本身寫的吧

XX注：前端有本身的優點：邏輯思惟與感性的結合，同時不管是2C仍是2B，都是開發中離用戶最接近的一環，最容易體會到用戶的真實需求，就好比最近我參與到一個公司內部的相似 TAPD 的協做平臺，快接近開發完成時，本身就用上了，自測過程當中把此次開發任務添加爲系統中的的一個項目，而且把遇到的bug在裏面提交等等，多是這個項目最先的真實用戶了，包攬了開發、測試、普通用戶角色。

XX意見與建議：

寫這篇筆記的時候已經寫到凌晨三點多了，既然主界面點小雞的時候會有文字提示，或許能夠考慮加入一些對熬夜人士的舒適提示：好比再熬夜髮際線就和我同樣了……

之後等想到了再更新吧，也就2個月前剛從北京回上海時開始玩的 ……

XX反思：

時代變化與知識迭代

本身從事前端也5年多了，關於 webgl 一樣涉獵較少，但正如講者的經歷，他們團隊在接觸2D動畫、骨骼模型時也都是一臉蒙圈，但如他所言，咋辦？一個字：學。就是這麼簡單。
或許正如次日D2論壇裏圓心提到的，與其餘程序崗位不一樣，前端領域是一個變化很快的領域，充滿挑戰的同時，也是充滿了機遇。
結合我本身經驗，剛作前端的時候，憑着本身學校裏自學的 jQuery 、搭我的博客還有計算機科班出身的基礎和對前端的好感，入行前端，然後發現從 jQuery，jQuery UI 到 Bootstrap，到 template.js X lodash 到 Vue 全家桶再到如今的 React X Typescript X Mbox… 好像就歷來沒停下過學習的腳步……是否是很可怕？
卻想起曾經在書聲上屢次聽到的一句話：「將來十年，咱們所認爲的能力將蕩然無存」。因此解決方案就是：《Lifelong Kindergarten》，面對不肯定性的將來，保持好奇心，培養創造力、終身學習。

工程思惟、工匠精神

用一句老比喻來講，上面提到的內容或許決定了咱們職業發展的下限，講者提到的，工程思惟，工匠精神；可能則是決定了咱們職業發展的上限。
也許上面的比喻並不恰當，不過工程思惟、工匠精神的重要性想必聽了此次的分享不言而喻。說到工匠精神，個人第一反應就是這本書《旅行與讀書》，一個問題：「若是你到了一百歲生日，你要在哪一個餐廳用餐？」以及一句話：「每當你覺得單一美食最高境界過如此，總有新的經驗能讓我再度驚豔」。
而工程思惟，這個我卻是以爲很簡單：只要不斷地被坑、填坑、被坑、填坑、被坑、填坑……就行，固然，只是普通的填坑不行，要優雅地填坑。