前言：本文是轉(zhuǎn)載文，前端發(fā)展發(fā)展迅速,非常的快之众。內(nèi)容將回顧2018年一些重要的前端新聞扎瓶，事件和 JavaScript 趨勢。分享給大家
WebAssembly 發(fā)布 1.0 版本的核心規(guī)范
WebAssembly被認為是 web 的未來辉哥。它的目標是通過提供在web上運行的二進制格式來最大化性能、減少文件大小并支持多種語言的 web 開發(fā)攒射。
2017年底醋旦，所有主流瀏覽器都宣布支持 WebAssembly。在2018年2月会放，WebAssembly有三個主要版本:
核心規(guī)范1.0
NPM 各個熱門前端庫(框架)下載量比較
下載數(shù)排名前的分別為 React饲齐，jQuery，Angular 和 Vue咧最。以下是它們的拆線圖：
react 庫不斷改進捂人，依舊稱霸前端
React在 web 開發(fā)領(lǐng)域占據(jù)主導地位已有多年御雕，而且在 2018 年期間絲毫沒有放緩。根據(jù)Stackoverflow的調(diào)查滥搭，它仍然是最受歡迎的一個前端庫酸纲。
核心 React 團隊在更新庫和添加功能方面非常活躍瑟匆。在整個2018年福青，看到React v16發(fā)布版增加了許多功能，包括新的生命周期方法脓诡、新的上下文API无午、指針事件、延遲函數(shù)和 React.memo 祝谚。還有宪迟，最受關(guān)注的兩個特性是React Hook和 Suspense API。
React Hooks 得到了一些強烈的反饋交惯，許多開發(fā)人員都喜歡這個更新次泽。Hooks 是一種使用useState功能向函數(shù)組件添加狀態(tài)的方法，它還將管理生命周期事件席爽。
另一個新的特性是 React Suspense意荤，它是一種管理 在 React 組件內(nèi)部獲取數(shù)據(jù)的方法。它在等待渲染異步響應時數(shù)據(jù)只锻，Suspense 是延遲函數(shù)背后用來管理組件的代碼分割的玖像。最終的設想是能夠通過Suspense 管理所有異步加載，例如API請求齐饮，它還允許緩存來自請求的結(jié)果捐寥。
一般顯示加載狀態(tài)的例子是如 isFetching 為 true 時在屏幕上顯示加載圖標。 使用 Suspense祖驱，可以對UI進行細粒度控制握恳，以指定等待時要顯示的回退組件，等待時間以及如何管理導航捺僻。 許多人甚至認為 Suspense 可以消除對 Redux 的需求乡洼。
Vue 迅速成長，github stars 數(shù)量超過 React
在 2017 年實現(xiàn)爆炸式增長后匕坯，Vue在2018年繼續(xù)增長束昵。事實上，它在GitHub stars 數(shù)量已經(jīng)超過了 React醒颖。
雖然 Vue深受歡迎妻怎，但它在實際（國外）使用中仍遠遠落后于 React 和 Angular壳炎。但泞歉，Vue 擁有一個仍在增長的充滿激情的用戶群逼侦，而且這個庫將在未來幾年成為一股強大的力量。
vue 3 更新計劃
在11月14日-16日于多倫多舉辦的 VueConf TO 2018 大會上腰耙，尤雨溪發(fā)表了名為 “ Vue 3.0 Updates ” 的主題演講榛丢，對 Vue 3.0 的更新計劃、方向進行了詳細闡述挺庞。目前該演講的 PPT 也已上傳至 Google 文檔晰赞，感興趣的可點此查閱。本次版本主要圍繞以下幾個版本來升級：
更快
更小
更易于維護
更多的原生支持
更易于開發(fā)使用
完整的ppt地址：https://link.juejin.im/?targe...
Angular 依然活躍选侨，版本7發(fā)布
今年10月掖鱼，Angular在其流行的UI框架的第7版中又發(fā)布了另一個主要版本。 從早期的 AngularJS MVC架構(gòu)到使用更為現(xiàn)代的組件的Angular包援制，Angular 已經(jīng)有了大量的增長戏挡， 隨著這種增長，它已被進一步采用晨仑。
雖然 Angular 沒有 React 和 Vue 等庫中看到的那種狂熱開發(fā)都及使用者褐墅，但它仍然是大型專業(yè)項目的主要選擇。許多開發(fā)人員在使用 React 時都會感到疲憊洪己，因為它需要工程師在管理構(gòu)建管道的同時做出許多依賴和架構(gòu)決策妥凳。
另一方面，Angular 從開發(fā)人員那里省去許多決策答捕，并提供更常見的代碼模式逝钥。Angular 是一個非常規(guī)范化的完整框架，CLI 管理所有構(gòu)建步驟拱镐。專業(yè)環(huán)境的另一個好處是晌缘，Angular 需要TypeScript。Angular 已經(jīng)在 web 開發(fā)世界中挖掘出了它的價值痢站，并繼續(xù)被采用磷箕。
注意:@angular/core 代表新的 Angular, angular 代表舊的 Angular
GraphQL 學習意愿高漲，但仍未超過 REST
GraphQL 已經(jīng)被 GitHub 等技術(shù)領(lǐng)導者采用阵难。然而岳枷，它并沒有像一些人預測的那樣迅速起飛。根據(jù)State of JS survey呜叫，只有1/5的前端開發(fā)人員使用過 GraphQL空繁，但是令人吃驚的是，62.5% 的開發(fā)人員聽說過并希望使用它朱庆。
js 內(nèi)嵌 css 使用更加廣泛
Web開發(fā)似乎已經(jīng)走上了在 JavaScript 下統(tǒng)一所有內(nèi)容的道路盛泡，這一點在 CSS-in-JS 的采用中得到了體現(xiàn)，其中樣式是使用 JavaScript 字符串創(chuàng)建的娱颊。這允許通過使用JS語法 import/export 共享樣式和依賴項傲诵。它還簡化了動態(tài)樣式凯砍，因為 CSS-in-JS 組件可以將道具插入到它的樣式字符串中。下面是一個經(jīng)典的 CSS vs CSS-in-JS 的例子拴竹。
要使用 CSS 管理動態(tài)樣式悟衩，必須管理組件中的類名并根據(jù) state/props更新它，還需要一個保存CSS類的變量：
使用 CSS-in-JS 栓拜，不用再管理CSS類座泳。只需通過 props 傳遞給樣式組件，它就可以處理動態(tài)樣式幕与。 代碼更清晰挑势，通過基于 props 管理 CSS 的動態(tài)樣式，更清晰地分離了樣式和React的關(guān)注點啦鸣。 它現(xiàn)在讀取就像普通的 React 和JavaScript代碼一樣：
CSS-in-JS的兩個主要庫分別是styled-components件和emotion薛耻。styled-components] 已經(jīng)存在了很長一段時間，并且被越來越多的人采用赏陵，但是 emotion 正在迅速得到普及饼齿，許多開發(fā)人員發(fā)現(xiàn)它是首選庫。事實上蝙搔，Kent C. Dodds甚至不贊成他自己的 CSS-in-JSS庫缕溉，，更傾向于emotion 因為它很有魅力吃型。
當使用單個文件組件時证鸥，Vue 還支持開箱即用的有作用域的CSS。通過 scoped 屬性添加到組件的樣式標記勤晚，Vue 將使用 CSS-in-JS技術(shù)來定義樣式枉层，以便它們不會滲透到其他組件中。
此外赐写，Angular 通過“視圖封裝”支持CSS的作用域鸟蜡，這是默認打開的。
疲于使用各種 CLI 工具的情況有所改善
跟上最新的庫挺邀、正確配置應用程序并做出正確的架構(gòu)決策揉忘，這些都不是什么秘密。這種痛苦催生了管理工具的 CLI 包的創(chuàng)建端铛，讓開發(fā)人員能夠?qū)Ｗ⒂趹贸绦蚱Ｔ?2018 年,這種 CLI 已成為開發(fā)人員創(chuàng)建應用程序的主要方式。流行的框架包括 Next.js (SSR代表React)您朽， Create-React-App(客戶端React)， Nuxt.js(用于Vue的SSR)换淆、Vue CLI(客戶端Vue)几颜、Expo CLI(用于React Native)哈蝇，Angular 默認情況下支持峡眶。
靜態(tài)網(wǎng)站生成工具繼續(xù)發(fā)展
隨著JavaScript革命的發(fā)展缔逛，每個人都喜歡學習最新最好的庫匪补，但是完成一些項目時伞辛，我們意識到并非每個網(wǎng)站都需要成為一個復雜的單頁面應用程序(SPA)烂翰。這導致了靜態(tài)站點生成的增長。這些工具允許在自己喜歡的庫(如React或Vue)中編寫代碼蚤氏，但在構(gòu)建期間生成靜態(tài)HTML文件甘耿，允許我們立即為用戶提供完整構(gòu)建的頁面。
靜態(tài)站點很棒竿滨，因為它們提供了性能與簡單性的結(jié)合佳恬。使用在構(gòu)建時呈現(xiàn)的HTML文件，可以立即向用戶發(fā)送一個頁面于游，并不需要 SSR 或 CSR 代碼毁葱，允許頁面幾乎在瞬間加載。然后在客戶機上下載必要的 JavaScript文件贰剥，從而實現(xiàn)單頁體驗倾剿。
靜態(tài)站點非常適合構(gòu)建個人網(wǎng)站或博客，但是它們可以很容易地擴展到更大的應用程序蚌成。已經(jīng)看到了構(gòu)建靜態(tài)網(wǎng)站的流行框架的興起前痘，比如Gatsby和React staticfor React應用，以及VuePressfor Vue應用担忧。
無服務器架構(gòu)與 JAMstack
隨著靜態(tài)網(wǎng)站的日益普及际度，我們也看到了后端的持續(xù)增長以補充它們。在過去的幾年里涵妥，無服務器架構(gòu)已經(jīng)成為web開發(fā)中的一個流行詞乖菱，因為它能夠在降低成本的同時解耦客戶機和服務器代碼。
無服務器架構(gòu)的一個擴展是JAMStack(JavaScript蓬网、Api窒所、Markup)。JAMStack 理念基于上一節(jié)討論的靜態(tài)站點概念帆锋。由于預先構(gòu)建的標記吵取，它允許快速加載時間，并通過為服務器使用可重用 Api 在客戶機上成為一個動 態(tài)SPA锯厢。在2018年皮官，甚至看到了有史以來的第一場JAMStack 黑客馬拉松。freeCodeCamp实辑、Netlify和GitHub聯(lián)手舉辦了一場面對面和在線的黑客馬拉松捺氢，開發(fā)人員可以在 GitHub 總部編寫代碼，或者與世界各地的其他開發(fā)人員聯(lián)系剪撬。
TypeScript可能是JavaScript的未來(但對于Flow就不一樣了)
JavaScript 因為沒有靜態(tài)類型變量而受到批評摄乒。試圖糾正這一問題的兩個主要庫是TypeScript和Flow，但TypeScript似乎是最受歡迎的。事實上馍佑，在 Stack Overflow 調(diào)查中斋否，TypeScript的受歡迎程序高于 JavaScript 本身，分別為 67％ 和 61.9％拭荤。根據(jù) JS 的現(xiàn)狀調(diào)查茵臭，超過80%的開發(fā)者想要使用 TS 或者已經(jīng)在使用它。對于Flow舅世，只有 34% 的開發(fā)人員正在使用它或希望使用它旦委。
所有跡象表明，TypeScript 是 JS 中靜態(tài)類型的首選解決方案歇终，許多人選擇它而不是 JavaScript社证。2018年逼龟，TS 的npm 下載量大幅增長评凝，而流量卻非常平穩(wěn)。TypeScript看起來正在從一個狂熱的追隨者轉(zhuǎn)變?yōu)閺V泛的采用腺律。
webpack 4 發(fā)布
Webpack 3發(fā)布僅8個月后奕短，版本4就發(fā)布了。Webpack 4 繼續(xù)推動簡單和更快的構(gòu)建匀钧，聲稱改進了98%翎碑。它選擇了合理的默認值，在沒有插件的情況下處理更多的開箱即用的功能之斯，并且不再需要開始使用配置文件日杈。Webpack 現(xiàn)在也支持 WebAssembly，并允許直接導入 WebAssembly 文件佑刷。
Babel 7 發(fā)布
自第6版開始將近3年后莉擒，Babel 7 于 2018 年發(fā)布。Babel 是將 ES6 + 代碼轉(zhuǎn)換為 ES5 的庫瘫絮，使JavaScript 代碼跨瀏覽器兼容涨冀。
7.0 帶來的不兼容性變更：
刪除對未維護的 Node 版本的支持：0.10,0.12,2,5
通過切換到使用“scoped”包將現(xiàn)已遷移到 @babel 命名空間，這有助于區(qū)分官方軟件包麦萤，因此 babel-core 將成為 @babel/core
刪除（并停止發(fā)布）任何年度預設（preset-es2015 等）鹿鳖， @babel/preset-env 取代了對這些內(nèi)容的需求，因為它包含了所有年度添加內(nèi)容以及針對特定瀏覽器集的能力
同時刪除“Stage”預設（@babel/preset-stage-0 等）壮莹，轉(zhuǎn)而選擇單獨的提案翅帜。同樣，默認情況下從 @babel/polyfill 刪除提案
對部分軟件包進行重命名：任何關(guān)于 TC39 提議的插件現(xiàn)在更改為 -proposal 而不再是 -transform 命满。即藕甩，@babel/plugin-transform-class-properties 變更為 @babel/plugin-proposal-class-properties
為某些面向用戶的軟件包在 @babel/core 上引入 peerDependency (如，babel-loader, @babel/cli, etc)
2019年的預測
隨著基礎的建立和對改進 web 體驗的不斷推動，WebAssembly將開始普及狭莱。
React 依然高居榜首僵娃，但 Vue 和 Angular 的用戶數(shù)量仍會增長。
CSS-in-JS 可能會成為默認的樣式化方法腋妙，而不是普通的CSS樣式默怨。
開發(fā)人員是否可以重新審視原生Web組件?
毫無疑問，性能仍然是關(guān)注的焦點骤素，諸如 PWAs 和代碼分離之類的事情成為每個應用程序的標準匙睹。
在使用 PWA 的基礎上，web 變得更加本地化济竹，具有離線功能和無縫的桌面/移動體驗痕檬。
CLI工具繼續(xù)的改進，以抽象出構(gòu)建應用程序的繁瑣方面送浊，讓開發(fā)人員專注于業(yè)務開發(fā)梦谜。
更多的公司采用具有統(tǒng)一代碼庫的移動解決方案，如React Native或Flutter袭景。
docker唁桩、k8s 等工具會更加流行
GraphQL 使用方面會有了飛的增長，并被更多的公司使用耸棒。
虛擬現(xiàn)實技術(shù)利用A-Frame荒澡、React VR和谷歌VR等庫取得了長足的進步。
原文：https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2018-715724c9441d
編輯中可能存在的bug沒法實時知道与殃，事后為了解決這些bug,花了大量的時間進行l(wèi)og 調(diào)試单山，這邊順便給大家推薦一個好用的BUG監(jiān)控工具Fundebug。
最后：“相信有很多想學前端的小伙伴幅疼，今年年初我花了一個月整理了一份最適合2018年學習的web前端干貨米奸，從最基礎的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小伙伴衣屏，53763躏升，1707這里是小白聚集地，歡迎初學和進階中的小伙伴狼忱∨蚴瑁”
祝大家早日學有所成，拿到滿意offer钻弄，快速升職加薪佃却，走上人生巔峰。
