Web Notes
1.0.0
在線閱讀>>
代碼案例· 參考資料
Web 開發，入門易，深度難，分為初窺門徑、登堂入室、融會貫通等階段，如果您是首次閱讀筆者的系列文章，建議前往某熊的技術之路指北☯以做整體了解。在本系列中，筆者致力於探索，如何有效地提升團隊的研發效能，在整個產品迭代的生命週期中都能及時、可靠地完成交付；同時能夠控制住系統整體的複雜性，並且不斷地、持續地進行系統的性能與體驗優化。
回顧數十年間Web 技術與生態的燦爛變遷，我們親身經歷著激動人心的變革，也往往會陷入選擇的迷茫。隨著瀏覽器版本的革新與硬件性能的提升，Web 前端開發進入了高歌猛進，日新月異的時代，無數的前端開發框架、技術體系爭妍鬥艷，讓開發者們陷入困惑，乃至於無所適從。特別是隨著現代Web 前端框架（Angular、React、Vue.js）的出現，JavaScript、CSS、HTML 等語言特性的提升，工程化、跨平台、微前端、大前端、BFF 等理論概念的提出，Web 前端開發的技術棧、社區也是不斷豐富完善。地位。而所謂現代化的前端工程師，他們通常需要運用大量的專業知識來解決工程化問題，包括如何將項目進行模塊化，如何設計組件間的交互，如何提高可複用性，如何提升打包效率，優化瀏覽器渲染性能，等等；不再像以前，只需要HTML/CSS/JS 一個套路來開發靜態頁面。
總體而言，任何一個編程生態都會經曆三個階段，首先是原始時期，由於需要在語言與基礎的API 上進行擴充，這個階段會催生大量的輔助工具。第二個階段，隨著做的東西的複雜化，需要更多的組織，會引入大量的設計模式啊，架構模式的概念，這個階段會催生大量的框架。第三個階段，隨著需求的進一步複雜與團隊的擴充，就進入了工程化的階段，各類分層MVC，MVP，MVVM 之類，可視化開發，自動化測試，團隊協同系統應運而生。
有趣的是，當我們站在不同的時間點，這三個階段的劃分也是不一致的，以目前筆者的認知而言，劃分為了：模板渲染、前後端分離與單頁應用，工程化與微前端，大前端與Serverless 這三個不同的階段。
當然，每個小階段都會伴隨著新框架、新工具的出現：
Web 前端開發可以追溯於1991 年蒂姆·伯納斯-李公開提及HTML 描述，而後1999 年W3C 發布HTML4 標準，這個階段主要是B/S 架構，沒有所謂的前端開發概念，此時多是基於模板渲染的靜態頁面。主要就是通過JSP、PHP 等技術寫一些動態模板，然後通過Web Server 將模板解析成一個個HTML 文件，瀏覽器只負責渲染這些HTML 文件。這個階段還沒有前後端的分工，通常是後端工程師順便寫了前端頁面。
接下來的幾年間隨著Ajax 技術與REST 等架構標準的提出，前後端分離與富客戶端的概念日漸為人認同，我們需要在語言與基礎的API 上進行擴充，這個階段出現了以jQuery 為代表的一系列前端輔助工具。而基於AJAX，前後端也開啟了分離之路，前後端分離架構逐步流行。前端負責界面和交互，後端負責業務邏輯的處理。前後端通過接口進行數據交互。我們也不再需要在各個後端語言裡面寫著難以維護的HTML。網頁的複雜度也由後端的Web Server 轉向了瀏覽器端的JavaScript。
2009 年以來，智能手機開發普及，移動端大浪潮勢不可擋，SPA 單頁應用的設計理念也大行其道，相關聯的前端模塊化、組件化、響應式開發、混合式開發等等技術需求甚為迫切。特別是2009 年Node.js 的出現，還有伴生的CommonJS 規範和npm 包管理機制，催生了Angular 1、Ionic 等一系列優秀的框架以及AMD、CMD、UMD 與RequireJS、SeaJS 等模塊標準與Grunt, Gulp 這樣的工具，前端工程師也成為了專門的開發領域，擁有獨立於後端的技術體係與架構模式。
以前我們只需要簡單的HTML 和JS 就夠了，現在我們得用包管理器自動下載第三方包，用模塊管理器（module bundler）創建單個腳本文件，用翻譯編譯器（transpiler）應用新的JavaScript 功能，還要用任務運行器（task runner）自動執行各個構建步驟。
近兩年間隨著Web 應用複雜度的提升、團隊人員的擴充、用戶對於頁面交互友好與性能優化的需求，我們需要更加優秀靈活的開發框架來協助我們更好的完成前端開發。這個階段湧現出了很多關注點相對集中、設計理念更為優秀的框架，譬如React、Vue.js、Angular 2 等組件框架允許我們以聲明式編程來替代以DOM 操作為核心的命令式編程，加快了組件的開發速度，並且增強了組件的可複用性與可組合性。而遵循函數式編程的Redux 與借鑒了響應式編程理念的MobX 都是非常不錯的狀態管理輔助框架，輔助開發者將業務邏輯與視圖渲染剝離，更為合理地劃分項目結構，更好地貫徹單一職責原則與提升代碼的可維護性。在項目構建工具上，以Grunt、Gulp 為代表的任務運行管理與以Webpack、Rollup、JSPM 為代表的項目打包工具各領風騷，幫助開發者更好的搭建前端構建流程，自動化地進行預處理、異步加載、Polyfill、壓縮等操作。
工具鏈的成熟，也帶來了工程化的需求，業務引領技術，技術驅動業務。前端工程化是根據具體的業務特點，將前端的開發流程、技術、工具、經驗等規範化、標準化。它的目的是讓前端開發能夠自成體系，最大程度地提高前端工程師的開發效率，降低技術選型、前後端聯調等帶來的協調溝通成本。
應用自身的邏輯複雜度以及工程化的加載、組合複雜度的提升，為前端的性能也帶來了一定的挑戰。譬如React 等組件框架在頁面初始化的時候會有白屏時間，對於SEO 也並不友好；前端開始嘗試以服務端渲染解決這個問題，基於React、Vue 等實現的同構應用來替代過去的JSP、PHP 等服務端語言的模板，還是以完整的HTML 文檔的形式返回給瀏覽器。
著眼全棧，經過多年的發展，Node.js 已經完全具備了支撐企業級應用的能力，在Lowe、Netflix、阿里等國內外諸多的公司中有著海量的實踐；並且Node.js 天然地語言親和性，使開發人員更易承擔全棧的職責。隨著微服務架構以及雲原生，Serverless 等概念的興起，後端的接口漸漸變得原子性，微服務的接口也不再直接面向頁面，前端的調用變得複雜了。於是以GraphQL 為代表的BFF（Backend For Frontend）理念應運而生，在微服務和前端中間，加了一個BFF 層，由BFF 對接口進行聚合、裁剪後，再輸出給前端。
BFF 在解決接口協調與聚合問題的同時，也承載了原本後端的並發壓力，這也給前端工程師帶來了很多的開發與運維壓力。 Serverless 則是能夠緩解這種問題，我們可以使用函數來實現接口的聚合裁剪；前端對於BFF 的請求被轉化為對FaaS 的HTTP 觸發器的觸發，這個函數中來實現針對該請求的業務邏輯，比如調用多個微服務獲取數據，然後再將處理結果返回給前端。這樣運維的壓力，就由以往的BFF Server 轉向了FaaS 服務，前端再也不用關心服務器了。 Serverless 同樣也能夠應用到服務端渲染中，將以往的每個路由，都拆分為一個個函數，再在FaaS 上部署對應的函數。這樣用戶請求的path，對應的就是每個單獨的函數。通過這種方式，就將運維操作轉移到了FaaS 平台，前端做服務端渲染，就不用再關心服務端程序的運維部署了。此外，像微信、支付寶等小程序也提供了符合Serverless 理念的雲開發平台，賦能業務前端迅速迭代。
更多介紹與導覽參閱INTRODUCTION。
中文版本| English Version
如果你是頗有經驗的開發者，想要了解前端工程化與架構方面的知識，那麼建議閱讀前端演化一文。
如果您對於JavaScript 基礎語法尚不完全了解，那麼建議您首先瀏覽《現代JavaScript 語法基礎與工程實踐》 以了解基礎的JavaScript 語法及實踐應用。
如果你希望了解Node.js 全棧開發，可以參閱Node-Notes。
在了解了理論知識之後，建議前往wx-fe 查閱筆者所有的前端相關的開源項目。
筆者所有文章遵循知識共享署名- 非商業性使用- 禁止演繹4.0 國際許可協議，歡迎轉載，尊重版權。您還可以前往NGTE Books 主頁瀏覽包含知識體系、編程語言、軟件工程、模式與架構、Web 與大前端、服務端開發實踐與工程架構、分佈式基礎架構、人工智能與深度學習、產品運營與創業等多類目的書籍列表：
