作者：花唄前端 Jothy
掰起手指頭一數，這已經是在家辦公的第六週了。
回想起我的 2020 年，是在 B 站晚會上，聽著五月天的「乾杯」開始的——原以為會開個好頭呢。
窗外雨聲吧嗒，我的心緒也跟著躁動起來，不如就藉此和大家嘮嘮我與花唄還有團隊的前端技術吧，也算個總結感想之類的雜談。
2019 年年初，我從廣州 UC 轉崗到了杭州螞蟻，所在部門是消費信貸事業部（簡稱微貸），但我一般都和人說，我的團隊是花唄借唄前端。
初見花唄
初春時節，對杭州的第一印象，是美得不像話，像畫。要知道，我可是見慣了繁花盛景的華農人，卻仍會為杭州隨處的花團錦簇讚歎不已。
初來乍到，對花唄的第一印象，是大家晨會上同步的工作內容都好充實啊，人均至少兩件事——內心 OS: 真的有那麼多事情做嗎？
的確，對於沒用過花唄，或者說只在消費的時候用花唄的人來說，花唄就只是一款消費工具。
坦白說，我也是來了花唄之後，才知道花唄還有個統一陣地，在支付寶首頁的頂部應用、或者「我的」頁面進入的「花唄頻道」，而頻道內部，有我們最關心的花唄額度、待還賬單，修改花唄還款日的操作當然也在這裡。除此之外，還有花唄不定期舉辦的營(hao)銷(yang)類(mao)活動，超值權益（如曾經的便利店周卡、現在的明星還款語音包），輕會員等等。
為什麼選擇花唄
在廣州上了四年大學，喝了四年早茶，土生土長的廣東人，為什麼要「北上」來到這個風土人情完全不同的地方呢？
廢話當然是為了看雪啊！（開玩笑
言歸正傳。首先當然是因為花唄業務好，這點毋庸置疑。貼一張花唄去年前三季度的淨利潤，可以看出，花唄業務仍呈向上勢頭。並且，這還沒算上雙十一、雙十二兩大購物節的數據！過去一年，我們也可以看見，許多友商都在做花唄的同類產品，說明整個大的市場潛力還很大，但花唄作為行業龍頭的位置仍難以撼動。畢竟消費 & 電商，阿里最在行。
雖說有技術不怕找不到好工作，但 2019 年的互聯網寒冬、2020 年疫情開局，都擺明了告訴我們，選對好業務，收入才有保障，進而安心鑽研技術。
其次，是因為團隊優秀的語雀知識庫，是我堅定想來這邊的第二個原因。微貸的知識庫，是我彼時見過最完善、最有條理、最有內容的。來花唄之前，我還仔細翻閱過多篇文檔，發現都是言之有物，不是為了記錄而記錄的。來了之後才發現，在老闆的鼓勵和引導下，這邊的同學幾乎都養成了記錄、總結的好習慣——而這，對於一個技術人的成長有著至關重要的作用。畢竟隨著畢業時間越來越久，你保持持續學習的熱情可能越來越低。
再者，是想見識螞蟻的基建。崇尚開源的螞蟻，推出了赫赫有名的 Ant Design (Mobile), AntV, Umi, 無不令人嚮往。聽聞螞蟻內部更是有著強大的基建。比起使用它們，更想身臨其境地瞭解它們背後的設計思想、設計理念，甚至是親身參與其中。
除了以上這些大的原因，還有一些比較個人的原因啦。
比如說螞蟻作為一家互聯網金融公司給人的吸引力，多學點金融知識總是好事。
我還這麼年輕，沒成家未立業，多出去走走見識見識總是好事。
離阿里總部更近了，總感覺會有些不一樣的際遇，多認識這邊的優秀同學總是好事。
以及想知道開發一款自己日常在用的產品是什麼體驗～
等等等等..
花唄借唄前端技術
聊了這麼多我個人的想法，接著說點乾貨。跟大家分享下花唄借唄的前端團隊，都用些什麼技術？
花唄架構
首先講下花唄頻道的架構。與許多前端團隊的發展史一樣，花唄最初也是普通的依賴客戶端的在線 Web 頁面，後面經過不斷的升級演進，形成了一套穩定的架構：全面擁抱 React, 引入 Node 作為中間層（BFF, Backend for Frontend），通過離線包優化加載性能，UI 上使用團隊自研（& 維護）的 Ant Design Mobile, 還引入了支付寶小程序，使得客戶端形態更加多樣化。
這個架構有什麼好處呢？以 BFF 架構為例。
BFF 架構使得前端可以服務自洽，進而帶來了高效和靈活：
- 簡化客戶端邏輯，減少⽹絡開銷
- 避免⽆意義的數據透傳
- 針對敏感信息進行過濾
- 多協議發佈
而在研發流程中，前端和 BFF 會由同⼀⼈完成，這也有利於工程師的成長：
- 使工程師具備服務端技能，拓展了知識⾯
- 聯通上下游，溝通和協調能⼒得到提升
- 項目結構清晰帶來了更合理的分⼯
- 業務⽀持更多，解決問題效率提升
除了花唄架構涉及的 H5、Node.js、小程序，團隊在其他多個領域也有涉獵。
Web 3D
提起我們團隊的 Web 3D, 那可了不得，容我叉會兒腰先。
我們團隊一開始是為了提升互動類產品的趣味性和商業轉化數據，開始儲備 Web 3D 圖形技術的開發能力。
我們做了一系列的技術調研，但社區方案要麼不是「移動優先（Mobile First）」考慮，要麼編輯器功能很弱，並不滿足實際開發的需求；而基於的 Native 的方案上手成本太高，導出產物又太大（幾百 M），並不適合 Web 環境。
後來，我們決定深耕 3D 圖形技術，打造出了面向螞蟻金服前端工程師、且適應螞蟻未來業務發展的 3D 技術產品：Oasis 3D. 它使用微內核架構，支持組件式擴展、glTF 2.0 及配套 PBR 材質、以及豐富多樣的動畫系統（骨骼動畫、粒子動畫、Shader 動畫及幀動畫）。
此外，我們還結合美術流程和螞蟻金服的前端研發環境，探索出一條高效低成本的在線工作流——Oasis 3D 工作流，它不僅滿足了互動營銷業務場景的需求，而且為工業產品展示、數據可視化等業務場景提供可靠的渲染能力。
Oasis 3D 還登上了 D2 的互動展臺，以及作為 SEE Conf 主題宣講，具體可以戳「螞蟻金服 Web 3D 技術探索之路 - SEE Conf」瞭解。
瀏覽器實時構建
如果你參加過第十四屆 D2, 那麼對於這個技術你一定不陌生，因為講師就是來自我們團隊的玄寂小哥哥！
玄寂在我們團隊負責一個重要項目的研發，這個項目的內部代號是 Gravity, 它是一套完全基於瀏覽器技術實現的預覽和調試解決方案。
Gravity 通過合理的運行時代碼編譯模式，完整的基於瀏覽器的文件系統，輕巧的包管理模式，讓一整個前端的研發模式被完整的移植到了瀏覽器內。正因為完全基於瀏覽器技術，所以 Gravity 非常輕量化，對服務端 0 要求，對用戶 0 配置，任何可視化編輯器，和 Cloud IDE 都可以基於 Gravity 的插件能力快速集成。
玄寂相信 Cloud IDE 一定是未來，而面向 Web 的架構一定是當務之急。感興趣可以戳「基於瀏覽器的實時構建探索之路」瞭解更多。
（題外話：為 Cloud IDE 打個 call! 最近疫情在家辦公，深感 Cloud IDE 的好用！各種環境無需自己搭建，NPM 包讓內存不再吃緊，隨時隨地打開項目即可開發）
新技術引入
有人覺得業務體量與技術更迭是不可調和的，但花唄不這麼看。前端技術不斷更新迭代，花唄當然也選擇與時俱進，這一點隨處可以體現。
2019 年 Serverless 發展如火如荼，花唄也在雙十一率先落地了 SFF(Serverless for Frontend) 的首個應用，併成功扛住了貓晚的巨大流量。
React Hooks 是不少人的心頭好，但大型項目不經過仔細調研，不會輕易用上。這對於喜歡嘗試新技術的程序員來說，真是手癢！花唄有不少工程師也對 React Hooks 喜愛有加，內部有過多次調研與分享，並在實際項目中落地。還有同學深入研究總結，讓人一篇文章上手 React Hooks.
團隊的各個技術方向小組，每個月都會定期分享小組最新研究的技術/方向，我有時候也會選擇一些自己感興趣的參與，拓寬自己的知識面。
All in all
來花唄的這一年，除了技術上的長進，業務能力的提升，我還「跨界」參加了集團前端委員會、D2、SEE Conf 的組織與宣傳，也在打造我們團隊自己的品牌，感謝我的老闆讓我發現了自己身上更多的可能。
我的另一個感受是事兒真多，也真累，但大多時候累並快樂著，因為看到了自己的成長，多吃吃苦也是好事
最後想學習編程又沒有學習資料的話，可以關注我的頭條號並在後臺私信我:前端，即可免費獲取。
閱讀更多 web小學員 的文章
