這篇文章將會介紹過去幾年 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 來近距離觀察我們前端包管理的第一個核心元件。
譯者注：以下是原作者對自己所在公司的介紹，譯文保留。
Kenzan 是一家軟體工程和全面服務諮詢公司，提供通過數字化轉換來驅動的定製的端到端解決方案。Kenzan 結合領導力與技術專長，與合作伙伴和客戶展開合作，利用前沿技術，提供從理念到開發到交付的完整的解決方案。Kenzan 是一家技術驅動公司，專業從事應用和平臺開發、架構諮詢和數字化轉換。
Grunt，jQuery 和 webpack 是 JS 基金會 的商標.