這篇文章將會(huì)介紹過(guò)去幾年 JavaScript 開(kāi)發(fā)方面的革命性發(fā)展。

最近幾年，應(yīng)用開(kāi)發(fā)的方法論發(fā)生了翻天覆地的變化。隨著微服務(wù)架構(gòu)、云計(jì)算、單頁(yè)應(yīng)用和響應(yīng)式設(shè)計(jì)的興起和發(fā)展，在保證項(xiàng)目開(kāi)發(fā)進(jìn)度、用戶體驗(yàn)和應(yīng)用性能的同時(shí)，開(kāi)發(fā)者需要做大量的決策。如今，對(duì)于前端開(kāi)發(fā)和 JavaScript 更是如此。

為了幫助大家跟上節(jié)奏，我們先來(lái)簡(jiǎn)單了解下最近幾年 JavaScript 開(kāi)發(fā)方面的革命性發(fā)展。然后，我們會(huì)了解下前端開(kāi)發(fā)社區(qū)所面臨的一些挑戰(zhàn)和機(jī)遇。

JavaScript 的文藝復(fù)興

2009 年 NodeJS 橫空出世時(shí)，它已經(jīng)不僅僅是可以在命令行中運(yùn)行或在 server 端運(yùn)行的 JavaScript 了。NodeJS 圍繞著迫切需要解決的軟件開(kāi)發(fā)方面的問(wèn)題做出了革命性貢獻(xiàn)：針對(duì)于前端開(kāi)發(fā)者的成熟穩(wěn)定的生態(tài)系統(tǒng)。正是由于 Node 和它默認(rèn)的包管理器 npm 的存在，在應(yīng)用開(kāi)發(fā)和應(yīng)用構(gòu)建方面，JavaScript 興起了一場(chǎng)文藝復(fù)興。生態(tài)系統(tǒng)繁榮起來(lái)了，但是由于當(dāng)時(shí) Nodejs 還很年輕，所以經(jīng)常會(huì)出問(wèn)題。

讓人欣慰的是，過(guò)去幾年代碼模式和代碼規(guī)范達(dá)到了頂峰。2015 年，JavaScript 社區(qū)見(jiàn)證了 ES2015 的發(fā)布，生態(tài)系統(tǒng)再一次爆發(fā)式繁榮。下面的描述僅僅展示了 JavaScript 生態(tài)系統(tǒng)中最流行的一部分。

在 Kenzan，我們?cè)诙喾N平臺(tái)上——從瀏覽器到機(jī)頂盒——使用 JavaScript 開(kāi)發(fā)了十多年。我們目睹了前端生態(tài)系統(tǒng)的成長(zhǎng)、發(fā)展，擁抱社區(qū)所付出的所有積極的努力。從 Grunt™ 到 Gulp，從 jQuery® 到 AngularJS，從復(fù)制腳本到使用 Bower 來(lái)管理前端依賴，這些我們都經(jīng)歷過(guò)了。

JavaScript 日漸成熟，我們的開(kāi)發(fā)流程也是如此。在為客戶端開(kāi)發(fā)設(shè)計(jì)優(yōu)雅、性能穩(wěn)定、成熟的軟件應(yīng)用時(shí)，我們意識(shí)到健壯的本地開(kāi)發(fā)工作流和技術(shù)棧是我們成功的基石。在開(kāi)發(fā)過(guò)程中對(duì)可靠性、成熟性和高效性的追求讓我們感受到整個(gè)開(kāi)發(fā)環(huán)境不僅僅是一套工具的堆積，相反，好的開(kāi)發(fā)環(huán)境有助于最終產(chǎn)品的成功。

挑戰(zhàn)和機(jī)遇

伴隨著如此多的選擇、如此繁榮的生態(tài)系統(tǒng)，社區(qū)將何去何從？盡管有選擇是件好事情，但是對(duì)于社區(qū)來(lái)說(shuō)，確定從何開(kāi)始、需要什么和為什么需要是有些困難的。隨著用戶期望的增長(zhǎng)，應(yīng)用程序應(yīng)該如何運(yùn)行和表現(xiàn)（加載速度更快，運(yùn)行更順暢，響應(yīng)式，可以和原生應(yīng)用媲美等等），在開(kāi)發(fā)團(tuán)隊(duì)的生產(chǎn)力需求和該項(xiàng)目能夠在預(yù)期市場(chǎng)上推出并取得成功之間求取平衡，變得越來(lái)越具有挑戰(zhàn)性。針對(duì)于此，甚至有一個(gè)名為分析導(dǎo)致癱瘓（analysis paralysis）的術(shù)語(yǔ)：由于過(guò)于思考和不必要地使問(wèn)題復(fù)雜化使得做決策變成了一個(gè)難題。

在工程開(kāi)發(fā)周期，一味追求最新的工具和技術(shù)會(huì)制約開(kāi)發(fā)速度，阻礙重大里程碑的實(shí)現(xiàn)，帶來(lái)推遲上市和客戶流失的風(fēng)險(xiǎn)。在一定程度上，一個(gè)團(tuán)隊(duì)需要明確自己的問(wèn)題和需求，然后從可選的方案中做出決策，認(rèn)清利弊，這樣才可以更好地預(yù)測(cè)產(chǎn)品的長(zhǎng)期可行性和可維護(hù)性。

在 Kenzan，我們的經(jīng)驗(yàn)使我們能夠定義和整合一些關(guān)鍵的概念和理論，以確保我們的決策有助于解決我們?cè)陂_(kāi)發(fā)前端軟件時(shí)所預(yù)料到的挑戰(zhàn)：

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

• 提供一個(gè)穩(wěn)定成熟的、低到無(wú)需維護(hù)的（即，開(kāi)發(fā)人員不需要安裝或維護(hù)全局的開(kāi)發(fā)依賴，且具有直觀的工作流/任務(wù)流）本地開(kāi)發(fā)環(huán)境。

• 利用包管理器來(lái)管理前端構(gòu)建依賴。

• 部署優(yōu)化過(guò)的、基于功能特性的 bundles（已經(jīng)打包了HTML、CSS和JS），為用戶提供更智能、更快速的分發(fā)和下載。結(jié)合 HTTP/2，可以獲得小投入大產(chǎn)出的效果，可以大大提高用戶體驗(yàn)和產(chǎn)品性能。

新的技術(shù)棧

在這篇系列里，我們的關(guān)注點(diǎn)是前端開(kāi)發(fā)技術(shù)棧的三個(gè)部分。對(duì)于每個(gè)部分，我們將了解下我們認(rèn)為能夠?yàn)楝F(xiàn)代 JavaScript 應(yīng)用程序開(kāi)發(fā)的可靠性、高效性和可維護(hù)性提供最佳平衡的工具。

包管理器：Yarn

如何以可靠和持續(xù)重現(xiàn)的方式管理和安裝外部 vendor 或內(nèi)部包的挑戰(zhàn)，對(duì)于開(kāi)發(fā)者的工作流來(lái)說(shuō)是至關(guān)重要的。同時(shí)，維護(hù) CI/CD（持續(xù)集成/持續(xù)交付）也是至關(guān)重要的。但是，你選擇哪個(gè)包管理器來(lái)評(píng)估上述所有的功能呢？npm？jspm？Bower？CDN？或者說(shuō)你只是從網(wǎng)上復(fù)制粘貼，然后提交到版本控制器上？

我們的第一篇文章將會(huì)簡(jiǎn)單地了解下 Yarn，了解下它是如何專注于速度和提供穩(wěn)定的構(gòu)建流程的。Yarn 保證這次安裝的依賴的版本和下次安裝的依賴的版本是完全一致的。保證整個(gè)過(guò)程平滑、可靠、分布式和規(guī)?；潜匦璧?，因?yàn)槿魏瓮ｎD都會(huì)影響到開(kāi)發(fā)者編程或部署應(yīng)用的節(jié)奏。Yarn 旨在通過(guò)為 npm cli 提供快速可靠的替代方案來(lái)解決這些問(wèn)題、管理依賴，但是依然繼續(xù)使用 npm registry 來(lái)安裝公共 Node 包。而且，Yarn 是由 Facebook 來(lái)維護(hù)的，他們?cè)陂_(kāi)發(fā)這個(gè)工具的時(shí)候是有所規(guī)劃的。

應(yīng)用打包：webpack™

我們構(gòu)建的前端應(yīng)用程序，通常是由 HTML、CSS 和 JS 以及圖像和字體等二進(jìn)制格式組成的，可能難以維護(hù)，甚至?xí)咛魬?zhàn)性。那么，如何將一個(gè)代碼庫(kù)轉(zhuǎn)換為一個(gè)優(yōu)化過(guò)的、可部署的項(xiàng)目？Gulp？Grunt？Browerify？Rollup？Systemjs？這些東西都各有優(yōu)缺點(diǎn)，但是我們需要確保我們的選擇能夠?qū)崿F(xiàn)我們上述討論過(guò)的那些原則。

Webpack 是一個(gè)專門將 web 應(yīng)用打包構(gòu)建為一個(gè)優(yōu)化過(guò)的載體傳遞給用戶而打造的一款構(gòu)建工具，web 應(yīng)用可能會(huì)包含 HTML、CSS、JS、圖片、字體等等。如果我們想使用最新的語(yǔ)言特性，比如 import/export 和 class，來(lái)使我們的代碼更整潔，讓工具來(lái)打包代碼，使其對(duì)瀏覽器和用戶都進(jìn)行優(yōu)化，那么 Webpack 可以做到這些，而且還可以做的更多！

語(yǔ)言規(guī)范：TypeScript

編寫(xiě)整潔的代碼從盤古開(kāi)天辟地時(shí)起就是一個(gè)巨大的挑戰(zhàn)。JavaScript 是一種動(dòng)態(tài)、弱類型語(yǔ)言，為開(kāi)發(fā)人員提供了應(yīng)用于各種設(shè)計(jì)模式和規(guī)范的媒介?，F(xiàn)在，通過(guò)最新的 JavaScript 規(guī)范，我們可以看到編程社區(qū)更加堅(jiān)實(shí)的模式。支持使用 import/export 和 class 等功能給 JavaScript 應(yīng)用程序開(kāi)發(fā)帶來(lái)了一個(gè)基本的范式轉(zhuǎn)變，并可以確保代碼更容易編寫(xiě)、閱讀和維護(hù)。但是，編程語(yǔ)言中仍然存在著缺陷，通常隨著應(yīng)用程序的增長(zhǎng)應(yīng)用程序本身也開(kāi)始受到影響：源代碼的可維護(hù)性和完整性以及系統(tǒng)的可預(yù)測(cè)性（運(yùn)行時(shí)的應(yīng)用程序狀態(tài)）。

TypeScript 是 JavaScript 的一個(gè)超集，增加了類型安全、訪問(wèn)修飾符（私有的和公共的）和下一版 JavaScript 的新特性。強(qiáng)類型語(yǔ)言的安全性有助于代碼在應(yīng)用到瀏覽器中之前通過(guò)編譯器來(lái)驗(yàn)證代碼，促進(jìn)并強(qiáng)化架構(gòu)設(shè)計(jì)模式，這有助于縮短開(kāi)發(fā)者的開(kāi)發(fā)周期，同時(shí)也可以進(jìn)行自我記錄。這是特別有利的，因?yàn)殡S著應(yīng)用程序的增長(zhǎng)、代碼在代碼庫(kù)中發(fā)生變化，TypeScript 有助于保持回歸檢測(cè)，同時(shí)增加代碼庫(kù)的清晰度和置信度。同時(shí)，IDE 集成也是一個(gè)巨大的勝利。

如何選擇前端框架？

你可能也發(fā)現(xiàn)了，目前為止我們都在回避推薦前端框架或庫(kù)，比如 Angular 或 React。那么，現(xiàn)在我們?cè)摿牧牧恕?/p>

不同的應(yīng)用需要基于開(kāi)發(fā)團(tuán)隊(duì)經(jīng)驗(yàn)、規(guī)模、團(tuán)隊(duì)偏好以及對(duì)于響應(yīng)式編程或函數(shù)式編程等概念的熟悉程度等因素來(lái)選擇不同的開(kāi)發(fā)方式。在 Kenzan，我們堅(jiān)信，無(wú)論是 Angular2 還是 React，評(píng)估和選擇任何與 ES2015/TypeScript 兼容的庫(kù)或框架，都應(yīng)該基于當(dāng)時(shí)的開(kāi)發(fā)場(chǎng)景下特定的特征來(lái)定奪。

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

在前端框架選擇方面提供了極大靈活性的現(xiàn)代開(kāi)發(fā)技術(shù)棧

在上面的“視圖”層之下有一個(gè)共同的節(jié)點(diǎn)，我們可以通過(guò)包含一些關(guān)鍵原則的工具來(lái)進(jìn)行構(gòu)建應(yīng)用。在 Kenzan，我們認(rèn)為這個(gè)技術(shù)棧給用戶需求和開(kāi)發(fā)者體驗(yàn)都提供了一個(gè)選擇空間。這樣的結(jié)果可以使任何團(tuán)隊(duì)、任何應(yīng)用（大型應(yīng)用或者小型應(yīng)用）都受益匪淺。請(qǐng)牢記，這里介紹的工具是用于特定類型的項(xiàng)目開(kāi)發(fā)的（前端 UI 應(yīng)用程序），并不是一個(gè)可以應(yīng)用到所有應(yīng)用的一刀切方案。權(quán)衡能力、判斷力和團(tuán)隊(duì)需求應(yīng)該是決策的重要因素。

接下來(lái)要做的

到目前為止，我們回顧了過(guò)去幾年 JavaScript 復(fù)興如何導(dǎo)致了快速成熟的 JavaScript 生態(tài)系統(tǒng)的形成。我們制定了核心理念，幫助我們應(yīng)對(duì)前端軟件開(kāi)發(fā)時(shí)遇到的挑戰(zhàn)和機(jī)遇。我們概述了現(xiàn)代前端開(kāi)發(fā)技術(shù)棧的三個(gè)主要組成部分。在本系列的剩余章節(jié)中，我們將會(huì)深入了解每個(gè)部分。我們希望，最終你將能夠更好地評(píng)估你的前端應(yīng)用程序所需要的基礎(chǔ)架構(gòu)。

我們也希望你能夠以一套核心原則、范式和理念為指導(dǎo)，認(rèn)識(shí)到我們所提供的工具的價(jià)值。這個(gè)系列無(wú)疑已經(jīng)將我們自己的開(kāi)發(fā)經(jīng)驗(yàn)和開(kāi)發(fā)流程都暴露到了眾目睽睽之下，并且在提及前端工具的時(shí)候也鞏固了我們的理念。希望你能夠喜歡我們分享的這些東西，我們也隨時(shí)歡迎你的任何想法、問(wèn)題或反饋。

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

Kenzan 是一家軟件工程和全面服務(wù)咨詢公司，提供通過(guò)數(shù)字化轉(zhuǎn)換來(lái)驅(qū)動(dòng)的定制的端到端解決方案。Kenzan 結(jié)合領(lǐng)導(dǎo)力與技術(shù)專長(zhǎng)，與合作伙伴和客戶展開(kāi)合作，利用前沿技術(shù)，提供從理念到開(kāi)發(fā)到交付的完整的解決方案。Kenzan 是一家技術(shù)驅(qū)動(dòng)公司，專業(yè)從事應(yīng)用和平臺(tái)開(kāi)發(fā)、架構(gòu)咨詢和數(shù)字化轉(zhuǎn)換。