日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端領(lǐng)域2017年有哪些變化，2018年又有怎樣的期待？

以下為我在知乎問題「2017年前端有什么樣變化？即將來臨的2018有什么樣的期待？」下的回答，稍作整理分享給大家。如有遺漏歡迎在評論中指出。原文如下：

在即將過去的2017年里，我們回顧：

逃不過的三大框架

  1. React 繼續(xù)在前端領(lǐng)域占據(jù)著主導(dǎo)地位，并在 2017 年發(fā)布了最受期待的版本之一 - React 16。 它包含了可以實現(xiàn)異步 UI 渲染的 fiber 架構(gòu)。通過提供包括錯誤邊界在內(nèi)的很多其他特性。但 React 在這一年中所取得最重要的成就不是它推出的新特性，而是修改了它的開源協(xié)議：BSD 協(xié)議 -> MIT 協(xié)議。除此外，Jest、Flow、Immutable.js 和 GraphQL 授權(quán)也都改為 MIT 協(xié)議。

  2. Angular 市場占有率持續(xù)下滑（相較于 React ），發(fā)布了V4 （3月23日）以及 V5 （11月2日），在 V4 中看到了 Angular Universal  成為官方項目的一部分以及 Angular Animation 從核心包中被抽離出來，V5 中則對 PWA 支持進行了改進、對編譯器優(yōu)化達到更快地構(gòu)建等。

  3. 即便 React 獲得了巨大成功，Vue（作者尤雨溪）也仍然越來越受歡迎。該框架提供了非常友好、簡單的 API，是 React 的主要替代方案之一。它已經(jīng)被包括 GitLab 在內(nèi)的大公司所采用，該公司回顧了在過去的一年里使用該框架的故事。

注：上圖為三大框架過去一年中在 NPM 的下載量對比圖，以下類似的框架/包對比圖均采用 npmtrends 一年內(nèi)下載量進行對比，同時附有 GitHub 上 star/fork 等狀態(tài)信息。

ECMAScript

  • 在一個詳盡的提案過程結(jié)束之后，六月份發(fā)布了 ECMAScript 規(guī)范的2017年版本，其中包括一些開創(chuàng)性的功能，如異步功能，共享內(nèi)存和原子操作（atomic operations）。其中，共享內(nèi)存將使 JavaScript 中的高性能并行計算更容易處理，而且效率更高。擁有共享內(nèi)存的并行架構(gòu)對于任何想用 WebGL 和 web worker 創(chuàng)建游戲的人來說都是巨大的誘惑。

  • 該版本在2017年12月已經(jīng)被所有主流瀏覽器所支持，Edge 表示將從 v16 版本開始對這些功能進行支持。由于 Node 不支持 web worker，所以他們也沒有對共享內(nèi)存的支持，但他們正在重新思考該項決定。

WebAssembly

  • 所有主流瀏覽器現(xiàn)在都支持 WebAssembly，五月份 Chrome 開始支持，F(xiàn)irefox 則是從三月份就開始支持，Edge 是十月份。 Safari 則在第十一次發(fā)布中開始支持。Chrome for Android 和 Safari Mobile 也支持 WebAssembly。詳情可以參考 WebAssembly support now shipping in all major browsers – The Mozilla Blog

Progressive Web Apps

  • 我們一直在尋找彌補 web 和其他客戶端之間體驗差距上的解決方案。Google 一直主導(dǎo)通過將 web 應(yīng)用轉(zhuǎn)換為 Progressive Web Apps(PWA) 來增強它的能力，而這一方法在 2017 年迅速獲得采用。一個 PWA 應(yīng)用利用現(xiàn)代瀏覽器技術(shù)來提供更像移動應(yīng)用程序的 web 體驗。它提供了改進的性能和離線體驗，以及以前僅可用于移動的功能，例如推送通知。 PWA 的基礎(chǔ)是一個 manifest.json 文件和對 service workers 的利用。詳情見 Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)。

包管理器

  • Bower 市場占有率持續(xù)下降，它的***一次發(fā)布在2016年11月，之后官方正式推薦用戶使用 NPM 用于管理前端項目中的軟件包。

  • NPM 自從最初發(fā)布以來已經(jīng)有了相當(dāng)長的一段時間，但它仍然缺少一些關(guān)鍵特性，而這正是 Yarn 希望補充的。Yarn 的主要貢獻是包緩存，一個確保確定性構(gòu)建的鎖文件，并行操作以及依賴關(guān)系。這些功能非常成功，以致于 NPM 在其 5.0 版本中實現(xiàn)了它們。Yarn 下載量超過 10 億次（目前每月下載量達到了 125 萬次）并擁有驚人的 29000 多個 GitHub stars。即使你沒在使用 Yarn，JavaScript 的包管理整體上由于 Yarn 的發(fā)布也得到了顯著地提升 。

  • 針對 Yarn 的出現(xiàn)， NPM 回擊以 v5 版本的發(fā)布，這個版本顯著提高了性能（包括上述的 Yarn 發(fā)布的功能） 。

樣式布局

  1. 網(wǎng)格布局最終被 CSS 采納為標(biāo)準(zhǔn)，瀏覽器也正在快速地采用它。過去，網(wǎng)格系統(tǒng)在 CSS 中曾被 tables、float、flex 以及 inline-block 實現(xiàn)過。

  2. 2017 年見證了 styled-components（由 Max Stoiber、Glen Maddern 和 Phil Plückthun 創(chuàng)建） 在流行程度上逐漸占據(jù)主導(dǎo)地位。Emotion（由 Kye Hohenberger 創(chuàng)建）是***的 JavaScript 庫之一，但它已經(jīng)被迅速采用。另一個可選方案是 glamorous（由 PayPal、Kent C. Dodds 和一群熱情的貢獻者創(chuàng)建），它封裝了 glamor 庫。

  3. 在過去的幾年里，像SASS，Less和Stylus這樣的CSS預(yù)處理器已經(jīng)流行起來。PostCSS 于2014年推出，而在2017年真正火爆起來，成為目前***的 CSS 預(yù)處理器。

  4. 另一方面，在 2017 年，主要的進步來自 CSS-in-JS 的明顯改進與采用，其中所有樣式都是通過代碼而不是樣式表進行構(gòu)建的。目前還不清楚這是否將成為前端社區(qū)的最終方向，但這是目前***的方法。

  5. PostCSS 仍然是***的 CSS 預(yù)處理器，但是很多都在切換到 CSS-in-JS 解決方案。

注：評論中有同學(xué)談到 PostCSS 是后處理器，根據(jù)定義，CSS 后處理器是對 CSS 進行處理，并最終生成 CSS 的 預(yù)處理器，它屬于廣義上的 CSS 預(yù)處理器。由于本人回答時的定位以及參考的文獻中所指，故這里不做細分，認定 PostCSS 為預(yù)處理器。細致的同學(xué)可以做進一步的細分。

工程模塊化工具

  1. Webpack 2 于今年2月份發(fā)布。 它帶來了諸如 ES6 模塊（不再需要 Babel 轉(zhuǎn)換 import 語句）和 tree shaking （消除了打包中未使用的代碼）等重要功能。 此后不久，V3 發(fā)布了一個名為“scope hoisting”的功能，將所有的 webpack 模塊放入一個單獨的 JavaScript 包中，從而大大縮小了它的尺寸。

  2. 7月份，Webpack 團隊從 Mozilla 開源支持計劃獲得了一筆贈款，以便為 WebAssembly 提供***的支持。

  3. Parcel 作為一個有趣的項目，在短短十天內(nèi)便在 GitHub 上獲得了 10000 個 star。 它主要通過利用多個 CPU 內(nèi)核和一個高效的文件系統(tǒng)緩存來實現(xiàn)。 它還基于抽象語法樹進行操作，而不像 Webpack 使用字符串。

  4. 除此外，Rollup 的發(fā)展也不容小覷。4月 React 團隊從 Gulp 切換到了 Rollup 進行開發(fā)。除此外，Webpack 團隊也推薦在某些方面使用 Rollup 而不是 Webpack。

TypeScript

  • JavaScript 中缺少類型一直是很多人的抱怨所在。為了解決這些問題，TypeScript 出現(xiàn)。它由微軟創(chuàng)建，TypeScript - JavaScript that scales.JavaScript 中缺少類型一直是很多人的抱怨所在。為了解決這些問題，TypeScript 出現(xiàn)。它由微軟創(chuàng)建，由于其出色的表現(xiàn)贏得了很多 JavaScript 開發(fā)者的追捧，而 Flow 提供了一種在不需要激進的重構(gòu)下更為靈活的方式來引入類型，后者是 Facebook 的成果。

應(yīng)用狀態(tài)管理

  • Redux 仍然作為 React 項目推薦的狀態(tài)管理解決方案，并在 2017年獲得了五倍的增長速度（NPM 下載量）。

  • Mobx 成長的也很快，并被一些高利潤公司所使用，例如 IBM，美國銀行以及 Lyft。

  • 除此外，MobX 團隊正在努力，希望在新項目—— mobx-state-tree（MST） 中結(jié)合 Redux 和 MobX 的優(yōu)點。

GraphQL

  • GraphQL 似乎在 REST 之上迅速占據(jù)了一席之地，Samer Buna 甚至聲稱 REST 已經(jīng)死亡。GitHub 已經(jīng)使用 GraphQL 編寫了***版本的 API，與此同時為了使 GraphQL 對所有開發(fā)人員可用，許多公司正在開發(fā)產(chǎn)品，例如 Johannes Schickling 開發(fā)的 Graphcool框架。

靜態(tài)網(wǎng)站生成方案

  • 2017 見證了靜態(tài)網(wǎng)站卷土重來。像 Gatsby 這樣的框架使您能夠使用 React 和其他現(xiàn)代工具構(gòu)建靜態(tài)網(wǎng)站。不是每個網(wǎng)站都需要或應(yīng)該成為一個復(fù)雜的現(xiàn)代 web 應(yīng)用。由于采用與預(yù)構(gòu)建標(biāo)記（原文 prebuilt markup），靜態(tài)網(wǎng)站生成方案使你獲得服務(wù)器端渲染的好處和***的速度。如果你正在尋找一個很好的例子，React 官方文檔就是用 Gatsby 構(gòu)建的。

在即將到來的2018年中，我們期待：

  • 基于組件應(yīng)用中的樣式是否是組織 CSS 的***方式？有關(guān)該內(nèi)容的討論或許會激化。

  • 越來越多的公司采用具有統(tǒng)一代碼庫的移動端解決方案，如 React Native，F(xiàn)lutter 或 Weex 。

  • 因為離線能力和無縫的移動端體驗，web 變得更加原生，再加上蘋果對 Service Worker 的表態(tài) Release Notes for Safari Technology Preview 46， PWA 在2018年可能會被全面支持。

  • WebAssembly 可以取得長足的進步，提供一個更好的 web 體驗。

  • GraphQL 正在并繼續(xù)挑戰(zhàn) REST。

  • 由于不再有對開源協(xié)議上的爭議，React 強化了它的地位。

  • Flow 和 TypeScript 采取更強大的舉措，使 JavaScript 更具結(jié)構(gòu)。

  • 虛擬現(xiàn)實使用類似 A-Frame、React VR 和 Google VR 這樣的庫正在向前邁進。

  • 人們使用區(qū)塊鏈和 web3.js（由 Marek Kotewicz 和 Fabian Vogelsteller 創(chuàng)建）構(gòu)建了一些非常酷的應(yīng)用程序。

  • 構(gòu)建方案的持續(xù)發(fā)展，Webpack ，Rollup 以及后起之秀 Parcel 等在構(gòu)建方案份額中扮演這一種合久必分、分久必合的輪回。

本答案在撰寫過程中參考了以下內(nèi)容：

  1. Frontend in 2017: The important parts

  2. A recap of front-end development in 2017

基于第二篇參考文章的譯文已經(jīng)翻譯成中文，感興趣的同學(xué)也可以點擊以下鏈接查看。 


標(biāo)題名稱：前端領(lǐng)域2017年有哪些變化，2018年又有怎樣的期待？
文章路徑：http://www.dlmjj.cn/article/djeccgg.html