倏忽一年:回顧點評前端2019重大事件、趨勢

本文回顧和點評2019年前端領域發生的所有重大事件、新聞和趨勢,並展望2020。

2019年流行前端框架和庫的NPM下載趨勢

React又一次成爲年度最受歡迎的庫,並且仍處於增長狀態;而jQuery拿到了令人意想不到的第二名;緊隨其後的是Angular和Vue,它們都擁有熱情的開發人員組成的龐大用戶羣。

這一年來Svelte雖然吸引了很多關注,但它離廣泛普及還有很長的路要走。

WebAssembly成爲繼HTML、CSS和JavaScript之後的第四大Web語言

經歷了相對平靜的一年後,WebAssembly在12月初迎來重大新聞——W3C聯盟正式將其推薦爲一種Web語言。
https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en

自2017年WebAssembly發佈以來,它已經收穫了廣泛的關注並得到快速推廣。在過去幾年中,我們看到它推出了1.0版本規範,而且幾乎所有主流瀏覽器都開始支持WebAssembly。

WebAssembly在2019年的另一件大事是字節碼聯盟的成立,其宗旨是“通過合作實施標準和提議新標準,爲WebAssembly在瀏覽器之外的世界開拓一片新天地”。
https://bytecodealliance.org/articles/announcing-the-bytecode-alliance

我們仍在等待WebAssembly真正站穩腳跟並全面普及!而隨着WebAssembly一次又一次的更新,應該說我們現在愈加接近這個目標了。毫無疑問,W3C聲明是使WebAssembly獲得企業認可的關鍵一步,並且我們需要繼續降低WebAssembly的門檻,使其更易於構建產品。

TypeScript使用率激增

2019年是TypeScript之年。TypeScript不僅成爲了在JS代碼中添加數據類型的事實選擇,而且許多開發人員會經常在個人項目和工作中,用它來代替普通的JavaScript。

在2019年初發布的StackOverflow調查中,TypeScript與Python並列最受歡迎語言次席,僅次於Rust。在2020年初將發佈的新調查中,如果我們看到TypeScript的排名再進一步,應該也不會有什麼奇怪。
https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted

TypeScript已經席捲了整個Web開發世界——前端和後端皆是如此。一些開發人員認爲TS只是跟風炒作的產物,覺得它會步CoffeeScript後塵;但TypeScript已被證明可以解決JS開發人員面臨的一大核心問題,而且它的使用率看來只增不減。

TypeScript與所有主流文本編輯器的集成,爲Web開發人員提供了更好的開發體驗。JavaScript開發人員將TypeScript視爲一種工具,它可以減少錯誤,還可以通過(提供自帶描述的)類型和對象接口更輕鬆地讀取代碼。

值得注意的是,TypeScript在2019年的NPM下載量超越了React,其流行程度可見一斑。此外,它的下載量也比Flow和Reason等競爭對手高得多。

TypeScript和React解決的是完全不同的問題,因此這並不是一場較量,只是爲了告訴大家TypeScript有多麼受歡迎。

TypeScript v3.0於2018年末發佈,而在2019年它已發佈到了3.7版,其中包括更新的ECMAScript功能,例如可選鏈和nullish運算符,以及類型檢查功能的相關改進等。

React繼續保持領先地位,開發人員已經離不開hooks了

Vue和Angular擁有熱情的用戶羣體,Vue在GitHub上拿到的星星甚至比React還多,但考慮個人和專業項目中的使用率時,React仍繼續保持着領先地位。

在2018年末,React團隊引入了hooks。2019年,hooks席捲了React世界,絕大多數開發人員都將其作爲管理狀態和組件生命週期的首選方式。這一年下來,有關hooks的文章數不勝數,使用模式也穩定了下來,而最具分量的React包也構建了自定義hooks來公開它們的庫功能。

Hooks提供了一種方法,可以使用簡單簡潔的語法來管理函數式組件中的組件狀態和生命週期。另外,React提供了構建自定義hooks的能力,這使我們能夠創建可複用的代碼和共享邏輯,而無需創建高階組件或使用渲染props。

React核心團隊開始專注改進開發體驗和工具

在React v16.8中加入hooks這一重大改進之後,React之後版本的多數更改都相對較小。到了2019年末,版本更新到了16.14。

hooks的重大改進發布之後,React團隊開始轉移重心,希望提供更多工具來改善開發體驗。實際上,開發體驗正是React Conf 2019的主題。ReactConf的主講人,React團隊經理Tom Occhino表示,開發體驗植根於以下三件事:准入門檻低、生產率高和擴展能力強。我們來看看React團隊爲此發佈了哪些內容或有哪些計劃:

  • 全新版本的React DevTools
  • 全新的React性能分析工具
  • 創建React App v3
  • 測試實用程序更新
  • Suspense
  • 併發模式(即將推出)
  • Facebook使用的CSS-in-JS(即將發佈)
  • 漸進/選擇性頁面hydration(即將發佈)
  • React核心的可訪問性a11y改進(即將發佈)

人們相信,良好的開發體驗也將帶來良好的用戶體驗。下面是React Conf 2019大會上Yuzhi Zheng的演講,談到了即將發佈的React功能。
https://youtu.be/uXEEL9mrkAQ

Vue準備發佈3.0版,採用率持續增長

Vue可能還沒迎來自己採用率的巔峯,但不得不承認它擁有最熱情的用戶羣。人們說Vue汲取了React和Angular的長處,同時更加簡單易用。它的另一大賣點是更加開放,不像React(Facebook)或Angular(谷歌)那樣受到大公司的控制。

Vue的最大新聞是即將發佈的3.0版本,alpha版本有望在第四季度末發佈。在2019年,Vue 2.x僅在年初獲得了少量更新,因爲主要工作都放在了v3版本的開發上。

雖說Vue在今年發佈的版本不多,但發生的事情卻不算少。當Evan You發佈v3的RFC時,新版的更改在社區中引發激烈爭論。

激怒Vue開發人員的關鍵問題是對框架API的全面修訂。但在反對聲浪之後,據稱API更改將完全是附加的,並且對Vue 2向後兼容。許多開發人員聲稱,如果新版的這些更改無法令人滿意的話,他們可能會考慮轉向Svelte,因爲他們擔心Vue會越來越像React了。不過儘管社區中仍有許多人對此表示關注,但現在大家還是在靜待新版的正式發佈。

除了上述爭議之外,Vue 3還將帶來許多重大改進:

  • Composition API
  • 全局掛載/配置API更改
  • Fragments
  • 時間切片支持(實驗性)
  • 多個v-models
  • Portals
  • 新的自定義指令API
  • 改進響應性
  • 虛擬DOM重寫
  • 靜態props hoising
  • 一個hooks API(實驗性)
  • 插槽生成優化(父子組件的單獨渲染)
  • 更好的TypeScript支持

今年另一個值得關注的Vue更新是CLI的第4版,其更新主要集中在基礎工具上。

https://youtu.be/ANtSWq-zI0s

Angular發佈第8、第9版,以及新的Ivy編譯/渲染管道

Angular的固執(opinionated)理念幫助它贏得了龐大用戶羣。由於Angular是一個強固執框架,因此它要求開發人員以Angular的方式行事,並且爲開發人員提供了所有必要的工具。

這種理念消除了許多爭議,人們不用再操心該將哪些庫和依賴項帶入項目,相反構建React應用的團隊就可能會出現這類問題。Angular還要求開發人員使用TypeScript編寫應用程序。由於大多數選擇已經確定好了,因此很多公司將其視爲一個不錯的選擇,因爲它使開發人員可以專注構建產品,而不必花費時間考慮該用哪個包。

在2019年,Angular發佈了第8版,並且還發布了一個新的渲染器/編譯管道,稱爲Ivy。Ivy的最大好處是較小的打包尺寸,除此之外還提供了許多很棒的改進。目前,Ivy是Angular 9之前的可選功能。這篇文章詳細介紹了第8版中發佈的功能,其中值得關注的更新有:

  • 現代JavaScript的差異加載
  • 可選Ivy預覽
  • Angular路由向後兼容性
  • 改進的Web Worker打包
  • 可選的使用狀況分享
  • 依賴項更新

在2019年12月,Angular團隊開始準備發佈第9版,可能會在2019年底或2020年初正式發佈。Angular 9的最大變化是Ivy成爲了標準渲染器。觀看下面的YouTube視頻可瞭解有關Angular 9的更多信息。
https://youtu.be/5wmWtgr7LQ0

可訪問性(a11y)和國際化(i18n)變得越來越重要

Web應該對所有人開放,讓所有人使用。前端業界一直將這一目標視爲頭等大事。自2015年以來,JavaScript和Web的發展如此之快,相關模式和框架也終於穩定了下來。現在各種事物都更穩定了,開發人員就可以將更多的精力放在那些幫助應用本地化、改善應用可訪問性的工具上面了,從而讓所有人都能體驗到更加美好的Web世界。我們應該爲我們所取得的進展感到自豪,但是前面還有很長的路要走。

可訪問性:“讓儘可能多的人使用你的網站——我們傳統上認爲這是關於殘疾人的特性,但實際上它也涵蓋了其他羣體,比如使用移動設備的人羣和那些網絡連接較緩慢的人羣。”——MDN

國際化:“在設計/開發你的內容、應用程序和規範等事物時,確保其適合,或者可以輕鬆適應來自任何文化、地區或使用任何語言的用戶”——W3C

ES2019新特性

ECMAScript(JavaScript所基於的規範)的年度更新週期還在繼續,ES2019版本添加了許多新特性:

  • Object.fromEntries()
  • String.trimStart()和String.trimEnd()
  • 更好地處理JSON.stringify中的unicode
  • Array.flat()
  • Array.flatMap()
  • try/catch綁定
  • Symbol.description

雖然ES2019帶來了一些重大更新,但即將面世的ES2020看來會有一些自ES6/ES2015以來最受期待的特性:

  • 私有類字段
  • 可選鏈——obj.field?.maybe?.exists
  • nullish合併——item ?? ‘use this only if item is null/undefined’
  • BigInts

Flutter爆發式增長,開始挑戰React Native地位

Flutter的發佈比React Native晚了兩年,但前者很快就站穩了腳跟。Flutter在GitHub中拿到的星幾乎快趕上React Native了,目前是80.5k對83k;按這個趨勢,超過RN指日可待。

考慮到Flutter並沒有像React Native那樣,擁有React Web開發人員那樣龐大的開發社區來幫助自身成長,這樣的成績就更令人驚訝。Flutter正在成爲最佳的跨平臺移動框架。

OpenJS Foundation成立,Node 12發佈

爲了支持JavaScript生態系統並加速發展這種語言,Node.js基金會和JS基金會合併成立了OpenJS基金會。新的基金會希望社區在一箇中立的實體支持下協作和發展,這個實體現在託管31個開源項目,包括Node、jQuery和Webpack。這一行動被認爲對整個JS社區都有正面影響,並得到了谷歌、IBM和微軟等大型科技公司的支持。

Node今年發佈了第12版,也是一個長期支持版本(LTS),支持週期截至2023年4月。Node12提供了許多新特性、安全更新和性能改進。一些值得關注的更新包括對import/export語句的原生支持、私有類字段、與V8 Engine 7.4版的兼容性、對TLS 1.3的支持以及新增的診斷工具等。

Svelte發佈第3版,吸引更多關注

Svelte設法在擁擠不堪的前端框架世界中找到自己的位置。但正如我們在本文開頭所看到的那樣,它的努力還沒能轉化爲大規模的現實使用率。對Svelte來說,最好的總結就是“簡單而強大”。Svelte網站上指出了三點優勢:

  • 寫的代碼更少
  • 沒有虛擬DOM
  • 真正的響應性

Svelte試圖將其大部分工作轉移到編譯步驟,而不是放到瀏覽器中的運行時上。Svelte具有基於組件的架構,可編譯爲純HTML和標準JavaScript,同時還承諾減少樣板代碼。它使用響應式編程來直接更新DOM,而不是使用虛擬DOM。

Svelte通過做減法的方式,爲前端領域提供了一些新穎而令人興奮的東西。在2020年,觀察Svelte的成長和發展將是一件很有趣的事情,希望我們能看到一些大規模應用的案例,看看它是如何與React、Vue和Angular等大塊頭對手競爭的。
https://youtu.be/AdNJ3fydeao

靜態站點活力依舊,開發人員開始使用JAMStack

隨着諸如Gatsby之類的框架愈加流行,諸如Netlify之類的靜態網站託管快速增長,以及無數無頭CMS公司的涌現,靜態網站證明了它們將成爲Web不可或缺的一部分。

靜態站點將舊式Web與新的工具、庫和更新結合在一起,提供了無與倫比的體驗。我們能使用像React這樣的現代庫來構建我們的站點,然後在構建時將它們編譯成靜態HTML頁面。由於所有頁面現在都是預先構建的,因此無需服務器時間就可以根據請求將它們與數據混合在一起——這些頁面可以立即提供服務,並可以利用在全球CDN中緩存的優勢,使內容儘可能接近你的用戶。

靜態站點使用的一種流行編程模式是JAMStack(JavaScript、API和Markup)。這是一種靜態/SPA混合方法,其中頁面是靜態提供的,但在客戶端上更像是SPA,使用API​​和用戶交互來發展UI狀態。

PWA迎來更快的增長和更多的使用率

靜態網站是獲得高速產品的一種方法,但是它們並不適合所有應用——另一個上佳選擇是PWA(漸進式Web應用)。PWA允許你在瀏覽器中緩存資源,以使頁面立即響應並提供脫機支持。另外,它們允許後臺workers提供原生功能,例如通知推送。

甚至有人聲稱PWA可以取代原生移動應用。無論結果如何,可以肯定的是PWA將在很長一段時間裏成爲企業構建產品的重要途徑。

前端工具鏈變得非常好用了

多年來,前端開發人員一直在抱怨對JavaScript的審美疲勞,但我們已經逐漸看到,開源項目維護人員的不懈努力正在減輕這種審美疲勞。

以前,如果我們要構建一個SPA,則必須使用Bower或NPM引入我們自己的依賴項,學會如何使用Browserify或Webpack來編譯它,從頭開始編寫Express服務器,並通過繁瑣的庫更新維護我們的應用。

這種痛苦我們已經承受了很多年,但現在我們已經發展出了最活躍、最發達的軟件包生態系統。有一些工具可以幫助我們抽象出構建應用程序時令人痛苦的部分——Create React App、Vue CLI、Angular CLI、用於靜態站點的Gatsby,用於React Native移動應用的Expo、用於SSR應用程序的Next/Nuxt,用於創建我們服務器的生成器、無需爲GraphQL編寫服務器的Hasura,自動生成TypeScript類型的GraphQL Code Generator,越來越簡化的Webpack——不管我們有怎樣的需求,都有對應的工具可以幫助我們從繁重的勞動中解放出來。

也許現在我們有了工具鏈審美疲勞?

GraphQL繼續受到開發人員喜愛

GraphQL有望解決傳統的基於REST的應用程序面臨的許多問題。開發人員很快就愛上了GraphQL,技術公司也終於開始使用它了。GitHub幾年前用GraphQL編寫了它的最新API,還有許多組織也在跟上步伐

GraphQL應用是數據驅動的,而不是端點驅動的,從而允許客戶端聲明所需的確切數據,並從服務器接收相應的JSON響應。GraphQL API提供了一個架構,用於記錄所有數據及其類型,從而使開發人員可以全面瞭解API。

由於GraphQL API提供了完全類型化的schema,因此它也可以與使用TypeScript的應用程序很好地集成在一起。使用諸如GraphQL Code Generator之類的工具時,它可以讀取我們客戶端代碼中的查詢,並將其與schema匹配,以提供會在整個應用程序中流動的TypeScript類型。

在過去的一年中,GraphQL的下載量增長了一倍以上,而Apollo則開始成爲使用最廣泛的框架。

CSS-in-JS勢頭強勁

Web開發的前進方向似乎是要在JavaScript下統一一切,而CSS-in-JS的推廣就體現了這種趨勢;它是用JavaScript字符串創建樣式的方法。

這使我們可以通過import/export來使用常規JavaScript語法共享樣式和依賴項。由於CSS-in-JS組件可以將props插入其樣式字符串中,因此它還簡化了動態樣式。如前所述,Facebook甚至可能將CSS-in-JS視爲前端的未來,並將發佈他們自己的庫。

以下是經典CSS與CSS-in-JS的對比示例。要使用常規CSS處理動態樣式,你必須管理組件中的類名稱並根據state/props來更新它。對於每個變體,你還需要一個CSS類:

// Component JS file
const MyComp = ({ isActive }) => {
  const className = isActive ? 'active' : 'inactive';
  return <div className={className}>HI</div>
}
// CSS file
.active { color: green; }
.inactive { color: red; }

使用CSS-in-JS,你不用再管理CSS類。你只需將props傳遞給樣式化的組件,它會使用聲明性語法處理動態樣式。代碼更加簡潔了,而且允許CSS管理基於props的動態樣式後,我們對樣式和React的關注點分離也更爲清晰了。現在,所有內容看起來都像是常規的React和JavaScript代碼:

const Header = styled.div`
  color: ${({ isActive }) => isActive ? 'green' : 'red'};
`;
const MyComp = ({ isActive }} => (
  <Header isActive={isActive}>HI</Header>
)

CSS-in-JS的兩大庫分別是styled-components和emotion,後者在2019年的下載量超越了前者。這兩個庫遙遙領先於其他CSS-in-JS選項,看起來它們將繼續快速增長。

VS Code主導文本編輯器市場

開發人員對自己的IDE/文本編輯器充滿熱情,並且經常會爭論誰的選擇是最好的。但在前端領域,開發人員幾乎一致選擇VS Code作爲他們的編輯器。VS Code是一個開源編輯器,它提供許多插件來創造極爲出色的開發體驗。

下面是2019年JS現狀調查統計的文本編輯器使用率:

Webpack 5進入測試階段,並即將發佈

Webpack已成爲幾乎所有現代JavaScript工具鏈的核心組件,並且是最常用的構建工具。Webpack一直在提升其性能和可用性,從而改善開發體驗。在第5版中,Webpack着重於以下幾點:

  • 通過持久緩存提升構建性能
  • 使用更好的算法和默認值來改進長期緩存
  • 清理內部模式,但不會造成重大更改

Jest從Flow轉向TypeScript

Facebook維護着流行的測試庫Jest和Flow,後者是TypeScript的競爭對手。他們在2019年初發表了大膽聲明,選擇將Jest從Flow遷移到TypeScript。這進一步表明TypeScript已成爲類型化JavaScript的標準選擇,並且在2020年及以後的使用率會不斷增長。

Chrome在2019年發佈72–78穩定版

Chrome繼續快速迭代,迅速向Web和開發工具中添加新功能。在2019年,我們看到Chrome發佈了7個穩定版本,還有79 Beta版,80 dev版和81 canary版。查看下面的Wiki可以瞭解過去一年中Chrome的重要新增功能。
https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page1e7d07966d6c

Microsoft Edge瀏覽器遷移至Chromium上,換上新Logo

Internet Explorer及其後繼者Edge對Web開發人員來說就是個笑話,更糟的是使用它們的體驗令人痛苦不堪。微軟的瀏覽器在Web特性實現方面一直落後於人,並且很難爲其編寫跨瀏覽器兼容的代碼。作爲開發人員的重大勝利,微軟已經選擇轉向谷歌的開源Chromium引擎。到了2019年中,此更改已進入beta階段。

Facebook發佈Hermes,用於改進React Native

Facebook認爲Android JavaScript引擎的速度不夠快,因此他們打造了自己的引擎。Facebook正在全力支持React Native,此舉表明他們願意做出必要的調整,以使其在所有平臺上都能發揮最大效能。

對2020年的預測

  • 隨着代碼拆分和PWA的進一步普及,性能仍然會是Web上最重要的指標。
  • WebAssembly愈加流行,開始實際應用,並被用在現實產品中。
  • GraphQL在新的創業公司和新項目的使用率上超過REST,也會有越來越多的成熟公司向它遷移。
  • TypeScript成爲新的創業公司和項目的默認選擇。
  • 我們有望看到無需服務器,且在區塊鏈上構建的現實應用,使Web更加開放。
  • CSS-in-JS可能會成爲默認的樣式方法,取代普通的CSS。
  • “無代碼”應用變得愈加流行。隨着AI的改進和應用抽象層的增加,構建應用程序變得越來越容易。在2020年,我們可能會看到一場重大轉型,未來創建應用時可能不用再編寫代碼了。
  • Flutter可能會取代React Native成爲構建跨平臺移動應用的最佳方式。
  • 使用Svelte構建的實際項目會越來越多。
  • Deno(由Node創建者構建的TypeScript運行時)也會迎來現實應用。
  • AR/VR在諸如A-Frame、React VR和Google VR之類的庫,以及瀏覽器中原生AR/VR工具的改進推動下取得長足進步。
  • 容器化(例如Docker和Kubernetes)的影響在前端流程中變得越來越普遍。

原文鏈接

https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章