VS Code 成主宰、Vue 備受熱捧! 2019 前端開發趨勢必讀

VS Code 成主宰、Vue 備受熱捧! 2019 前端開發趨勢必讀

前端在生產和開發中佔據著越來越重要的地位,PC 端、手機端、桌面端、智慧手錶端等等設備都離不開前端的身影。 本文將圍繞框架、程式設計語言、工具、React、Vue等方面,全面回顧 2019 年前端與 Web 開發的大事。

作者 | Trey Huffine

譯者 | 彎月,責編 | 郭芮

出品 | CSDN(ID:CSDNnews)

以下為譯文:

在過去的一年中,前端開發再次加快了發展的速度,本文總結了2019年以來的所有大事、新聞和趨勢。

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

React 再次榮登前端流行庫的榜首,且用戶的數量仍在增長,而 jQuery 出乎意料地保住了第二名的位置。 緊隨其後的是 Angular 和 Vue,一大批飽含熱情的開發人員為二者奠定了強大的用戶基礎。 去年,Svelte 收到了很多關注,但還在為獲得更多採用而努力。

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

經過一年的平靜之後,12月初 WebAssembly 出現了一些重大新聞:W3C聯盟正式推薦其為Web語言。 (萬維網聯盟(W3C)是互聯網主要的國際標準組織。 )

自2017年發佈以來,WebAssembly 引起了廣泛的關注,而且採用也迅速增長。 在過去的幾年中,我們看到了WebAssembly 建立了1.0規範,而且所有主流瀏覽器都開始支援WebAssembly。

2019年,還有一則 WebAssembly 的新聞:位元組碼聯盟(Bytecode Alliance)成立,該聯盟旨在通過協作實施標準和提出新標準,以完善 WebAssembly 在瀏覽器之外的生態。

我們仍在等待 WebAssembly 真正站穩腳跟,並大面積普及。 隨著 WebAssembly 每次的更新,我們離這個目標越來越近。 毫無疑問,W3C的聲明是讓各個公司合法使用 WebAssembly 的重要一步,我們需要繼續降低使用 WebAssembly 的入門門檻,讓其更方便構建產品。

TypeScript 的使用激增:許多開發人員為之傾倒

2019年是 TypeScript 之年。 TypeScript 不僅成為了在JS代碼中添加類型時的最佳選擇,而且許多開發人員在個人專案和工作中對它的喜愛超過了普通的 JAVAScript。

在2019年初發佈的StackOverflow調查中,TypeScript與 Python 並列第二,成為了最受歡迎的語言,僅次於 Rust。 如果在2020年初發佈的最新的調查中看到 TypeScript 更上一層樓也不足為奇。

TypeScript 已經開始蠶食Web開發世界——前端和後端皆如此。 有些開發人員曾經認為TypeScript 的興起只不過是暫時的,而且他們還認為它會重蹈 Coffeescript的覆轍,但事實證明 TypeScript 可以解決JS開發人員的核心問題,而且其使用率似乎越來越高。

TypeScript 與所有主流文本編輯器的集成為Web開發人員提供了更好的開發體驗。 JavaScript 開發人員將 TypeScript 視為一種工具:它可以減少錯誤,同時由於其提供的文檔說明類型和物件介面,代碼閱讀起來更為輕鬆。

值得注意的是,2019年 TypeScript 的NPM下載流行度超過了 React。 此外,它的下載量也遠遠超過了 Flow 和 Reason 等競爭對手。

TypeScript 和 React 解決的是完全不同的問題,因此不應該直接將二者進行比較。 下圖只是為了展示 TypeScript 的受歡迎程度。

TypeScript v3.0 於 2018年末發佈,2019年發佈到了3.7版,其中包括 ECMAScript 功能的更新,例如Optional Chaining、nullish operator以及對類型檢查功能的改進。

React 繼續保持領先,開發人員為鉤子傾倒

雖然 Vue 和 Angular 擁有大一批飽含熱情的使用者,Vue 在 GitHub 上的給星數甚至超過了 React,但在個人和專業專案中,React 繼續保持領先地位。

2018年末,React團隊引入了鉤子。 2019年,鉤子吞噬了 React 世界,絕大多數開發人員都將其作為管理狀態和元件生命週期的首選方式。 2019年中有關鉤子的文章層出不窮,這方面的模式開始走向穩固,重要的 React 包都開始利用自定義鉤子來匯出其函數庫的功能。

鉤子提供了一種通過簡潔的語法管理功能元件的狀態和生命週期的方法。 另外,React 提供了構建自定義鉤子的功能,我們可以利用這個功能創建可重用的代碼和共用的邏輯,而無需創建高階元件或使用render props。

React核心團隊重點關注開發人員的經驗和工具,提高生產力

在React v16.8 添加了大量鉤子之後,其後的大多數更改都相對較小,2019年發佈的最新版本為16.14版。

在發佈了大量鉤子之後,React 團隊隨後將工作重點轉移到通過提供更多工具來改善開發人員的工作。 實際上,開發人員的經驗是2019年 React 大會的主要主題。 React 大會的主要發言人及 React 團隊經理 Tom Occhino 表示,開發人員的經驗主要依賴於三個方面:降低入門的門檻、提高生產率和改善擴展能力。 下面讓我們來看一看為了支援這三方面,React 團隊發佈了哪些功能和計劃:

  • 全新版本的 React DevTools
  • 全新的 React 性能分析工具
  • 創建了 React App v3
  • 測試工具的更新
  • Suspense
  • 併發模式(即將推出)
  • Facebook 使用的 CSS-in-JS(即將推出)
  • 漸進/選擇性頁面hydration(即將進行)
  • React 核心層面支援可存取性(即將發佈)

我們相信,良好的開發人員體驗能帶來良好的用戶體驗,因此這對每個人都有益。 有關即將發佈的 React 功能,請點擊如下連結(youtu.be/uXEEL9mrkAQ)觀看2019年 React 大會上Yuzhi Zheng的發言。

Vue為版本3發行做準備,使用量繼續增長

Vue 的採用率可能尚未達到最高,但其擁有一大批熱情高漲的使用者。 Vue 借鑒了 React 和Angular 的精華,同時還進行了簡化。 它的另一個巨大的賣點是:更開放,不像React(Facebook)或 Angular(Google)一樣受大公司的控制。

Vue 最大的新聞是即將發佈的3.0版本,Alpha版有望在第四季度末發佈。 2019年,Vue 2.x僅在年初收到了一些更新,因為大多數的工作都投入到了v3版本中。

雖然今年發佈的版本不多,但這並不意味著Vue 沒有太多大事發生。 當 Evan You 向大眾徵集有關 v3 的建議時,這個版本的變動在社區引發了廣泛的爭論,請見 Reddit 和 Hacker News 等網站。

激怒 Vue 開發人員的關鍵問題是對框架API的全面改革。 但是,在強烈反對之後,有人指出此次API的變更與Vue 2完全相容。 雖然許多開發人員仍在關注該版本的發行,但他們聲稱這些改動可能會讓他們考慮 Svelte,因為他們擔心 Vue 與 React 太相像。 儘管社區中仍有許多人對此表示關注,但在他們等待發佈的過程中,喧雜聲似乎已平息。

除了上述有爭論的變更外,Vue 3 還包含其他重大變化:

  • 組合API
  • 全域mount/配置API的改動
  • Fragments
  • 時間切片支援(實驗性)
  • 多個v模型
  • Portal
  • 新的自定義指令API
  • 反應性的
  • 虛擬DOM重寫
  • 靜態props hoising
  • 鉤子 API(實驗性)
  • slot 產生最佳化(父和子元件的單獨渲染)
  • 更好地支援 TypeScript

有關Vue的發佈(youtu.be/ANtSWq-zI0s),今年另一個值得注意的是CLI的第4版,主要集中在基礎工具的更新上。

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

Angular 剛愎自用的哲學為它贏得了龐大的使用者群。 由於 Angular 是一個「霸道總裁」式的框架,因此它要求開發人員以 Angular 的方式行事,同時也為開發人員提供了所有必要的工具。

這可以避免許多有關引入哪些庫和依賴項的爭論,而這些爭議是 React 應用構建團隊中可能需要面對的問題。 它還要求開發人員使用 TypeScript 編寫應用程式。 由於大多數抉擇已被確立,因此各個公司將其視為一個不錯的選擇,因為開發人員可以專注於構建產品,而不必花費時間考慮軟體包。

2019年,Angular 發佈了版本8,並且還發佈了一個新的渲染器/編譯流水線——名叫 Ivy。 Ivy 最大的好處在於構建的包更小,但它提供了許多其他巨大的改進。 目前,Ivy 是 Angular 9 之前的可選功能。 版本8中值得注意的更新包括:

  • 現代JAVAScript的差分載入
  • 預設支援的 Ivy 預覽
  • Angular Router 的向後相容性
  • 改進後的Web Worker包
  • 預設支援的使用方式分享
  • 依賴關係更新

2019年12月期間,Angular團隊為版本9的發佈做好了準備,該版本將於2019年底或2020年初正式發佈。 Angular 9的最大變化是 Ivy 成為了標準渲染器。 有關Angular 9的更多詳細訊息,請參照如下視頻(youtu.be/5wmWtgr7LQ0)。

可訪問性和國際化變得越來越重要

Web應該對所有人開放,且人人可訪問,前端世界一直非常重視這一點。 自2015年開始 JAVAScript 和 Web 得到了快速發展之後,模式和框架終於得到了鞏固。 如今的形式更為穩定,因此開發人員可以將更多的精力放在能夠將應用當地語系化以及方便更多人訪問的工具上,努力打造更好的Web環境。 我們應該為我們所取得的進展感到自豪,但是我們還有很長的路要走。

可訪問性(Accessibility,簡稱A11y):讓盡可能多的人使用你的網站,傳統上我們認為這是關於殘疾人的,但實際上它也涵蓋了其他群體,比如使用行動裝置的人群,那些網路連接緩慢的人群。 —— MDN

國際化(Internationalization,簡稱i18n)是對應用程式、規範文檔的設計和開發,以確保這些應用和規範等可以更好更容易地適應不同文化、地區、語言的使用者。 —— W3C

注:Accessibility被簡稱為A11y是因為首字母"A"和最後一個字母"y"之間有11個字母。

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以來最令人期待的功能:

  • 私有類屬性
  • Optional Chaining:obj.field?. maybe?. exists
  • nullish coalescing:item ?? 'use this only if item is null/undefined'
  • BigInts

Flutter 突飛猛進地發展,作為構建跨平台移動應用的另一個絕佳選擇向 React Native 發起了挑戰

React Native 推出兩年後,Flutter才發佈,但 Flutter 的發展非常迅速。 Flutter 在GitHub上斬獲了 80,500顆星,幾乎趕上了 React Native 的83,000顆星,照此情形 Flutter 很快就過超越 React Native。

鑒於 Flutter 沒有開發社區的推波助瀾(React Web開發人員推動了 React Native 的發展),所以如此迅速的發展實在令人刮目相看。 Flutter 正在努力打造最優秀的的跨平台移動框架。

Node.js基金會與 JS 基金會合併成立 OpenJS 基金會:Node版本12遵循了年度長期支援發佈策略

為了支援 JAVAScript 生態系統並加速語言的發展,Node.js 基金會與 JS 基金會合併成立了 OpenJS 基金會。 該基金會表示,希望通過中立的組織推進協作和發展,如今他們託管了31個開源專案,包括 Node、jQuery 和 Webpack。 這一舉動為整個JS社區帶來了積極的影響,並得到了Google、IBM和微軟等大公司的支援。

今年,Node發佈了版本12,該版本遵循長期支援(LTS)策略,可以一直到2023年4月。 Node12提供了許多新功能、安全更新和性能改進。 一些值得注意的更新包括 import/export 語句的原生支援、私有類屬性、相容V8 Engine 7.4、對TLS 1.3的支援以及其他診斷工具。

隨著版本3的發佈Svelte 獲得了關注,但在採用方面依然落後

Svelte 在競爭異常激勵的前端框架世界中,找到了自己的躋身之道。 但是,正如我們在本文開頭的介紹,Svelte 還沒有得到大量的實際應用。 總的來說,Svelte"簡單而強大"。 Svelte 網站表明瞭其三大優點:

  • 需要編寫的代碼量更少
  • 沒有虛擬DOM
  • 真正的回應式程式設計

Svelte 嘗試將大部分工作轉移到編譯過程中,減少運行時在瀏覽器中進行的工作。 Svelte 具有基於元件的體系結構,可編譯為純 HTML 和原始 JavaScript,同時也承諾減少樣板代碼。 它使用回應式程式設計來直接更新DOM,而不是利用虛擬的DOM。

Svelte 為前端領域帶來了耳目一新的感覺——即提供更少的功能。 2020年,Svelte 的成長和發展很讓人欣慰,希望我們能夠獲得一些實際的例子,證明它確實能夠與 React、Vue 和Angular 等強大的競爭對手一較高低。

相關影片:youtu.be/AdNJ3fydeao

靜態網站的使用仍在持續,開發人員開始採用 JAMStack

隨著 Gatsby 等框架利用率的提高,Netlify 等負責託管靜態網站的公司也得到了快速增長,於是無數headless CMS公司相繼出現,靜態網站證明瞭自己是Web不可或缺的一部分。

靜態網站將舊網站與新興的工具、庫和更新結合在一起,提供了無與倫比的體驗。 我們能夠使用 React 等現代庫來構建我們的網站,然後在構建時將它們編譯成靜態 HTML 頁面。 由於所有頁面都是預先構建的,因此伺服器不需要花費時間利用請求中的數據渲染頁面,這些頁面可以立即提供,並利用CDN中全域緩存的優勢,盡可能迅速地將頁面提供給使用者。

靜態網站使用的一種流行的程式設計模式是 JAMStack。 這是一種結合了靜態/ SPA的方式,這些頁面都是靜態提供的,但是一旦進入用戶端,就會被當成SPA——通過API和使用者交互來推進UI的狀態。

PWA的增長和採用有所增加

雖然靜態網站的速度無人能及,但也並非適合所有應用,另一個絕佳的選擇是 PWA(漸進式Web應用程式)。 我們可以利用 PWA 在瀏覽器中緩存資源,以確保頁面的立即回應與離線支援。 此外,在 PWA 方式中,後台工作人員還可以提供推送通知等原生功能。

甚至有人聲稱 PWA 可以取代原生移動應用。 無論最終結果將如何,毫無疑問,在很長一段時間內 PWA 將影響各大公司構建產品的主要方式。

前端的工具越來越優秀

近幾年來,前端開發人員總是抱怨厭倦了 JavaScript, 但是我們也慢慢看到,開源專案維護人員的不懈努力減輕了人們對 JAVAScript 的厭倦。

以前,如果我們想構建SPA,則必須利用 Bower 或 NPM 引入依賴關係,還要掌握如何利用 Browserify 或 Webpack 進行編譯,從零開始編寫 Express 伺服器,並在庫發生更新時維護我們的應用。

多年來,我們經歷了很多痛苦,但如今我們造就了最活躍、最發達的軟體包生態系統。 我們有很多工具可以幫助我們抽象化構建應用程式中最痛苦的部分:創建 React 應用、Vue CLI、Angular CLI、用於靜態網站的Gatsby、用於 React Native 移動應用的Expo、用於SSR應用程式的Next / Nux 用於建立伺服器的生成器、免卻為GraphQL編寫伺服器的Hasura、使用 GraphQL 代碼產生器自動生成 TypeScript 類型、Webpack不斷得到簡化等等,我們總能找到工具幫我們減輕繁重的工作。

也許現在我們開始厭倦了工具了?

GraphQL深受開發人員的喜愛,並在科技公司中得到進一步的採用

GraphQL 有望解決傳統的基於 REST 的應用程式面臨的許多問題。 GraphQL 很快就獲得了開發人員的喜愛,而各大科技公司也紛紛開始採用它。 幾年前,GitHub 用 GraphQL 編寫了它的最新API,許多其他組織也在做出了同樣的變革。

GraphQL 應用程式是數據驅動的(不是端點驅動),因此用戶端可以聲明所需的確切數據,從伺服器接收相應的JSON回應。 GraphQL API提供的文件記錄了所有的數據及其類型,幫助開發人員更全面地瞭解API。

由於GraphQL API 提供了完全類型化的架構,因此它也可以與 TypeScript 應用程式很好地整合。 GraphQL 可以通過 GraphQL Code Generator 等工具讀取客戶端代碼中的查詢,並將其與架構進行匹配,以提供在整個應用程式中流動的 TypeScript 類型。

在過去的一年中,GraphQL 的下載量增加了一倍,而 Apollo 也開始朝著使用最廣泛的框架邁進。

CSS-in-JS的發展勢不可擋

Web開發的發展大有讓 JAvaScript 一統天下的趨勢,CSS-in-JS 的採用充分體現了這一點,因為這些CSS樣式都是使用 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>
)

styled-components 和 emotion 是 CSS-in-JS 的兩個主要庫,而且2019年 emotion 的下載超過了 styled-components。 從增長幅度來看,這兩個庫遙遙領先於其他 CSS-in-JS 庫,而且它們還將持續快速增長。

VS Code是文字編輯器市場上的主宰

開發人員對於IDE /文本編輯器充滿了熱情,他們會沒完沒了地爭論為什麼自己的編輯器才是最佳選擇。 然而,前端開發人員不約而同地選擇了 VS Code。 VS Code 是一款開源編輯器,它提供的外掛程式為開發人員提供了無與倫比的體驗。

根據「2018年JS的狀況調查」(位址:2018.stateofjs.com/othe),文本編輯器的使用方式如下(2019年的調查發佈時,下圖將被更新):

Webpack 5 已進入測試階段且即將發佈

Webpack 已成為所有現代 JavaScript 工具鏈的核心元件,而且也是最常用的建構工具。 Webpack 一直在提高性能和可用性,努力為開發人員提供更好的工具。 Webpack 5 主要側重於以下幾個方面:

  • 通過持久緩存提高構建性能;
  • 通過更好的演算法和默認值來改善長期緩存;
  • 清理內部模式,同時不會引發任何重大變動。

Jest 放棄 Flow,轉投 TypeScript 的懷抱

Facebook 維護著流行的測試庫 Jest 和 Flow,後者是 TypeScript 的競爭對手。 2019年初,Facebook 大膽聲明 Jest 將放棄Flow,轉投 TypeScript 的懷抱。 這進一步表明 TypeScript 已成為輸入 JavaScript 代碼的標準選擇,2020年及以後 TypeScript 的使用會進一步增加。

2019年Chrome 發佈了穩定版本 72–78

Chrome 快速反覆運算的步伐從未停歇,他們正在迅速為Web和開發工具添加新功能。 2019年,Chrome 發佈了7個穩定版本,其中包括Beta版79、dev版80和canary版81。

過去一年中有關 Chrome 的重大新增功能,請參照如下連結:en.wikipedia.org/wiki/G

微軟 Edge 瀏覽器移至 Chromium,並創建了新的標誌

對 Web 開發人員來說,IE 及其後續的 Edge 就是個笑話,它們令開發人員苦不堪言。 這款瀏覽器在Web功能實現方面一直落後於他人,並且眾所周知,為其編寫跨瀏覽器相容的代碼簡直就是災難。 為了贏得開發人員,微軟決定選擇使用Google的開源 Chromium 引擎。 2019年中期,這項變更已進入Beta階段。

Facebook 發佈了 Hermes,這是面向 Android 的 JavaScript 解析器,用於改進 React Native

Facebook 認為 Android JavaScript 引擎的速度不夠快,所以他們建立了自己的引擎。 Facebook全力支援 React Native,此舉表明為了確保其在所有平臺上都能盡可能有效地工作,他們願意做出必要的調整。

2020年的預測

  • 隨著代碼拆分和 PWA 的進一步使用,性能仍然是 Web 最關鍵的方面。
  • WebAssembly 會越來越普及,並得到實際採用和應用於產品中。
  • 新興創業公司和新項目都會採用 GraphQL,而其他公司也會紛紛從 REST 向 GraphQL 遷移。
  • 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)的影響在前端開發中越來越普遍。

原文:levelup.gitconnected.com

本文為 CSDN 翻譯,轉載請註明來源出處。

2020 年 Web 開發展望

新舊交替,你敢相信? 下一個應用程式可能沒有後端……