2018前端開發值得關注的技術趨勢--摘抄

1.前言

 

2017悄然過去，2018已經來到。人在進步，技術在發展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我我的的判斷進行一個預測判斷，但願能對你們起到一個參考做用！下面說起的技術，只是建議你們關注，也不是建議你們所有的都要學，而是建議你們按需學，本身以爲哪些須要學，對哪些有興趣就學哪些！若是你們有什麼工具，框架，庫以爲能夠推薦的，歡迎在評論區提點，讓你們相互進步，學習！

 

2.PWA

 

PWA(Progressive Web Apps)由谷歌提出，用前沿的技術開發，讓網頁使用如同App般的體驗的一系列方案。明確的一點就是：PWA就是一個網頁, 能夠經過前沿的技術開發出一個網頁應用。

 

自從谷歌提出PWA後，就持續的得到了業界的關注，熱度可見一斑。就在今年，谷歌也宣佈：PWA將得到與安卓原生應用同等的待遇與權限 http://www.infoq.com/cn/news/2017/02/PWA-Chrome。這就意味着之後的網頁基本和APP將愈加將近，那麼關注度將會進一步的上升。

 

資料參考：
PWA 入門: 寫個很是簡單的 PWA 頁面 https://zhuanlan.zhihu.com/p/25459319

【轉載】你的首個 Progressive Web App https://www.w3cplus.com/pwa/your-first-pwapp.html

【轉載】下一代Web應用模型：Progressive Web App https://www.w3cplus.com/pwa/nextgen-web-pwa.html

 

3.typeScript

 

TypeScript由微軟開發。它是JavaScript的一個超集，自由和開源的編程語言。在這個語言中，添加了可選的靜態類型和基於類的面向對象編程。由下圖說明typeScript和JavaScript的關係！

 

 

（圖片來源牧之--從 JavaScript 到 TypeScript）

 

angular已經開始使用typeScript進行開發，react和vue也進一步加深對typeScript的支持。不難發現，typeScript的火熱程度！

 

資料參考：
TypeScript官方文檔 https://www.tslang.cn/docs/home.html

TypeScript 資源集 https://segmentfault.com/a/1190000010130073

從 JavaScript 到 TypeScript 1 - 什麼是 TypeScript http://tasaid.com/Blog/20171011231943.html?sgs=sf（看了第一篇，別落下這個系列的幾篇文章）

 

4.parcel能給webpack帶來多大的威脅

 

webpack https://github.com/webpack/webpack你們都知道是JavaScript模塊打包工具，簡單的來講就是把各個模塊就行分析，編譯，打包等，使產出的文件能夠在瀏覽器中運行。

 

 

 

（圖片來源於菜鳥教程-Webpack入門教程）

 

webpack的工做雖然是模塊打包工具，但也能代替相似gulp等自動構建工具的部分功能！通過2017的發展，webpack的火熱程度也是有目共睹。

 

可是，可是。在2017末就出現了一個黑馬：parcel https://github.com/parcel-bundler/parcel。parcel出乎了大多數人的意料，也算是2017的最大驚喜之一。說到parcel的最大優點，貌似就是webpack的最大劣勢：配置和性能！parcel號稱零配置，多核打包，而且使用文件緩存，在時間上比webpack快了將近10倍！

 

 

（圖片來源於neal的文章-宣佈 Parcel：一個快速，零配置的 Web 應用打包工具）

 

從star上面而言，Parcel的關注度彷佛超過了當時了webpack，熱度仍在持續。

 

webpack難用之處，我以爲就是配置繁瑣，且文檔不完善，看着也懵逼。至於打包時間方面，只能說沒有對比就沒有傷害吧。若是Parcel能作好這幾點，說不許能從webpack裏面分到很多肉。

 

資料參考：

宣佈 Parcel：一個快速，零配置的 Web 應用打包工具 https://segmentfault.com/a/1190000012332187

Parcel Vs Webpack http://www.imweb.io/topic/5a4451c3a192c3b460fce366

 

5.WebAssembly

 

由谷歌, 微軟, Mozilla，蘋果等公司合做的一個面向Web的通用二進制和文本格式的項目。

 

引用騰訊IVWEB團隊的說法：WebAssembly是一種新的字節碼格式。它的縮寫是".wasm"，.wasm 爲文件名後綴，是一種新的底層安全的二進制語法。。它被定義爲「精簡、加載時間短的格式和執行模型」，而且被設計爲Web 多編程語言目標文件格式。這意味着瀏覽器端的性能會獲得極大提高，它也使得咱們可以實現一個底層構建模塊的集合，例如，強類型和塊級做用域。

 

WebAssembly剛出來的時候，甚至有開發者猜測，之後會不會是WebAssembly代替JavaScript。在這裏，個人感受就是JavaScript不會被WebAssembly代替，等待沒落，而是和WebAssembly共存的關係！2017年，chrome，火狐，蘋果，IE，Safari四個瀏覽器統一經過了WebAssembly的方案，這是不多見的狀況，我所瞭解的是第一次出現這樣的統一狀況，可見四個瀏覽器廠商對WebAssembly的重視。至於2018年，WebAssembly會有如何的發展，這個難說，初步預測應該仍是普及推廣，可是尚未到普及開發使用的階段。可是不管若是，這個都值得關注！

 

來談談 WebAssembly 是個啥？爲什麼說它會影響每個 Web 開發者？https://cloud.tencent.com/developer/article/1004696

WebAssembly 實踐：如何寫代碼 https://segmentfault.com/a/1190000008402872

 

6.react,angular,vue三駕馬車

 

2017年，react發展的迅猛，vue更是扮演框架黑馬的角色，而angular雖然關注度不如之前，可是不容忽視！在2017的調查報告裏面能夠看到，趨勢基本上是react已經佔據主流，不使用框架位居第二，angular1，angular2分列三四。

 

 

中國的狀況就是，react第一，vue第二

 

 

 

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

 

 

 

參考資料
2017JavaScript調查報告 https://stateofjs.com/2017/front-end/results/

前端領域2017年有哪些變化，2018年又有怎樣的期待？https://www.zhihu.com/question/264551320/answer/282896101

2017 前端大事件和趨勢回顧，2018 何去何從？ http://blog.csdn.net/VhWfR2u02Q/article/details/78757005

2017 JavaScript 現狀報告：詢問了23000名開發者，他們給出了這樣的答案http://36kr.com/p/5109616.html?from=related

2018 年最值得關注的 JavaScript 趨勢 http://36kr.com/p/5110763.html

 

不管如何，框架這個我以爲沒有最好，只有最適合。三駕馬車也沒有說必定要所有都要會！一下就是，若是js基礎好，學習框架會比較容易上手。若是極端得不學js，直接上手框架，會很吃力，很容易懵。

 

7.人工智能和大數據

 

人工智能和大數據，不是一門技術，而是一個領域，最近兩年都很火，也不止於前端。我也以爲是互聯網下一波的紅利。很是值得關注與學習！這也是一個流行的趨勢，所以一些數據可視化的工具（echart，D3等）和人工智能的庫都得以收到關注！

 

8.yarn VS npm

 

相信接觸到前端工程化，模塊化的開發者都不可避免的使用npm進行功能包的安裝依賴。尤爲是在node.js的初期，npm就是工程化的一個標配。可是2017年，npm的地位顯然是收到了yarn的威脅！今年的調查結果，yarn還超越了npm。yarn的優點在於：快，安全，和一些感人細節！若是照着狀況下去，差距會逐漸變大！

 

 

 

參考資料
yarn, 不是又一個 npm 第三方客戶端 https://zhuanlan.zhihu.com/p/22892675

Yarn vs npm: 你須要知道的一切 http://web.jobbole.com/88459/

 

9.css in js依然備受爭議？

 

前端領域，一貫是推薦結構層(html)，表現層(css)，行爲層(javascript)分離。可是在react出來以後，這個準則就貌似被推翻了！由於react的組件結構，要求把html，css，javascript寫在一塊兒。不少開發者對css in js不適應甚至反對。那麼在新的2018年，是否仍是繼續的爭議下去？

 

參考資料
CSS in JS 簡介 http://www.ruanyifeng.com/blog/2017/04/css_in_js.html

精讀《請中止 css-in-js 的行爲》 https://zhuanlan.zhihu.com/p/26878157

你們對CSS in JS怎麼看？http://react-china.org/t/css-in-js/1487

不要再在JavaScript中寫 CSS了http://www.techweb.com.cn/network/system/2017-07-03/2550841.shtml

 

10.flex和grid佈局更加流行

 

之前前端頁面佈局的時候，inline-block，float，postion佈局等。可是有了flex和grid，佈局變得更加的簡單。

 

首先flex基本已經被全部的瀏覽器支持的，其方便的特性也受到了不少開發者的熱捧！

 

 

（圖片來源於阮一峯的網絡日記--Flex 佈局教程：語法篇）

 

而grid，網格佈局號稱是下一代的佈局方式，可是瀏覽器兼容方面就沒有flex那麼好。可是這個也是有必要了解的。畢竟已經被W3C歸入標準了。兼容性也是進一步加強。

 

 

參考資料

Flex 佈局教程：語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Flex 佈局教程：實例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

CSS Grid佈局：什麼是網格佈局 https://www.w3cplus.com/css3/what-is-css-grid-layout.html（看完這篇，建議連着看下面的幾篇，都是大漠寫的一個系列的文章，質量很是高）
CSS Grid VS Flexbox：實例對比 https://www.jianshu.com/p/6262c3e48443

 

11.rxjs

 

rxjs我有稍微瞭解一下，可是還沒用上，多是你們對這個也是比較陌生，可是我在這裏提出來，是由於以爲rxjs仍是值得推薦的。引用官網的說法：RxJS 是使用 Observables 的響應式編程的庫，它使編寫異步或基於回調的代碼更容易。這個項目是 Reactive-Extensions/RxJS(RxJS 4) 的重寫，具備更好的性能、更好的模塊性、更好的可調試調用堆棧，同時保持大部分向後兼容，只有一些破壞性的變動(breaking changes)是爲了減小外層的 API 。

 

參考資料
rxjs中文文檔 http://cn.rx.js.org/

rxjs簡單入門 https://yq.aliyun.com/articles/65027

通俗的方式理解RxJS https://segmentfault.com/a/1190000008464065

 

12.其它方面

 

 

受限於篇幅，還有幾個我也認爲是能夠關注的簡單說下。以下

 

小程序

 

首先微信小程序，自打微信小程序一出來，不少前端就吐槽。跟別人羣聊的時候，不少人也提到：小程序一出來，我就認爲是沒前途的玩意。或者就是：滅絕APP不可能，小程序只是一個閹割版的APP，競爭廠商也不會開發小程序。還有就是：學習這個還不如關注了PWA，那個比這個更加有意義。談到的話語大概就是這個意思，2017年，我也是比較介意開發小程序，以致於2017我壓根就學太小程序。可是就在17年第四季度仍是年底，微信前後宣佈能夠內嵌html5頁面，也能夠開發小遊戲。讓我看過了小程序又有了剛發佈的熱度。在18年，小程序發展如何，我是否會接觸和學習開發小程序，走着瞧。可是不管都值得關注。

 

其次是支付寶的小程序，雖然感受沒什麼新聞，可是畢竟是大廠的玩意。關注是值得關注的。至於學不學，開發不開發，另外一回事！

 

Electron

 

號稱開發桌面應用的一大神器。也嘗試了幾個官方的實例，運行很流暢，只是由於暫時不開發桌面應用，因此沒怎麼關注，也沒學習過。2018年依然關注，甚至會學習開發！

 

WebVR 與 WebAR

 

看了所謂的相關實例，那些VR和AR的效果並不能引發個人興趣，雖然那些實例，我也沒了解過期怎麼開發的。可是，對於這一塊，關注仍是值得的。畢竟這也算是WebVR和WebAR剛起步而已。

 

13.哪些技術會沒落/下滑

 

angular

前面還說到angular在前端框架裏面還有很大的使用率。谷歌方面也是出到了5.x，竟然在這裏會出現？這裏只是一個小小預測而已。2017討論angular的狀況已是比較少了，在2018年裏面angular的使用率以爲會繼續下滑，但不會沒落，而且在前端框架裏面依然有很大的一個地位。18年，angular仍是會和react和vue齊名的三大框架，只是使用者不如react和vue那樣多。

 

jquery

jquery在2018年也不會沒落，只是使用率仍是會進一步的減小。說到jquery，還真是一個時代的轉變，在我剛接觸前端的時候，jquery打天下。那個時候相對於其餘的庫和框架，jquery就是一個巨無霸，使用率遙遙領先。就連微軟是在.net平臺上支持了jquery。在剛工做的時候，潛規則就是：不會jquery，沒人認可你是前端。可見當時的jquery的地位。也相信不少人對有jquery情懷。只是技術不講情懷！

 

es5如下版本語法

 

本段內容說起的es6表明es6以上的語法，包括es7,es8。es5表明es5如下的語法，包括es3

 

es6通過兩年的發展，方便和實用性獲得了衆多開發者的歡迎。2017應該是es6語法的使用比率首次超es5，在2018年，es6語法使用比率會繼續的升高。而es5等語法的使用比率會繼續的下滑。即便就目前開發而言，仍是要使用babel把es6的語法編譯成es5。

grunt

在gulp發佈時，grunt的地址就已經很受影響了，如今又有打包工具代替了自動構建工具的部分工具，就顯得自動構建工具的做用不如之前了，更別說市場有一個更好的構建工具了--gulp。

 

sea.js

sea.js由國人開發，當時使用的時候還滿心歡喜，終於有國人的東西登上舞臺了。sea.js憑藉簡單，輕量等優點火極一時。可是有了es6的模塊化以後，就連sea.js的做者玉伯也在微博發言：應該給 Sea.js 和 KISSY 也樹一塊墓碑了。

 

14.小結

 

好了，關於2018的的我的對於前端這一方面的預測和一些推薦關注的就寫到這裏了！雖然寫了這麼多，可是我並非說全部都要學，要會，而是建議你們關注，學習哪些技術看本身所需，看本身興趣。文章說起的也只是我日常關注的，有些只是我也是隻是瞭解，但並無深刻學或者使用。也以爲在前端這一方面，沒有什麼最好的工具，框架，庫等，只有最適合本身的。

 

最後，若是你們有什麼工具，框架，庫或者其它的技術，歡迎在評論區內指點提出。讓你們相互學習，相互進步！