如果你近幾年一(yī)直在從事前端開(kāi)發，你一(yī)定知(zhī)道已經存在太多的東西讓人難以做出選擇。新的框架和庫随時都在湧現。全世界的公司都面臨着一(yī)大(dà)難題：爲了實現數字化，到底該選擇什麽樣的技術棧才算正确。除了面對這個巨大(dà)的挑戰，同時還要緊跟最新的技術趨勢。
即使對某些專注于前端的開(kāi)發人員(yuán)，也存在選擇個人技術棧的時候。而這個事情可能還優先于選擇正确或錯誤的方法來解決問題。
随着競争的演化，最快、最高性能和最易用的框架和庫被不斷的發明出來，人們不禁想問：JavaScript 世界何時能歸集到幾個主流技術棧上來？JavaScript 未來是什麽樣子？AI 對這項技術到底會産生(shēng)什麽樣的推動？
JavaScript 的背景和流行度
JavaScript 自 1995 年誕生(shēng)以來，已經成爲 Web 領域最受歡迎的語言。過去(qù)十年中(zhōng)，JS 語言的使用率一(yī)直在增長，未見衰落。
根據 StackOverflow 的年度調查，69.8% 的受訪者和 71.5% 的專業開(kāi)發者使用 JavaScript。随着可以使用 Web 的流行設備越來越多，争奪最佳“一(yī)站式”解決方案的競争愈演愈烈。這對于了解 JS 或者正準備學 JS 的人來說是個非常好的消息。而對于那些沒接觸過前端的人來說，我(wǒ)(wǒ)建議他們去(qù)作些嘗試以獲得（哪怕最基本的）JS 經驗。 下(xià)面這句話(huà)概括得非常好：
“可以預見，這 [JavaScript] 可能是開(kāi)發者最需要提升的技能”
框架和 Web 組件 —— 可預見的未來
經曆了過近十年的框架之戰，脫穎而出的“三大(dà)框架”開(kāi)始穩步引領未來。React、Vue 和 Angluar 目前最重要的 JavaScript 框架和庫。我(wǒ)(wǒ)會在本文中(zhōng)按照他們的流行程度排序，并确信他們在未來繼續領先。
React
React 由 Facebook 創建并長期支持，深受開(kāi)發者喜愛，可以用來構建和維護像 POC 這樣的産品或大(dà)型企業應用産品。目前很多像 Instagram、Netflix、沃爾瑪、WhatsApp 這樣領先公司都在使用 React。React 的優勢在于其基于組件的構架、受益于虛拟 DOM 的超強性能，極快的學習曲線等。它有着龐大(dà)的社區支持，在開(kāi)者中(zhōng)非常流行。
Vue
Vue 由 尤雨溪（Evan You）創建，受到阿裏巴巴采用。人們一(yī)旦發現 Vue，就會迅速喜歡上它。發生(shēng)這種情況的原因在于，Vue 最初就設計來幫助開(kāi)發經驗不足的程序員(yuán)。其目的是幫助他們專注于創建功能界面，而不需要太操心代碼。這使得 Vue 門檻極低，非常容易學習。此外(wài)，尤雨溪，前谷歌員(yuán)工(gōng)，發現 Angular 中(zhōng)存在一(yī)些繁瑣或者可以改進的東西，便把這些改進應用到了 Vue 當中(zhōng)。當 React 發布的時候，他也學習 React 并針對其缺點對 Vue 進行了改善，使 Vue 逐漸發展成爲了現在最具前途的框架之一(yī)。Vue 支持聲明式渲染，異步 DOM 更新，雙向數據綁定，嚴格遵守 Web 組件規範，并簡單集成了 HTML 模闆。
Angular
由谷歌構建和支持，并應用于Youtube，Paypal，Google Maps等。目前，Angular已經是企業實施的首選。最新的發布版Angular 6，帶來了兩個主要亮點。使用lvy渲染器的promise類可加快在應用程序中(zhōng)的渲染速度，并且允許在Angular之外(wài)使用Angular組件的元素，例如在Vue或React中(zhōng)。使用Elements包，你可以創建Angular組件，将它們發布成HTML網頁可立即使用的Web組件。對于面向對象程序設計的後端和Java後端來說，Anglar更易于學習。
除框架外(wài)，我(wǒ)(wǒ)們最近看到了web組件的興起，但是它們到底是什麽？爲什麽會這麽重要？
在一(yī)個正遭受框架疲勞的社區，Web組件是自HTML5以來獲得能力的最重要的事情。但是它們是什麽？‘Web組件是一(yī)個新的強大(dà)的W3C 标準，已經被所有的主流浏覽器認可而且可以在我(wǒ)(wǒ)們的App中(zhōng)使用（需要使用填充工(gōng)具）’。它附加到DOM中(zhōng)，可以減小(xiǎo)web程序，可重用和模塊化組件，解耦任何框架，但卻是純粹使用HTML，CSS和JS來構建的。
Web組件具有較小(xiǎo)的包，無須發送自定義的組件實現。它們的可重用性受到稱贊。由于web組件内置于浏覽器中(zhōng)，對浏覽器原生(shēng)支持，所以它們可被用于任何地方，任何框架，或根本沒有框架的地方。最後，它們因簡潔而受到喜愛。如果你不想的話(huà)，你可以不需要去(qù)學習一(yī)些框架。如果你已經有JS和DOM API的基礎，那麽你就可以使用web組件了。
lonic/Stencil
Ionic是一(yī)個功能強大(dà)的框架無關庫，用于構建可直接訪問本機設備功能的移動和漸進式Web應用程序。随着最新的lonic 4的發布，通過允許開(kāi)發人員(yuán)在Angular之外(wài)使用它，Stencil的引入将會使其更強大(dà)和更高效。怎麽做到的？Stencil是一(yī)個Web組件編譯器，可以構建快速而小(xiǎo)巧的現代Web組件。通過使用Web組件而不是像React或Angular這種特定于框架的組件來創建UI組件，我(wǒ)(wǒ)們可以在任何支持它們的框架中(zhōng)重用這些組件，或者單獨使用它們。
Polymer
Polymer是一(yī)個由Google開(kāi)發的JS庫，用于Google Earth 和 Youtube。它使用web組件來構建web應用，并提供将封裝的JS， CSS， 和 HTML組裝爲自定義元素的能力，它是利用浏覽器的原生(shēng)技術，而不是依賴于JS庫。
然而， Polymer 還沒有成熟，而且存在一(yī)些問題。第一(yī)，因爲它生(shēng)成DOM，所以任何交互或者DOM操作都會使用基本JavaScript， 這将增加更多的模闆代碼，導緻組織和管理大(dà)型應用變得更具有挑戰性。這也是一(yī)個提出React和其他庫的原因。第二，Polymer 爲字符串中(zhōng)的變量創建占位符，以此來提升性能，同時還解決了将其轉換成一(yī)個字符串的問題，雖然隻是将它轉成一(yī)個對象。但是因爲這些占位符不屬于Web組件規範，如果使用了這些占位符，就已經将應用直接捆綁到 Polymer 上了。最後幾個問題是：下(xià)載整個庫和Polyfills，而且缺乏服務端渲染。
AI會怎樣改變前端開(kāi)發——在遙遠（或者可能并不遙遠）的未來
除了庫和框架，AI和機器學習會如何影響前端開(kāi)發？這是很多人提出的問題，但是已經有少數公司率先提出了這個問題。他們使用了不同的技術，期望能颠覆一(yī)個經曆了不同框架和庫周期的領域。方法分(fēn)爲兩種。
一(yī)種是旨在通過從線框圖和Sketch文件生(shēng)成初始代碼或生(shēng)成整個前端輸出來幫助開(kāi)發者。它幫助開(kāi)發者将注意力放(fàng)到更重要的開(kāi)發部分(fēn)，例如應用邏輯和構建特性。它加速了設計階段和修改的叠代。這種公司包括從Airbnb ，它最近構建的AI可以将sketch文件轉換成源碼，到Uizard，它使用深度學習/ML(神經網絡)來訓練對圖形界面快照然後将其翻譯爲一(yī)些源碼。使用Uizard令人印象深刻的是；一(yī)個文本到GUI渲染器可以運行在多個平台如iOS， Android 和 基于Web的界面，而且算法迄今爲止精确度達到了77%。
然後是微軟的Ink to Code應用，也是一(yī)個對它的嘗試，在Windows 商(shāng)店(diàn)提供了軟件的免費(fèi)下(xià)載。最後，Supernova，是一(yī)個創業公司，其使命就是建立一(yī)個工(gōng)具來加快手機設計師和開(kāi)發者的應用開(kāi)發流程，Supernova Sutdio的macOS應用，可以将Sketch創建的手機app設計自動轉換到原生(shēng)UI代碼，旨在彌補原型設計和前端開(kāi)發之間的差距。
另一(yī)種是将AI更進一(yī)步，讓機器來做整個前端的編碼。BAYOU，是一(yī)個由軍方和Google資(zī)助的Rice大(dà)學項目，它使用了一(yī)個深度學習工(gōng)具，從根本上來說就像一(yī)個代碼的搜索引擎。通過讀取1500個Android應用的源碼（約1億行Java代碼），BAYOU的神經網絡現在是一(yī)個可以編寫其他軟件的AI。
那麽Web-Assembly在這裏又(yòu)處于何種位置？将來的一(yī)種可能
相比解釋型語言JS，WebAssembly能以二進制形式直接運行在所有的浏覽器上。一(yī)直以來這個術語（WebAssembly）在開(kāi)發者社區廣爲流傳，相信不久的将來，作爲JavaScript的補充，它将得到極大(dà)地推廣。
爲什麽這麽說呢？因爲WebAssembly減少了TTI（底層交互時間）從而在性能上使web應用變的更快，同時前端開(kāi)發所選擇的語言也更加多樣化。這樣開(kāi)發人員(yuán)就可以通過他們最擅長的語言來構建部分(fēn)應用，同時提升運行速度，剩餘部分(fēn)則通過JS實現。
總結
我(wǒ)(wǒ)們知(zhī)道，在今天的前端世界裏，React、Vue和Angular三大(dà)框架一(yī)直居于主導地位，尤以Vue最被看好。然而，了解了這些框架的前世今生(shēng)，對于一(yī)個全新的框架--其不僅在速度和性能上擁有出色的表現，同時還解決了市面上所有框架所面臨的問題，我(wǒ)(wǒ)們也不會感到很驚訝。
然而，我(wǒ)(wǒ)認爲今天所出現的各種技術都将融爲一(yī)體(tǐ)，在這裏将用到web組件、WebAssembly及AI技術--爲應用開(kāi)發提供端到端解決方案，其目的就是搭建出一(yī)個開(kāi)發人員(yuán)易上手且包含完整解決方案的框架。
爲了更好地利用與共享應用的核心部分(fēn)，他們将通過web組件的形式來構建。
WebAssembly将在應用中(zhōng)起到加速的作用，爲應用提供更快、更好地性能表現。
不管是在起始階段的編碼、減少不必要的樣本還是在代碼質量的最終審核上，AI技術都将加快整體(tǐ)的開(kāi)發進程。
