摘要： 前端發(fā)展迅速苛白，非城阒ィ快！
- 原文：2018年前端開發(fā)回顧
- 作者：前端小智
Fundebug經(jīng)授權(quán)轉(zhuǎn)載订框，版權(quán)歸原作者所有析苫。
本文將回顧2018年一些重要的前端新聞，事件和JavaScript趨勢(shì)穿扳。
WebAssembly 發(fā)布 1.0 版本的核心規(guī)范
WebAssembly被認(rèn)為是 web 的未來衩侥。它的目標(biāo)是通過提供在web上運(yùn)行的二進(jìn)制格式來最大化性能、減少文件大小并支持多種語(yǔ)言的web開發(fā)矛物。
2017年底茫死，所有主流瀏覽器都宣布支持 WebAssembly。在2018年2月履羞，WebAssembly有三個(gè)主要版本:
NPM 各個(gè)熱門前端庫(kù)(框架)下載量比較
下載數(shù)排名前的分別為 React峦萎，jQuery，Angular 和 Vue忆首。以下是它們的拆線圖：
React庫(kù)不斷改進(jìn)爱榔，依舊稱霸前端
React在 web 開發(fā)領(lǐng)域占據(jù)主導(dǎo)地位已有多年，而且在 2018 年期間絲毫沒有放緩糙及。根據(jù)Stackoverflow 的調(diào)查详幽，它仍然是最受歡迎的一個(gè)前端庫(kù)。
核心 React 團(tuán)隊(duì)在更新庫(kù)和添加功能方面非辰牵活躍唇聘。在整個(gè)2018年，看到React v16發(fā)布版增加了許多功能柱搜，包括新的生命周期方法迟郎、新的上下文API、指針事件聪蘸、延遲函數(shù)和 React.memo 谎亩。還有，最受關(guān)注的兩個(gè)特性是 React Hook和 Suspense API宇姚。
React Hooks 得到了一些強(qiáng)烈的反饋匈庭，許多開發(fā)人員都喜歡這個(gè)更新。Hooks 是一種使用 useState 功能向函數(shù)組件添加狀態(tài)的方法浑劳，它還將管理生命周期事件阱持。
另一個(gè)新的特性是 React Suspense，它是一種管理 在 React 組件內(nèi)部獲取數(shù)據(jù)的方法魔熏。它在等待渲染異步響應(yīng)時(shí)數(shù)據(jù)衷咽，Suspense 是延遲函數(shù)背后用來管理組件的代碼分割的鸽扁。最終的設(shè)想是能夠通過Suspense 管理所有異步加載，例如API請(qǐng)求镶骗，它還允許緩存來自請(qǐng)求的結(jié)果桶现。
一般顯示加載狀態(tài)的例子是如 isFetching 為 true 時(shí)在屏幕上顯示加載圖標(biāo)。 使用 Suspense鼎姊，可以對(duì)UI進(jìn)行細(xì)粒度控制骡和，以指定等待時(shí)要顯示的回退組件，等待時(shí)間以及如何管理導(dǎo)航相寇。 許多人甚至認(rèn)為 Suspense 可以消除對(duì) Redux 的需求慰于。
Vue 迅速成長(zhǎng)，github stars 數(shù)量超過 React
在2017年實(shí)現(xiàn)爆炸式增長(zhǎng)后唤衫，Vue在2018年繼續(xù)增長(zhǎng)婆赠。事實(shí)上，它在GitHub stars數(shù)量已經(jīng)超過React佳励。
雖然Vue深受歡迎休里，但它在實(shí)際（國(guó)外）使用中仍遠(yuǎn)遠(yuǎn)落后于React和Angular。但赃承，Vue 擁有一個(gè)仍在增長(zhǎng)的充滿激情的用戶群份帐，而且這個(gè)庫(kù)將在未來幾年成為一股強(qiáng)大的力量。
Vue 3更新計(jì)劃
在11月14日-16日于多倫多舉辦的 VueConf TO 2018 大會(huì)上楣导，尤雨溪發(fā)表了名為 “ Vue 3.0 Updates ” 的主題演講，對(duì) Vue 3.0 的更新計(jì)劃畜挨、方向進(jìn)行了詳細(xì)闡述筒繁。目前該演講的 PPT 也已上傳至 Google 文檔，感興趣的可點(diǎn)此查閱巴元。本次版本主要圍繞以下幾個(gè)版本來升級(jí)：
- 更快
- 更小
- 更易于維護(hù)
- 更多的原生支持
- 更易于開發(fā)使用
完整的ppt地址：Vue 3.0 Updates
Angular依然活躍毡咏，版本7發(fā)布
今年10月，Angular在其流行的UI框架的第7版中又發(fā)布了另一個(gè)主要版本逮刨。 從早期的 AngularJS MVC架構(gòu)到使用更為現(xiàn)代的組件的Angular包呕缭，Angular 已經(jīng)有了大量的增長(zhǎng)， 隨著這種增長(zhǎng)修己，它已被進(jìn)一步采用恢总。
雖然 Angular 沒有 React 和 Vue 等庫(kù)中看到的那種狂熱開發(fā)都及使用者，但它仍然是大型專業(yè)項(xiàng)目的主要選擇睬愤。許多開發(fā)人員在使用 React 時(shí)都會(huì)感到疲憊片仿，因?yàn)樗枰こ處熢诠芾順?gòu)建管道的同時(shí)做出許多依賴和架構(gòu)決策。
另一方面尤辱，Angular 從開發(fā)人員那里省去許多決策砂豌，并提供更常見的代碼模式厢岂。Angular 是一個(gè)非常規(guī)范化的完整框架，CLI 管理所有構(gòu)建步驟阳距。專業(yè)環(huán)境的另一個(gè)好處是塔粒，Angular 需要TypeScript。Angular 已經(jīng)在 web 開發(fā)世界中挖掘出了它的價(jià)值筐摘，并繼續(xù)被采用卒茬。
注意:@angular/core 代表新的 Angular, angular 代表舊的 Angular
GraphQL 學(xué)習(xí)意愿高漲，但仍未超過 REST
GraphQL已經(jīng)被GitHub等技術(shù)領(lǐng)導(dǎo)者采用蓄拣。然而扬虚，它并沒有像一些人預(yù)測(cè)的那樣迅速起飛。根據(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)容的道路堪置，這一點(diǎn)在 CSS-in-JS 的采用中得到了體現(xiàn)，其中樣式是使用 JavaScript 字符串創(chuàng)建的张惹。這允許通過使用JS語(yǔ)法 import/export 共享樣式和依賴項(xiàng)舀锨。它還簡(jiǎn)化了動(dòng)態(tài)樣式，因?yàn)?CSS-in-JS 組件可以將道具插入到它的樣式字符串中宛逗。下面是一個(gè)經(jīng)典的 CSS vs CSS-in-JS 的例子坎匿。
要使用 CSS 管理動(dòng)態(tài)樣式，必須管理組件中的類名并根據(jù) state/props更新它雷激，還需要一個(gè)保存CSS類的變量：
使用 CSS-in-JS 替蔬，不用再管理CSS類。只需通過 props 傳遞給樣式組件屎暇，它就可以處理動(dòng)態(tài)樣式承桥。 代碼更清晰，通過基于 props 管理 CSS 的動(dòng)態(tài)樣式根悼，更清晰地分離了樣式和React的關(guān)注點(diǎn)凶异。 它現(xiàn)在讀取就像普通的 React 和JavaScript代碼一樣：
CSS-in-JS的兩個(gè)主要庫(kù)分別是 styled-components 件和 emotion 。styled-components] 已經(jīng)存在了很長(zhǎng)一段時(shí)間挤巡，并且被越來越多的人采用剩彬，但是 emotion 正在迅速得到普及，許多開發(fā)人員發(fā)現(xiàn)它是首選庫(kù)矿卑。事實(shí)上襟衰，Kent C. Dodds 甚至不贊成他自己的 CSS-in-JSS庫(kù)，，更傾向于emotion 因?yàn)樗苡绪攘Α?/p>
當(dāng)使用單個(gè)文件組件時(shí)瀑晒，Vue 還支持開箱即用的有作用域的CSS绍坝。通過 scoped 屬性添加到組件的樣式標(biāo)記，Vue 將使用 CSS-in-JS技術(shù)來定義樣式苔悦，以便它們不會(huì)滲透到其他組件中轩褐。
此外，Angular 通過“視圖封裝”支持CSS的作用域玖详，這是默認(rèn)打開的把介。
疲于使用各種CLI工具的情況有所改善
跟上最新的庫(kù)、正確配置應(yīng)用程序并做出正確的架構(gòu)決策蟋座，這些都不是什么秘密拗踢。這種痛苦催生了管理工具的 CLI 包的創(chuàng)建，讓開發(fā)人員能夠?qū)Ｗ⒂趹?yīng)用程序向臀。在 2018 年,這種 CLI 已成為開發(fā)人員創(chuàng)建應(yīng)用程序的主要方式巢墅。流行的框架包括 Next.js (SSR代表React)， Create-React-App(客戶端React)券膀， Nuxt.js(用于Vue的SSR)君纫、Vue CLI(客戶端Vue)、Expo CLI(用于React Native)芹彬，Angular 默認(rèn)情況下支持蓄髓。
靜態(tài)網(wǎng)站生成工具繼續(xù)發(fā)展
隨著JavaScript革命的發(fā)展，每個(gè)人都喜歡學(xué)習(xí)最新最好的庫(kù)舒帮，但是完成一些項(xiàng)目時(shí)会喝，我們意識(shí)到并非每個(gè)網(wǎng)站都需要成為一個(gè)復(fù)雜的單頁(yè)面應(yīng)用程序(SPA)。這導(dǎo)致了靜態(tài)站點(diǎn)生成的增長(zhǎng)玩郊。這些工具允許在自己喜歡的庫(kù)(如React或Vue)中編寫代碼肢执，但在構(gòu)建期間生成靜態(tài)HTML文件，允許我們立即為用戶提供完整構(gòu)建的頁(yè)面瓦宜。
靜態(tài)站點(diǎn)很棒，因?yàn)樗鼈兲峁┝诵阅芘c簡(jiǎn)單性的結(jié)合岭妖。使用在構(gòu)建時(shí)呈現(xiàn)的HTML文件临庇，可以立即向用戶發(fā)送一個(gè)頁(yè)面，并不需要 SSR 或 CSR 代碼昵慌，允許頁(yè)面幾乎在瞬間加載假夺。然后在客戶機(jī)上下載必要的 JavaScript文件，從而實(shí)現(xiàn)單頁(yè)體驗(yàn)斋攀。
靜態(tài)站點(diǎn)非常適合構(gòu)建個(gè)人網(wǎng)站或博客已卷，但是它們可以很容易地?cái)U(kuò)展到更大的應(yīng)用程序。已經(jīng)看到了構(gòu)建靜態(tài)網(wǎng)站的流行框架的興起淳蔼，比如 Gatsby 和 React static for React應(yīng)用侧蘸，以及 VuePress for Vue應(yīng)用裁眯。
無(wú)服務(wù)器架構(gòu)與 JAMstack
隨著靜態(tài)網(wǎng)站的日益普及，我們也看到了后端的持續(xù)增長(zhǎng)以補(bǔ)充它們讳癌。在過去的幾年里穿稳，無(wú)服務(wù)器架構(gòu)已經(jīng)成為web開發(fā)中的一個(gè)流行詞，因?yàn)樗軌蛟诮档统杀镜耐瑫r(shí)解耦客戶機(jī)和服務(wù)器代碼晌坤。
無(wú)服務(wù)器架構(gòu)的一個(gè)擴(kuò)展是 JAMStack (JavaScript逢艘、Api、Markup)骤菠。JAMStack 理念基于上一節(jié)討論的靜態(tài)站點(diǎn)概念它改。由于預(yù)先構(gòu)建的標(biāo)記，它允許快速加載時(shí)間商乎，并通過為服務(wù)器使用可重用 Api 在客戶機(jī)上成為一個(gè)動(dòng) 態(tài)SPA央拖。在2018年，甚至看到了有史以來的第一場(chǎng)J AMStack 黑客馬拉松截亦。freeCodeCamp爬泥、Netlify和GitHub聯(lián)手舉辦了一場(chǎng)面對(duì)面和在線的黑客馬拉松，開發(fā)人員可以在 GitHub 總部編寫代碼崩瓤，或者與世界各地的其他開發(fā)人員聯(lián)系袍啡。
TypeScript可能是JavaScript的未來(但對(duì)于Flow就不一樣了)
JavaScript 因?yàn)闆]有靜態(tài)類型變量而受到批評(píng)。試圖糾正這一問題的兩個(gè)主要庫(kù)是 TypeScript 和 Flow却桶，但TypeScript似乎是最受歡迎的境输。事實(shí)上，在 Stack Overflow 調(diào)查中颖系，TypeScript的受歡迎程序高于 JavaScript 本身嗅剖，分別為 67％ 和 61.9％。根據(jù) JS 的現(xiàn)狀調(diào)查嘁扼，超過80%的開發(fā)者想要使用 TS 或者已經(jīng)在使用它信粮。對(duì)于Flow，只有 34% 的開發(fā)人員正在使用它或希望使用它趁啸。
所有跡象表明强缘，TypeScript 是 JS 中靜態(tài)類型的首選解決方案，許多人選擇它而不是 JavaScript不傅。2018年旅掂，TS 的npm 下載量大幅增長(zhǎng)，而流量卻非常平穩(wěn)访娶。TypeScript看起來正在從一個(gè)狂熱的追隨者轉(zhuǎn)變?yōu)閺V泛的采用商虐。
webpack 4發(fā)布
Webpack 3發(fā)布僅8個(gè)月后，版本4就發(fā)布了。Webpack 4 繼續(xù)推動(dòng)簡(jiǎn)單和更快的構(gòu)建秘车，聲稱改進(jìn)了98%典勇。它選擇了合理的默認(rèn)值，在沒有插件的情況下處理更多的開箱即用的功能鲫尊，并且不再需要開始使用配置文件痴柔。Webpack 現(xiàn)在也支持 WebAssembly，并允許直接導(dǎo)入 WebAssembly 文件疫向。
Babel 7發(fā)布
自第6版開始將近3年后咳蔚，Babel 7 于 2018 年發(fā)布。Babel 是將 ES6 + 代碼轉(zhuǎn)換為 ES5 的庫(kù)搔驼，使JavaScript 代碼跨瀏覽器兼容谈火。
Babel 7.0帶來的不兼容性變更：
- 刪除對(duì)未維護(hù)的 Node 版本的支持：0.10,0.12,2,5
- 通過切換到使用“scoped”包將現(xiàn)已遷移到 @babel 命名空間，這有助于區(qū)分官方軟件包舌涨，因此 babel-core 將成為 @babel/core
- 刪除（并停止發(fā)布）任何年度預(yù)設(shè)（preset-es2015 等）糯耍， @babel/preset-env 取代了對(duì)這些內(nèi)容的需求，因?yàn)樗怂心甓忍砑觾?nèi)容以及針對(duì)特定瀏覽器集的能力
- 同時(shí)刪除“Stage”預(yù)設(shè)（@babel/preset-stage-0 等）囊嘉，轉(zhuǎn)而選擇單獨(dú)的提案温技。同樣，默認(rèn)情況下從 @babel/polyfill 刪除提案
- 對(duì)部分軟件包進(jìn)行重命名：任何關(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年的預(yù)測(cè)
- 隨著基礎(chǔ)的建立和對(duì)改進(jìn) web 體驗(yàn)的不斷推動(dòng)琢蛤，WebAssembly將開始普及蜓堕。
- React 依然高居榜首，但 Vue 和 Angular 的用戶數(shù)量仍會(huì)增長(zhǎng)博其。
- CSS-in-JS 可能會(huì)成為默認(rèn)的樣式化方法套才，而不是普通的CSS樣式。
- 開發(fā)人員是否可以重新審視原生Web組件?
- 毫無(wú)疑問慕淡，性能仍然是關(guān)注的焦點(diǎn)背伴，諸如 PWAs 和代碼分離之類的事情成為每個(gè)應(yīng)用程序的標(biāo)準(zhǔn)。
- 在使用PWA的基礎(chǔ)上峰髓，web變得更加本地化傻寂，具有離線功能和無(wú)縫的桌面/移動(dòng)體驗(yàn)。
- CLI工具繼續(xù)的改進(jìn)儿普，以抽象出構(gòu)建應(yīng)用程序的繁瑣方面崎逃，讓開發(fā)人員專注于業(yè)務(wù)開發(fā)掷倔。
- 更多的公司采用具有統(tǒng)一代碼庫(kù)的移動(dòng)解決方案眉孩，如React Native或Flutter。
- Docker、Kubernetes等工具會(huì)更加流行
- GraphQL 使用方面會(huì)有了飛的增長(zhǎng)浪汪，并被更多的公司使用巴柿。
- 虛擬現(xiàn)實(shí)技術(shù)利用A-Frame、React VR和谷歌VR等庫(kù)取得了長(zhǎng)足的進(jìn)步死遭。
原文：https://levelup.gitconnected....
應(yīng)用部署之后广恢，可能存在的bug沒法實(shí)時(shí)知道，事后為了解決這些bug呀潭，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試钉迷，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具Fundebug。
你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力钠署，歡迎點(diǎn)贊糠聪！
一個(gè)笨笨的碼農(nóng)，我的世界只能終身學(xué)習(xí)谐鼎！
更多內(nèi)容請(qǐng)關(guān)注公眾號(hào)《大遷世界》舰蟆！
關(guān)于Fundebug
Fundebug專注于JavaScript、微信小程序狸棍、微信小游戲身害、支付寶小程序、React Native草戈、Node.js和Java實(shí)時(shí)BUG監(jiān)控塌鸯。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了9億+錯(cuò)誤事件猾瘸，得到了Google界赔、360、金山軟件牵触、百姓網(wǎng)等眾多知名用戶的認(rèn)可淮悼。歡迎免費(fèi)試用！
版權(quán)聲明
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/12/21/recap-of-frontend-development-2018/
