回顧 2018 年的前端屆，筆者看到的是 PWA、SSR、AMP、Web Component & Polymer、GraphQL 等半生不熟的技術，其中最有創新點的大概就是 Truffle（區塊鍊）和 TFJS（TensorFlow.js）了。
到了 2019 年 ，當數 Serverless 的發展最為迅速。那麼，當下去分析 Serverless 背景下的前端困境就顯得尤為重要——從自身痛點出發，才能更好地賦能前端。
本文将從 Serverless 背景下的前端困境入手分析，結合具體的技術點，最後給出解決方案相關的建議。
Serverless 背景下的前端困境
國内各個公司在 Serverless 投入很大，騰訊和阿裡雲都鉚足了勁在上面發力，提出了各自的解決方案，騰訊推出了 Serverless 2.0，以及前段時間阿裡雲推出的預留模式，都是對 Serverless 越來越重視的表現。
阿裡近期在做前端研發更新，為拓展前端的邊界和職能，嘗試做了一次和 Serverless 的結合，希望能将傳統應用快速遷移到 Serverless 體系，讓大家都能享受到 Serverless 的紅利。
Serverless 技術已經來臨，Web 應用是 Serverless 技術一個重要的場景。
應該以什麼姿态和角色去迎接新的技術變革，是每個端開發需要思考的問題。
我們可能會有如下思考：
- Serverless 能給我們帶來多大價值？
- 有沒有符合 Serverless 應用的開發架構？
- Serverless 下前端傳統的渲染，該如何做？
- Serverless 應用的開發模式會不會和過去的開發模式存在很大的差異？
為了讓 Web 應用在 Serverless 場景下，保持甚至超越傳統開發體驗，我們做了許多探索。我們嘗試将傳統 Web 應用架構遷移到 Serverless 平台上，比如 Egg.js 等架構，雖然與傳統開發體驗相差不大，但是也帶來了不少問題，例如不支援跨雲平台，還需要針對 Serverless 特性做好适配，相關的工具也沒法深度适配 Web 應用架構這種特定場景。
FaaS 架構研發模式如何更新
Node.js Web 的浪潮，把前端變為了全棧開發工程師，體會到了傳統前後端一體應用的魅力，也擴充了前端的邊界，而 Serverless 則成了工程師們從 DevOps 到 NoOps 的另一次契機，新的革命即将到來。
傳統應用開發、調試、部署的整個研發流程，在新的機會下需要模式更新，也需要從工具鍊、架構、到整個釋出和灰階以及復原流程，整體來重塑原有的體系。
面對基建成本和技術革新，阿裡集團利用傳統的 Node.js 技術棧的經驗積累，演進出全新的 midway-faas 架構，結合完整的工具鍊從整個研發流程，調試，釋出着手，通過平台化，工具化，将整個工程從頭遷移到 Serverless 新體系。
為此，阿裡開始了「前端研發更新」這個大項目。
整個前端研發模式更新的目的有兩個，一為「前端賦能」，二為「提效」。所謂的「前端賦能」，是因為我們希望能夠打破現有的技術壁壘，朝着更底層、面向資料的地方去深入探索，在這之中可以從面向 UI 和視圖本身變得更加了解業務，從更全面的視角來了解現有的體系。而「前端提效」，則是希望讓 Serverless，用更輕量化的方式進行業務研發，降低整個前端參與業務傳遞的門檻，同時，在開發期間，也能減少人力總成本，讓前端減負，業務小步快跑成為可能。
概覽如下，使用者代碼橋接函數和 BaaS 服務，其中 HTTP 網關和函數運作時、容器是三大核心技術。
基于現有生态，如何實作函數運作時，其中也是有很多故事的。
Node.js 基礎團隊的使命，就是為阿裡集團 Node.js 生态提供各種基礎能力，包括但不限于架構，中間件包等，而在 Serverless 體系中，我們要負責架構、工具鍊、運作時、釋出系統，同時也需要和周邊的網關，監控系統等對接。
渲染層如何做
從 beidou、Next.js、Egg-react-ssr 到 Umi SSR, 可以看出服務端渲染是很重要的端側渲染組成部分。無論如何，React SSR 都是依賴 Node.js Web 應用的。那麼，在 Serverless 時代，基于函數即服務（Functions as a Service，簡寫為FaaS）做 API 開發相關是非常簡單的，因為它 1. 無服務，不需要管運維工作；2. 代碼隻關心函數粒度，面向 API 程式設計，降低建構複雜度；3. 可擴充。
那麼，在 FaaS 下，如何做好渲染層呢？直出 HTML，做 CSR 很明顯是太簡單了，其實我們可以做的更多，筆者目前能想到的 Serverless 時代的渲染層具有如下特點：
- 采用 Next.js/egg-react-ssr 寫法，實作用戶端渲染和服務端渲染統一
- 采用 Umi SSR 建構，生成獨立 umi.server.js 做法，做到渲染
- 采用 Umi 做法，内置 Webpack 和 React, 簡化開發，隻在建構時區分用戶端渲染和服務端渲染，做好和 CDN 的搭檔，做好優雅降級，保證穩定性
- 結合 FaaS API，做好渲染內建
為了示範 Serverless 下渲染層實作原理，下面會進行簡要說明。在 Serverless 雲函數裡，一般會有 server.yml 作為配置檔案，這裡以 lamda 為例子。
通過這個配置，我們可以看出函數 app.server 對應的 HTTP 請求路徑是 '/'，這個配置其實描述的就是路由資訊。對應的 app.server 函數實作如下圖。
通過提供 ctx.ssrRender 方法，讀取 dist 目錄下的 Page.server.js 完成服務端渲染。
核心要點：
- ssrRender 方法比較容易實作
- 采用類似 Umi SSR 的方式，将源碼打包到 Page.server.js 檔案中
- 在釋出的時候，将配置，app.server 函數和 Page.server.js 等檔案上傳到 Serverless 運作環境即可
綜上所述，我們大緻可以推出架構更新的四大階段。
- 在 CSR 中，開發者需要關心 React 和 Webpack
- 在 SSR 中，開發者需要關心 React、Webpack 和 Egg.js
- 在 Umi SSR 同構中，開發者需要關心 React 和 Egg.js，由于 Umi 内置了 Webpack, 開發者基本不需要關注 Webpack
- 未來，基于 FaaS 的渲染層，開發者隻需要關心 React, 不需要關心 Webpack 和 Egg.js
在這四個階段中，依次出現了 CSR 和 SSR, 之後在同構實踐中，對開發者要求要更高，甚至是全棧。所有這些經驗和最佳實踐的積累，沉澱出了更簡單的開發方式，在未來 Serverless 環境下，希望前端更加簡單、高效。
Serverless 時代，我們還能幹點什麼
Serverless 是一個颠覆性的演進，與之伴随而來的，是對未知的探索，這既是機遇也是挑戰。
1）自動化
目前看，從申請域名，到網關，到叢集的鍊路，離「無運維」還有許多優化空間。
2）面向頁面開發，會導緻頁面管理成本增加
頁面和 API 都以函數的形式存在，其維護成本比微服務時還要高
3）多種技術棧的融合
像早年的 Portal，現在的微前端，其實都是在解決「Widget 或元件的複用和配置」問題。
一個大型應用被“碎片化”後，還要保持“一目了然”。它由哪些子應用構成、運作狀态、異常監控、代碼健康度、甚至一些營運資料的監控，就變得非常必要了。
簡化開發，賦能業務，為大中台，小前台貢獻應變能力，筆者暢想的未來是這樣的：
- 元件：開發隻寫元件
- 頁面：配置出來
- 系統：內建出來
寄語未來前端
通過阿裡前端的四大方向：Serverless、搭建、智能化、IDE, 我們可以看到未來對前端要求會越來越高，複合型人才（比如掌握算法），需要跨界（影響力），國際化，生在這樣的時代是每一個前端的機遇和榮耀。
希望前端能夠有更強的業務 Owner 意識，勇于創新，打破前端自身的局限和壁壘。無論 Serverless 還是智能化，我們都在突破，引領潮流。
本屆 D2 Serverless 專場
其實，Serverless 背景下的前端困境對應的解決方案，業界都在探索，這是一條開拓的路，本次 D2 特地設定了 Serverless 專場，邀請國際國内知名一線專家，共同探讨，目前已入駐以下主題，邀你共賞。
1）Serverless 賦能前端應用開發
- 講師：Matheus Fernandes & Shu Ding, 海外嘉賓，來自業界踐行 Serverless 的先驅、知名 Serverless 解決方案提供商 ZEIT 公司。Matheus Fernandes 是 ZEIT 的技術負責人，知名的産品包括 Next.js 和 ZEIT now, 他幫助團隊快速發展和業務的全球擴張。對開源、網絡、CDN加速和攝影充滿熱情。為了追逐夢想，他辍學了，環球旅行和寫代碼，作為 ZEIT 的技術負責人，他兩項愛好都實作了。Shu Ding 是 ZEIT 的産品設計師，他參與深受全球使用者的喜愛的 Next.js、zeit.co 管理背景、SWR 等産品的設計。從高中開始程式設計，花了 4 年在算法比賽上。複旦大學計算機系大學畢業，目前是一名平面設計師和前端開發者，在上海工作。他建立了 inns.studio 以及其他很多項目。
- 内容摘要：ZEIT 是如何應用 Serverless 思想，借助前端實作 API 目錄以及 Serverless target 等功能，在無額外開發成本的情況下，大幅度提升應用的可用性與伸縮性的？ 在本次分享中，我們将通過分析實際的案例，去了解 Serverless 在開發場景背後的工作方式，一起感受如何利用 Serverless 的思想和能力去編寫功能強大的前端應用程式。
2）前端新思路：元件即服務和 Serverless SSR 實踐
- 講師：狼叔，來自阿裡巴巴，花名狼叔，前去哪兒前端架構師，StuQ 明星講師，Node.js 技術布道者。曾就職于新浪、網秦，曾做過前端、後端、資料分析、移動端負責人、做過首席架構師、技術總監，全棧技術實踐者，目前主要關注技術架構和團隊梯隊建設方向。
- 内容摘要：今天，做 Node.js 的運維和高并發依然是富有挑戰的，為了提效，我們将架構演進為頁面即服務，可是粒度還不夠，借着雲原生和 Serverless 大潮，無運維、輕松擴充，是對前端極大的誘惑。那麼，基于 FaaS 之上，前端有哪些可能性呢？2019 年上半年，我在阿裡巴巴經濟體前端委員會推進的 Serverless 研發體系共建項目中負責 Serverless SSR 的研究，将 CSR、SSR、邊緣渲染進行整合和嘗試，提出元件即服務的概念（Component as Service），試圖結合Faas, 做出更簡單的開發方式。本次分享主要圍繞 Serverless SSR 和它的演進過程、背後思考為主。
3）Serverless 下函數應用架構更新
- 講師：陳仲寅，來自阿裡巴巴，花名張挺，長期耕耘于 Node.js 技術棧，為淘寶和阿裡其他BU提供架構和中間件解決方案，負責淘寶整體的 Node.js 體系基礎建設，解決全棧開發的各種維護和穩定性問題，也同時負責 MidwayJs 系列内部和社群開源産品，包括 Midway、Sandbox、Pandora、Injection等開源産品的開發、維護等工作。
-
内容摘要：Node.js Web 的浪潮，讓前端變為了全棧開發工程師，體會到了傳統前後端一體應用的魅力，也擴充了前端的邊界，而 Serverless 則成了工程師們從 DevOps 到 NoOps 的另一次契機，一次革命。
傳統的應用開發、調試、部署的整個研發流程，在新的機會下需要模式更新，也需要整體重塑原有的體系，從工具鍊、架構、到整個釋出和灰階以及復原流程。
本次分享主要圍繞 Serverless 體系下，使用全新的架構、工具鍊和研發模式，講解在新的體系中進行業務快速疊代，研發更新以及多場景，多環境的問題。
4）基于 FaaS 實作 NPM CDN 同步
- 講師：張立理，就職于百度，現任資深前端工程師 & 百度 ECOMFE、FE-CMC 主席一職。作為行業享有盛名的大咖，張立理行事低調，對工作熱情飽滿，多次受邀作為嘉賓出席各類大會，并發表了精彩演講。
- 内容摘要：NPM 是 JavaScript 最權威的依賴倉庫，通過 CDN 通路 NPM 任意包内的檔案有助于快速建構前端應用，UNPKG 和 jsDelivr 是國際上比較知名的 NPM CDN 提供商，本次分享将介紹通過基于雲服務（包括函數雲、對象存儲、CDN、容器引擎）和 Terraform 架構建構一個高彈性、高穩定性、免運維的 NPM 到 CDN 的同步服務