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