如果你近幾年一直在從事前端開(kāi)發(fā)，你一定知道已經(jīng)存在太多的東西讓人難以做出選擇。新的框架和庫隨時(shí)都在涌現。全世界的公司都面臨著(zhù)一大難題：為了實(shí)現數字化，到底該選擇什么樣的技術(shù)棧才算正確。除了面對這個(gè)巨大的挑戰，同時(shí)還要緊跟最新的技術(shù)趨勢。

即使對某些專(zhuān)注于前端的開(kāi)發(fā)人員，也存在選擇個(gè)人技術(shù)棧的時(shí)候。而這個(gè)事情可能還優(yōu)先于選擇正確或錯誤的方法來(lái)解決問(wèn)題。

隨著(zhù)競爭的演化，最快、最高性能和最易用的框架和庫被不斷的發(fā)明出來(lái)，人們不禁想問(wèn)：JavaScript 世界何時(shí)能歸集到幾個(gè)主流技術(shù)棧上來(lái)？JavaScript 未來(lái)是什么樣子？AI 對這項技術(shù)到底會(huì )產(chǎn)生什么樣的推動(dòng)？

JavaScript 的背景和流行度

JavaScript 自 1995 年誕生以來(lái)，已經(jīng)成為 Web 領(lǐng)域最受歡迎的語(yǔ)言。過(guò)去十年中，JS 語(yǔ)言的使用率一直在增長(cháng)，未見(jiàn)衰落。

根據 StackOverflow 的年度調查，69.8% 的受訪(fǎng)者和 71.5% 的專(zhuān)業(yè)開(kāi)發(fā)者使用 JavaScript。隨著(zhù)可以使用 Web 的流行設備越來(lái)越多，爭奪最佳“一站式”解決方案的競爭愈演愈烈。這對于了解 JS 或者正準備學(xué) JS 的人來(lái)說(shuō)是個(gè)非常好的消息。而對于那些沒(méi)接觸過(guò)前端的人來(lái)說(shuō)，我建議他們去作些嘗試以獲得（哪怕最基本的）JS 經(jīng)驗。 下面這句話(huà)概括得非常好：

“可以預見(jiàn)，這 [JavaScript] 可能是開(kāi)發(fā)者最需要提升的技能”

框架和 Web 組件 —— 可預見(jiàn)的未來(lái)

經(jīng)歷了過(guò)近十年的框架之戰，脫穎而出的“三大框架”開(kāi)始穩步引領(lǐng)未來(lái)。React、Vue 和 Angluar 目前最重要的 JavaScript 框架和庫。我會(huì )在本文中按照他們的流行程度排序，并確信他們在未來(lái)繼續領(lǐng)先。

React

React 由 Facebook 創(chuàng )建并長(cháng)期支持，深受開(kāi)發(fā)者喜愛(ài)，可以用來(lái)構建和維護像 POC 這樣的產(chǎn)品或大型企業(yè)應用產(chǎn)品。目前很多像 Instagram、Netflix、沃爾瑪、WhatsApp 這樣領(lǐng)先公司都在使用 React。React 的優(yōu)勢在于其基于組件的構架、受益于虛擬 DOM 的超強性能，極快的學(xué)習曲線(xiàn)等。它有著(zhù)龐大的社區支持，在開(kāi)者中非常流行。

Vue

Vue 由 尤雨溪（Evan You）創(chuàng )建，受到阿里巴巴采用。人們一旦發(fā)現 Vue，就會(huì )迅速喜歡上它。發(fā)生這種情況的原因在于，Vue 最初就設計來(lái)幫助開(kāi)發(fā)經(jīng)驗不足的程序員。其目的是幫助他們專(zhuān)注于創(chuàng )建功能界面，而不需要太操心代碼。這使得 Vue 門(mén)檻極低，非常容易學(xué)習。此外，尤雨溪，前谷歌員工，發(fā)現 Angular 中存在一些繁瑣或者可以改進(jìn)的東西，便把這些改進(jìn)應用到了 Vue 當中。當 React 發(fā)布的時(shí)候，他也學(xué)習 React 并針對其缺點(diǎn)對 Vue 進(jìn)行了改善，使 Vue 逐漸發(fā)展成為了現在最具前途的框架之一。Vue 支持聲明式渲染，異步 DOM 更新，雙向數據綁定，嚴格遵守 Web 組件規范，并簡(jiǎn)單集成了 HTML 模板。

Angular

由谷歌構建和支持，并應用于Youtube，Paypal，Google Maps等。目前，Angular已經(jīng)是企業(yè)實(shí)施的首選。最新的發(fā)布版Angular 6，帶來(lái)了兩個(gè)主要亮點(diǎn)。使用lvy渲染器的promise類(lèi)可加快在應用程序中的渲染速度，并且允許在A(yíng)ngular之外使用Angular組件的元素，例如在Vue或React中。使用Elements包，你可以創(chuàng )建Angular組件，將它們發(fā)布成HTML網(wǎng)頁(yè)可立即使用的Web組件。對于面向對象程序設計的后端和Java后端來(lái)說(shuō)，Anglar更易于學(xué)習。

除框架外，我們最近看到了web組件的興起，但是它們到底是什么？為什么會(huì )這么重要？

在一個(gè)正遭受框架疲勞的社區，Web組件是自HTML5以來(lái)獲得能力的最重要的事情。但是它們是什么？‘Web組件是一個(gè)新的強大的W3C 標準，已經(jīng)被所有的主流瀏覽器認可而且可以在我們的App中使用（需要使用填充工具）’。它附加到DOM中，可以減小web程序，可重用和模塊化組件，解耦任何框架，但卻是純粹使用HTML，CSS和JS來(lái)構建的。

Web組件具有較小的包，無(wú)須發(fā)送自定義的組件實(shí)現。它們的可重用性受到稱(chēng)贊。由于web組件內置于瀏覽器中，對瀏覽器原生支持，所以它們可被用于任何地方，任何框架，或根本沒(méi)有框架的地方。最后，它們因簡(jiǎn)潔而受到喜愛(ài)。如果你不想的話(huà)，你可以不需要去學(xué)習一些框架。如果你已經(jīng)有JS和DOM API的基礎，那么你就可以使用web組件了。

lonic/Stencil

Ionic是一個(gè)功能強大的框架無(wú)關(guān)庫，用于構建可直接訪(fǎng)問(wèn)本機設備功能的移動(dòng)和漸進(jìn)式Web應用程序。隨著(zhù)最新的lonic 4的發(fā)布，通過(guò)允許開(kāi)發(fā)人員在A(yíng)ngular之外使用它，Stencil的引入將會(huì )使其更強大和更高效。怎么做到的？Stencil是一個(gè)Web組件編譯器，可以構建快速而小巧的現代Web組件。通過(guò)使用Web組件而不是像React或Angular這種特定于框架的組件來(lái)創(chuàng )建UI組件，我們可以在任何支持它們的框架中重用這些組件，或者單獨使用它們。

Polymer

Polymer是一個(gè)由Google開(kāi)發(fā)的JS庫，用于Google Earth 和 Youtube。它使用web組件來(lái)構建web應用，并提供將封裝的JS， CSS， 和 HTML組裝為自定義元素的能力，它是利用瀏覽器的原生技術(shù)，而不是依賴(lài)于JS庫。

然而， Polymer 還沒(méi)有成熟，而且存在一些問(wèn)題。第一，因為它生成DOM，所以任何交互或者DOM操作都會(huì )使用基本JavaScript， 這將增加更多的模板代碼，導致組織和管理大型應用變得更具有挑戰性。這也是一個(gè)提出React和其他庫的原因。第二，Polymer 為字符串中的變量創(chuàng )建占位符，以此來(lái)提升性能，同時(shí)還解決了將其轉換成一個(gè)字符串的問(wèn)題，雖然只是將它轉成一個(gè)對象。但是因為這些占位符不屬于Web組件規范，如果使用了這些占位符，就已經(jīng)將應用直接捆綁到 Polymer 上了。最后幾個(gè)問(wèn)題是：下載整個(gè)庫和Polyfills，而且缺乏服務(wù)端渲染。

AI會(huì )怎樣改變前端開(kāi)發(fā)——在遙遠（或者可能并不遙遠）的未來(lái)

除了庫和框架，AI和機器學(xué)習會(huì )如何影響前端開(kāi)發(fā)？這是很多人提出的問(wèn)題，但是已經(jīng)有少數公司率先提出了這個(gè)問(wèn)題。他們使用了不同的技術(shù)，期望能顛覆一個(gè)經(jīng)歷了不同框架和庫周期的領(lǐng)域。方法分為兩種。

一種是旨在通過(guò)從線(xiàn)框圖和Sketch文件生成初始代碼或生成整個(gè)前端輸出來(lái)幫助開(kāi)發(fā)者。它幫助開(kāi)發(fā)者將注意力放到更重要的開(kāi)發(fā)部分，例如應用邏輯和構建特性。它加速了設計階段和修改的迭代。這種公司包括從Airbnb ，它最近構建的AI可以將sketch文件轉換成源碼，到Uizard，它使用深度學(xué)習/ML(神經(jīng)網(wǎng)絡(luò ))來(lái)訓練對圖形界面快照然后將其翻譯為一些源碼。使用Uizard令人印象深刻的是；一個(gè)文本到GUI渲染器可以運行在多個(gè)平臺如iOS， Android 和 基于Web的界面，而且算法迄今為止精確度達到了77%。

然后是微軟的Ink to Code應用，也是一個(gè)對它的嘗試，在Windows 商店提供了軟件的免費下載。最后，Supernova，是一個(gè)創(chuàng )業(yè)公司，其使命就是建立一個(gè)工具來(lái)加快手機設計師和開(kāi)發(fā)者的應用開(kāi)發(fā)流程，Supernova Sutdio的macOS應用，可以將Sketch創(chuàng )建的手機app設計自動(dòng)轉換到原生UI代碼，旨在彌補原型設計和前端開(kāi)發(fā)之間的差距。

另一種是將AI更進(jìn)一步，讓機器來(lái)做整個(gè)前端的編碼。BAYOU，是一個(gè)由軍方和Google資助的Rice大學(xué)項目，它使用了一個(gè)深度學(xué)習工具，從根本上來(lái)說(shuō)就像一個(gè)代碼的搜索引擎。通過(guò)讀取1500個(gè)Android應用的源碼（約1億行Java代碼），BAYOU的神經(jīng)網(wǎng)絡(luò )現在是一個(gè)可以編寫(xiě)其他軟件的AI。

那么Web-Assembly在這里又處于何種位置？將來(lái)的一種可能

相比解釋型語(yǔ)言JS，WebAssembly能以二進(jìn)制形式直接運行在所有的瀏覽器上。一直以來(lái)這個(gè)術(shù)語(yǔ)（WebAssembly）在開(kāi)發(fā)者社區廣為流傳，相信不久的將來(lái)，作為JavaScript的補充，它將得到極大地推廣。

為什么這么說(shuō)呢？因為WebAssembly減少了TTI（底層交互時(shí)間）從而在性能上使web應用變的更快，同時(shí)前端開(kāi)發(fā)所選擇的語(yǔ)言也更加多樣化。這樣開(kāi)發(fā)人員就可以通過(guò)他們最擅長(cháng)的語(yǔ)言來(lái)構建部分應用，同時(shí)提升運行速度，剩余部分則通過(guò)JS實(shí)現。

總結

我們知道，在今天的前端世界里，React、Vue和Angular三大框架一直居于主導地位，尤以Vue最被看好。然而，了解了這些框架的前世今生，對于一個(gè)全新的框架--其不僅在速度和性能上擁有出色的表現，同時(shí)還解決了市面上所有框架所面臨的問(wèn)題，我們也不會(huì )感到很驚訝。

然而，我認為今天所出現的各種技術(shù)都將融為一體，在這里將用到web組件、WebAssembly及AI技術(shù)--為應用開(kāi)發(fā)提供端到端解決方案，其目的就是搭建出一個(gè)開(kāi)發(fā)人員易上手且包含完整解決方案的框架。

為了更好地利用與共享應用的核心部分，他們將通過(guò)web組件的形式來(lái)構建。

WebAssembly將在應用中起到加速的作用，為應用提供更快、更好地性能表現。

不管是在起始階段的編碼、減少不必要的樣本還是在代碼質(zhì)量的最終審核上，AI技術(shù)都將加快整體的開(kāi)發(fā)進(jìn)程。