現代前端開發技術棧

這篇文章將會介紹過去幾年 JavaScript 開發方面的革命性發展。

最近幾年，應用開發的方法論發生了翻天覆地的變化。隨著微服務架構、雲計算、單頁應用和響應式設計的興起和發展，在保證項目開發進度、用戶體驗和應用性能的同時，開發者需要做大量的決策。如今，對於前端開發和 JavaScript 更是如此。

為了幫助大家跟上節奏，我們先來簡單了解下最近幾年 JavaScript 開發方面的革命性發展。然後，我們會了解下前端開發社區所面臨的一些挑戰和機遇。

加群六二三九六六八零六 免費領取前端學習資料，群里還有大神解答問題和交流

JavaScript 的文藝復興

2009 年 NodeJS 橫空出世時，它已經不僅僅是可以在命令行中運行或在 server 端運行的 JavaScript 了。NodeJS 圍繞著迫切需要解決的軟體開發方面的問題做出了革命性貢獻：針對於前端開發者的成熟穩定的生態系統。正是由於 Node 和它默認的包管理器 npm 的存在，在應用開發和應用構建方面，JavaScript 興起了一場文藝復興。生態系統繁榮起來了，但是由於當時 Nodejs 還很年輕，所以經常會出問題。

讓人欣慰的是，過去幾年代碼模式和代碼規範達到了頂峰。2015 年，JavaScript 社區見證了 ES2015 的發布，生態系統再一次爆髮式繁榮。下面的描述僅僅展示了 JavaScript 生態系統中最流行的一部分。

2017 年 JavaScript 生態系統一覽

在 Kenzan，我們在多種平台上——從瀏覽器到機頂盒——使用 JavaScript 開發了十多年。我們目睹了前端生態系統的成長、發展，擁抱社區所付出的所有積極的努力。從 Grunt 到 Gulp，從 jQuery

到 AngularJS，從複製腳本到使用 Bower 來管理前端依賴，這些我們都經歷過了。

JavaScript 日漸成熟，我們的開發流程也是如此。在為客戶端開發設計優雅、性能穩定、成熟的軟體應用時，我們意識到健壯的本地開發工作流和技術棧是我們成功的基石。在開發過程中對可靠性、成熟性和高效性的追求讓我們感受到整個開發環境不僅僅是一套工具的堆積，相反，好的開發環境有助於最終產品的成功。

挑戰和機遇

伴隨著如此多的選擇、如此繁榮的生態系統，社區將何去何從？儘管有選擇是件好事情，但是對於社區來說，確定從何開始、需要什麼和為什麼需要是有些困難的。隨著用戶期望的增長，應用程序應該如何運行和表現（載入速度更快，運行更順暢，響應式，可以和原生應用媲美等等），在開發團隊的生產力需求和該項目能夠在預期市場上推出並取得成功之間求取平衡，變得越來越具有挑戰性。針對於此，甚至有一個名為分析導致癱瘓（analysis paralysis）的術語：由於過於思考和不必要地使問題複雜化使得做決策變成了一個難題。

在工程開發周期，一味追求最新的工具和技術會制約開發速度，阻礙重大里程碑的實現，帶來推遲上市和客戶流失的風險。在一定程度上，一個團隊需要明確自己的問題和需求，然後從可選的方案中做出決策，認清利弊，這樣才可以更好地預測產品的長期可行性和可維護性。

在 Kenzan，我們的經驗使我們能夠定義和整合一些關鍵的概念和理論，以確保我們的決策有助於解決我們在開發前端軟體時所預料到的挑戰：

利用 JavaScript 語言提供的最新功能來支持更優雅、一致和可維護的代碼（比如import/export (modules)、class 和 async/await）。

提供一個穩定成熟的、低到無需維護的（即，開發人員不需要安裝或維護全局的開發依賴，且具有直觀的工作流/任務流）本地開發環境。

利用包管理器來管理前端構建依賴。

部署優化過的、基於功能特性的 bundles（已經打包了HTML、CSS和JS），為用戶提供更智能、更快速的分發和下載。結合 HTTP/2，可以獲得小投入大產出的效果，可以大大提高用戶體驗和產品性能。

新的技術棧

在這篇系列裡，我們的關注點是前端開發技術棧的三個部分。對於每個部分，我們將了解下我們認為能夠為現代 JavaScript 應用程序開發的可靠性、高效性和可維護性提供最佳平衡的工具。

包管理器：Yarn

如何以可靠和持續重現的方式管理和安裝外部 vendor 或內部包的挑戰，對於開發者的工作流來說是至關重要的。同時，維護 CI/CD（持續集成/持續交付）也是至關重要的。但是，你選擇哪個包管理器來評估上述所有的功能呢？npm？jspm？Bower？CDN？或者說你只是從網上複製粘貼，然後提交到版本控制器上？

我們的第一篇文章將會簡單地了解下 Yarn，了解下它是如何專註於速度和提供穩定的構建流程的。Yarn 保證這次安裝的依賴的版本和下次安裝的依賴的版本是完全一致的。保證整個過程平滑、可靠、分散式和規模化是必需的，因為任何停頓都會影響到開發者編程或部署應用的節奏。Yarn 旨在通過為 npm cli 提供快速可靠的替代方案來解決這些問題、管理依賴，但是依然繼續使用 npm registry 來安裝公共 Node 包。而且，Yarn 是由 Facebook 來維護的，他們在開發這個工具的時候是有所規劃的。

應用打包：webpack

我們構建的前端應用程序，通常是由 HTML、CSS 和 JS 以及圖像和字體等二進位格式組成的，可能難以維護，甚至會更具挑戰性。那麼，如何將一個代碼庫轉換為一個優化過的、可部署的項目？Gulp？Grunt？Browerify？Rollup？Systemjs？這些東西都各有優缺點，但是我們需要確保我們的選擇能夠實現我們上述討論過的那些原則。

Webpack 是一個專門將 web 應用打包構建為一個優化過的載體傳遞給用戶而打造的一款構建工具，web 應用可能會包含 HTML、CSS、JS、圖片、字體等等。如果我們想使用最新的語言特性，比如 import/export 和 class，來使我們的代碼更整潔，讓工具來打包代碼，使其對瀏覽器和用戶都進行優化，那麼 Webpack 可以做到這些，而且還可以做的更多！

語言規範：TypeScript

編寫整潔的代碼從盤古開天闢地時起就是一個巨大的挑戰。JavaScript 是一種動態、弱類型語言，為開發人員提供了應用於各種設計模式和規範的媒介。現在，通過最新的 JavaScript 規範，我們可以看到編程社區更加堅實的模式。支持使用 import/export 和 class 等功能給 JavaScript 應用程序開發帶來了一個基本的範式轉變，並可以確保代碼更容易編寫、閱讀和維護。但是，編程語言中仍然存在著缺陷，通常隨著應用程序的增長應用程序本身也開始受到影響：源代碼的可維護性和完整性以及系統的可預測性（運行時的應用程序狀態）。

TypeScript 是 JavaScript 的一個超集，增加了類型安全、訪問修飾符（私有的和公共的）和下一版 JavaScript 的新特性。強類型語言的安全性有助於代碼在應用到瀏覽器中之前通過編譯器來驗證代碼，促進並強化架構設計模式，這有助於縮短開發者的開發周期，同時也可以進行自我記錄。這是特別有利的，因為隨著應用程序的增長、代碼在代碼庫中發生變化，TypeScript 有助於保持回歸檢測，同時增加代碼庫的清晰度和置信度。同時，IDE 集成也是一個巨大的勝利。

如何選擇前端框架？

你可能也發現了，目前為止我們都在迴避推薦前端框架或庫，比如 Angular 或 React。那麼，現在我們該聊聊了。

不同的應用需要基於開發團隊經驗、規模、團隊偏好以及對於響應式編程或函數式編程等概念的熟悉程度等因素來選擇不同的開發方式。在 Kenzan，我們堅信，無論是 Angular2 還是 React，評估和選擇任何與 ES2015/TypeScript 兼容的庫或框架，都應該基於當時的開發場景下特定的特徵來定奪。

如果我們重新審視早期的項目，我們就會看到一套新的在前端框架選擇方面提供了極大靈活性的技術棧。

在前端框架選擇方面提供了極大靈活性的現代開發技術棧

在上面的「視圖」層之下有一個共同的節點，我們可以通過包含一些關鍵原則的工具來進行構建應用。在 Kenzan，我們認為這個技術棧給用戶需求和開發者體驗都提供了一個選擇空間。這樣的結果可以使任何團隊、任何應用（大型應用或者小型應用）都受益匪淺。請牢記，這裡介紹的工具是用於特定類型的項目開發的（前端 UI 應用程序），並不是一個可以應用到所有應用的一刀切方案。權衡能力、判斷力和團隊需求應該是決策的重要因素。

接下來要做的

到目前為止，我們回顧了過去幾年 JavaScript 復興如何導致了快速成熟的 JavaScript 生態系統的形成。我們制定了核心理念，幫助我們應對前端軟體開發時遇到的挑戰和機遇。我們概述了現代前端開發技術棧的三個主要組成部分。在本系列的剩餘章節中，我們將會深入了解每個部分。我們希望，最終你將能夠更好地評估你的前端應用程序所需要的基礎架構。

我們也希望你能夠以一套核心原則、範式和理念為指導，認識到我們所提供的工具的價值。這個系列無疑已經將我們自己的開發經驗和開發流程都暴露到了眾目睽睽之下，並且在提及前端工具的時候也鞏固了我們的理念。希望你能夠喜歡我們分享的這些東西，我們也隨時歡迎你的任何想法、問題或反饋。

接下來在我們的博客系列中，我們將會使用 Yarn 來近距離觀察我們前端包管理的第一個核心組件。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！