1.前言

2017悄然過(guò)去，2018已經(jīng)來(lái)到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷，希望能對(duì)大家起到一個(gè)參考作用！下面提及的技術(shù)，只是建議大家關(guān)注，也不是建議大家全部的都要學(xué)，而是建議大家按需學(xué)，自己覺得哪些需要學(xué)，對(duì)哪些有興趣就學(xué)哪些！如果大家有什么工具，框架，庫(kù)覺得可以推薦的，歡迎在評(píng)論區(qū)提點(diǎn)，讓大家相互進(jìn)步，學(xué)習(xí)！

2.PWA

PWA(Progressive Web Apps)由谷歌提出，用前沿的技術(shù)開發(fā)，讓網(wǎng)頁(yè)使用如同App般的體驗(yàn)的一系列方案。明確的一點(diǎn)就是：PWA就是一個(gè)網(wǎng)頁(yè), 可以通過(guò)前沿的技術(shù)開發(fā)出一個(gè)網(wǎng)頁(yè)應(yīng)用。

自從谷歌提出PWA后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布：PWA將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。這就意味著以后的網(wǎng)頁(yè)基本和APP將越發(fā)將近，那么關(guān)注度將會(huì)進(jìn)一步的上升。

資料參考：

• PWA 入門: 寫個(gè)非常簡(jiǎn)單的 PWA 頁(yè)面
• 【轉(zhuǎn)載】你的*** Progressive Web App
• 【轉(zhuǎn)載】下一代Web應(yīng)用模型：Progressive Web App

3.typeScript

TypeScript由微軟開發(fā)。它是JavaScript的一個(gè)超集，自由和開源的編程語(yǔ)言。在這個(gè)語(yǔ)言中，添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭Ｓ上聢D說(shuō)明typeScript和JavaScript的關(guān)系！

（圖片來(lái)源牧之--從 JavaScript 到 TypeScript）

angular已經(jīng)開始使用typeScript進(jìn)行開發(fā)，react和vue也進(jìn)一步加深對(duì)typeScript的支持。不難發(fā)現(xiàn)，typeScript的火熱程度！

資料參考：

• TypeScript官方文檔
• TypeScript 資源集
• 從 JavaScript 到 TypeScript 1 - 什么是 TypeScript（看了***篇，別落下這個(gè)系列的幾篇文章）

4.parcel能給webpack帶來(lái)多大的威脅

webpack大家都知道是JavaScript模塊打包工具，簡(jiǎn)單的來(lái)說(shuō)就是把各個(gè)模塊就行分析，編譯，打包等，使產(chǎn)出的文件可以在瀏覽器中運(yùn)行。

（圖片來(lái)源于菜鳥教程-Webpack入門教程）

webpack的工作雖然是模塊打包工具，但也能代替類似gulp等自動(dòng)構(gòu)建工具的部分功能！經(jīng)過(guò)2017的發(fā)展，webpack的火熱程度也是有目共睹。

但是，但是。在2017末就出現(xiàn)了一個(gè)黑馬：parcel。parcel出乎了大多數(shù)人的意料，也算是2017的***驚喜之一。說(shuō)到parcel的***優(yōu)勢(shì)，貌似就是webpack的***劣勢(shì)：配置和性能！parcel號(hào)稱零配置，多核打包，并且使用文件緩存，在時(shí)間上比webpack快了將近10倍！

（圖片來(lái)源于neal的文章-宣布 Parcel：一個(gè)快速，零配置的 Web 應(yīng)用打包工具）

從star上面而言，Parcel的關(guān)注度似乎超過(guò)了當(dāng)時(shí)了webpack，熱度仍在持續(xù)。

webpack難用之處，我覺得就是配置繁瑣，且文檔不完善，看著也懵逼。至于打包時(shí)間方面，只能說(shuō)沒有對(duì)比就沒有傷害吧。如果Parcel能做好這幾點(diǎn)，說(shuō)不準(zhǔn)能從webpack里面分到不少肉。

宣布 Parcel：一個(gè)快速，零配置的 Web 應(yīng)用打包工具

Parcel Vs Webpack

5.WebAssembly

由谷歌, 微軟, Mozilla，蘋果等公司合作的一個(gè)面向Web的通用二進(jìn)制和文本格式的項(xiàng)目。

引用騰訊IVWEB團(tuán)隊(duì)的說(shuō)法：WebAssembly是一種新的字節(jié)碼格式。它的縮寫是".wasm"，.wasm 為文件名后綴，是一種新的底層安全的二進(jìn)制語(yǔ)法。。它被定義為“精簡(jiǎn)、加載時(shí)間短的格式和執(zhí)行模型”，并且被設(shè)計(jì)為Web 多編程語(yǔ)言目標(biāo)文件格式。這意味著瀏覽器端的性能會(huì)得到極大提升，它也使得我們能夠?qū)崿F(xiàn)一個(gè)底層構(gòu)建模塊的集合，例如，強(qiáng)類型和塊級(jí)作用域。

WebAssembly剛出來(lái)的時(shí)候，甚至有開發(fā)者猜想，以后會(huì)不會(huì)是WebAssembly代替JavaScript。在這里，我的感覺就是JavaScript不會(huì)被WebAssembly代替，等待沒落，而是和WebAssembly共存的關(guān)系！2017年，chrome，火狐，蘋果，IE，Safari四個(gè)瀏覽器統(tǒng)一通過(guò)了WebAssembly的方案，這是很少見的情況，我所了解的是***次出現(xiàn)這樣的統(tǒng)一情況，可見四個(gè)瀏覽器廠商對(duì)WebAssembly的重視。至于2018年，WebAssembly會(huì)有如何的發(fā)展，這個(gè)難說(shuō)，初步預(yù)測(cè)應(yīng)該還是普及推廣，但是還沒有到普及開發(fā)使用的階段。但是無(wú)論如果，這個(gè)都值得關(guān)注！

來(lái)談?wù)?WebAssembly 是個(gè)啥？為何說(shuō)它會(huì)影響每一個(gè) Web 開發(fā)者？

WebAssembly 實(shí)踐：如何寫代碼

6.react,angular,vue三駕馬車

2017年，react發(fā)展的迅猛，vue更是扮演框架黑馬的角色，而angular雖然關(guān)注度不如以前，但是不容忽視！在2017的調(diào)查報(bào)告里面可以看到，趨勢(shì)基本上是react已經(jīng)占據(jù)主流，不使用框架位居第二，angular1，angular2分列三四。

中國(guó)的情況就是，react***，vue第二

vue在2017年很火，但在2018年vue的潛力不容小覷如下圖（有1.2W人想使用vue）。雖然超過(guò)react的可能性不是很大，但是位置依然會(huì)提升

參考資料

• 2017JavaScript調(diào)查報(bào)告
• 前端領(lǐng)域2017年有哪些變化，2018年又有怎樣的期待？
• 2017 前端大事件和趨勢(shì)回顧，2018 何去何從？
• 2017 JavaScript 現(xiàn)狀報(bào)告：詢問(wèn)了23000名開發(fā)者，他們給出了這樣的答案
• 2018 年最值得關(guān)注的 JavaScript 趨勢(shì)

無(wú)論如何，框架這個(gè)我覺得沒有***，只有最適合。三駕馬車也沒有說(shuō)一定要全部都要會(huì)！一下就是，如果js基礎(chǔ)好，學(xué)習(xí)框架會(huì)比較容易上手。如果極端得不學(xué)js，直接上手框架，會(huì)很吃力，很容易懵。

7.人工智能和大數(shù)據(jù)

人工智能和大數(shù)據(jù)，不是一門技術(shù)，而是一個(gè)領(lǐng)域，最近兩年都很火，也不止于前端。我也覺得是互聯(lián)網(wǎng)下一波的紅利。非常值得關(guān)注與學(xué)習(xí)！這也是一個(gè)流行的趨勢(shì)，因此一些數(shù)據(jù)可視化的工具（echart，D3等）和人工智能的庫(kù)都得以收到關(guān)注！

8.yarn VS npm

相信接觸到前端工程化，模塊化的開發(fā)者都不可避免的使用npm進(jìn)行功能包的安裝依賴。尤其是在node.js的初期，npm就是工程化的一個(gè)標(biāo)配。但是2017年，npm的地位顯然是收到了yarn的威脅！今年的調(diào)查結(jié)果，yarn還超越了npm。yarn的優(yōu)勢(shì)在于：快，安全，和一些感人細(xì)節(jié)！如果照著情況下去，差距會(huì)逐漸變大！

參考資料

• yarn, 不是又一個(gè) npm 第三方客戶端
• Yarn vs npm: 你需要知道的一切

9.css in js依然備受爭(zhēng)議？

前端領(lǐng)域，一向是推薦結(jié)構(gòu)層(html)，表現(xiàn)層(css)，行為層(javascript)分離。但是在react出來(lái)之后，這個(gè)準(zhǔn)則就貌似被推翻了！因?yàn)閞eact的組件結(jié)構(gòu)，要求把html，css，javascript寫在一起。很多開發(fā)者對(duì)css in js不適應(yīng)甚至反對(duì)。那么在新的2018年，是否還是繼續(xù)的爭(zhēng)議下去？

參考資料

• CSS in JS 簡(jiǎn)介
• 精讀《請(qǐng)停止 css-in-js 的行為》
• 大家對(duì)CSS in JS怎么看？
• 不要再在JavaScript中寫 CSS了

10.flex和grid布局更加流行

以前前端頁(yè)面布局的時(shí)候，inline-block，float，postion布局等。但是有了flex和grid，布局變得更加的簡(jiǎn)單。

首先f(wàn)lex基本已經(jīng)被所有的瀏覽器支持的，其方便的特性也受到了很多開發(fā)者的熱捧！

（圖片來(lái)源于阮一峰的網(wǎng)絡(luò)日記--Flex 布局教程：語(yǔ)法篇）

而grid，網(wǎng)格布局號(hào)稱是下一代的布局方式，但是瀏覽器兼容方面就沒有flex那么好。但是這個(gè)也是有必要了解的。畢竟已經(jīng)被W3C納入標(biāo)準(zhǔn)了。兼容性也是進(jìn)一步增強(qiáng)。

參考資料

• Flex 布局教程：語(yǔ)法篇
• Flex 布局教程：實(shí)例篇
• CSS Grid布局：什么是網(wǎng)格布局（看完這篇，建議連著看下面的幾篇，都是大漠寫的一個(gè)系列的文章，質(zhì)量非常高）
• CSS Grid VS Flexbox：實(shí)例對(duì)比

11.rxjs

rxjs我有稍微了解一下，但是還沒用上，可能是大家對(duì)這個(gè)也是比較陌生，但是我在這里提出來(lái)，是因?yàn)橛X得rxjs還是值得推薦的。引用官網(wǎng)的說(shuō)法：RxJS 是使用 Observables 的響應(yīng)式編程的庫(kù)，它使編寫異步或基于回調(diào)的代碼更容易。這個(gè)項(xiàng)目是 Reactive-Extensions/RxJS(RxJS 4) 的重寫，具有更好的性能、更好的模塊性、更好的可調(diào)試調(diào)用堆棧，同時(shí)保持大部分向后兼容，只有一些破壞性的變更(breaking changes)是為了減少外層的 API 。

參考資料

• rxjs中文文檔
• rxjs簡(jiǎn)單入門
• 通俗的方式理解RxJS

12.其它方面

受限于篇幅，還有幾個(gè)我也認(rèn)為是可以關(guān)注的簡(jiǎn)單說(shuō)下。如下

小程序

首先微信小程序，自打微信小程序一出來(lái)，很多前端就吐槽。跟別人群聊的時(shí)候，很多人也提到：小程序一出來(lái)，我就認(rèn)為是沒前途的玩意?；蛘呔褪牵簻缃^APP不可能，小程序只是一個(gè)閹割版的APP，競(jìng)爭(zhēng)廠商也不會(huì)開發(fā)小程序。還有就是：學(xué)習(xí)這個(gè)還不如關(guān)注了PWA，那個(gè)比這個(gè)更加有意義。談到的話語(yǔ)大概就是這個(gè)意思，2017年，我也是比較介意開發(fā)小程序，以至于2017我壓根就學(xué)過(guò)小程序。但是就在17年第四季度還是年末，微信先后宣布可以內(nèi)嵌html5頁(yè)面，也可以開發(fā)小游戲。讓我看過(guò)了小程序又有了剛發(fā)布的熱度。在18年，小程序發(fā)展如何，我是否會(huì)接觸和學(xué)習(xí)開發(fā)小程序，走著瞧。但是無(wú)論都值得關(guān)注。

其次是支付寶的小程序，雖然感覺沒什么新聞，但是畢竟是大廠的玩意。關(guān)注是值得關(guān)注的。至于學(xué)不學(xué)，開發(fā)不開發(fā)，另一回事！

Electron

號(hào)稱開發(fā)桌面應(yīng)用的一大神器。也嘗試了幾個(gè)官方的實(shí)例，運(yùn)行很流暢，只是因?yàn)闀簳r(shí)不開發(fā)桌面應(yīng)用，所以沒怎么關(guān)注，也沒學(xué)習(xí)過(guò)。2018年依然關(guān)注，甚至?xí)W(xué)習(xí)開發(fā)！

WebVR 與 WebAR

看了所謂的相關(guān)實(shí)例，那些VR和AR的效果并不能引起我的興趣，雖然那些實(shí)例，我也沒了解過(guò)時(shí)怎么開發(fā)的。但是，對(duì)于這一塊，關(guān)注還是值得的。畢竟這也算是WebVR和WebAR剛起步而已。

13.哪些技術(shù)會(huì)沒落/下滑

angular

前面還說(shuō)到angular在前端框架里面還有很大的使用率。谷歌方面也是出到了5.x，居然在這里會(huì)出現(xiàn)？這里只是一個(gè)小小預(yù)測(cè)而已。2017討論angular的情況已經(jīng)是比較少了，在2018年里面angular的使用率覺得會(huì)繼續(xù)下滑，但不會(huì)沒落，并且在前端框架里面依然有很大的一個(gè)地位。18年，angular還是會(huì)和react和vue齊名的三大框架，只是使用者不如react和vue那樣多。

jquery

jquery在2018年也不會(huì)沒落，只是使用率還是會(huì)進(jìn)一步的減少。說(shuō)到j(luò)query，還真是一個(gè)時(shí)代的轉(zhuǎn)變，在我剛接觸前端的時(shí)候，jquery打天下。那個(gè)時(shí)候相對(duì)于其他的庫(kù)和框架，jquery就是一個(gè)巨無(wú)霸，使用率***。就連微軟是在.net平臺(tái)上支持了jquery。在剛工作的時(shí)候，潛規(guī)則就是：不會(huì)jquery，沒人承認(rèn)你是前端?？梢姰?dāng)時(shí)的jquery的地位。也相信很多人對(duì)有jquery情懷。只是技術(shù)不講情懷！

es5以下版本語(yǔ)法

本段內(nèi)容提及的es6代表es6以上的語(yǔ)法，包括es7,es8。es5代表es5以下的語(yǔ)法，包括es3

es6經(jīng)過(guò)兩年的發(fā)展，方便和實(shí)用性得到了眾多開發(fā)者的歡迎。2017應(yīng)該是es6語(yǔ)法的使用比率***超es5，在2018年，es6語(yǔ)法使用比率會(huì)繼續(xù)的升高。而es5等語(yǔ)法的使用比率會(huì)繼續(xù)的下滑。即使就目前開發(fā)而言，還是要使用babel把es6的語(yǔ)法編譯成es5。

grunt

在gulp發(fā)布時(shí)，grunt的地址就已經(jīng)很受影響了，現(xiàn)在又有打包工具代替了自動(dòng)構(gòu)建工具的部分工具，就顯得自動(dòng)構(gòu)建工具的作用不如以前了，更別說(shuō)市場(chǎng)有一個(gè)更好的構(gòu)建工具了--gulp。

sea.js

sea.js由國(guó)人開發(fā)，當(dāng)時(shí)使用的時(shí)候還滿心歡喜，終于有國(guó)人的東西登上舞臺(tái)了。sea.js憑借簡(jiǎn)單，輕量等優(yōu)勢(shì)火極一時(shí)。但是有了es6的模塊化之后，就連sea.js的作者玉伯也在微博發(fā)言：應(yīng)該給 Sea.js 和 KISSY 也樹一塊墓碑了。

14.小結(jié)

好了，關(guān)于2018的的個(gè)人對(duì)于前端這一方面的預(yù)測(cè)和一些推薦關(guān)注的就寫到這里了！雖然寫了這么多，但是我并不是說(shuō)所有都要學(xué)，要會(huì)，而是建議大家關(guān)注，學(xué)習(xí)哪些技術(shù)看自己所需，看自己興趣。文章提及的也只是我平常關(guān)注的，有些只是我也是只是了解，但并沒有深入學(xué)或者使用。也覺得在前端這一方面，沒有什么***的工具，框架，庫(kù)等，只有最適合自己的。

***，如果大家有什么工具，框架，庫(kù)或者其它的技術(shù)，歡迎在評(píng)論區(qū)內(nèi)指點(diǎn)提出。讓大家相互學(xué)習(xí)，相互進(jìn)步！