2018最值得關注的前端技術

程式設計師詩人發表於2018-02-14

1.前言

2017悄然過去,2018已經來到。人在進步,技術在發展。2018年前端有哪些領域,技術值得關注,哪些技術會興起,哪些技術會沒落。下面就我個人的判斷進行一個預測判斷,希望能對大家起到一個參考作用!下面提及的技術,只是建議大家關注,也不是建議大家全部的都要學,而是建議大家按需學,自己覺得哪些需要學,對哪些有興趣就學哪些!如果大家有什麼工具,框架,庫覺得可以推薦的,歡迎在評論區提點,讓大家相互進步,學習!

2.PWA

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

自從谷歌提出PWA後,就持續的獲得了業界的關注,熱度可見一斑。就在今年,谷歌也宣佈: PWA將獲得與安卓原生應用同等的待遇與許可權 。這就意味著以後的網頁基本和APP將越發將近,那麼關注度將會進一步的上升。

資料參考:

PWA 入門: 寫個非常簡單的 PWA 頁面

【轉載】你的首個 Progressive Web App

【轉載】下一代Web應用模型:Progressive Web App

3. TypeScript

TypeScript由微軟開發。它是JavaScript的一個超集,自由和開源的程式語言。在這個語言中,新增了可選的靜態型別和基於類的物件導向程式設計。由下圖說明typeScript和JavaScript的關係!

(圖片來源牧之– 從 JavaScript 到 TypeScript

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

資料參考:

TypeScript官方文件

TypeScript 資源集

從 JavaScript 到 TypeScript 1 – 什麼是 TypeScript (看了第一篇,別落下這個系列的幾篇文章)

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

webpack 大家都知道是JavaScript模組打包工具,簡單的來說就是把各個模組就行分析,編譯,打包等,使產出的檔案可以在瀏覽器中執行。

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

webpack的工作雖然是模組打包工具,但也能代替類似gulp等自動構建工具的部分功能!經過2017的發展,webpack的火熱程度也是有目共睹。

但是,但是。在2017末就出現了一個黑馬: parcel 。parcel出乎了大多數人的意料,也算是2017的最大驚喜之一。說到parcel的最大優勢,貌似就是webpack的最大劣勢:配置和效能!parcel號稱零配置,多核打包,並且使用檔案快取,在時間上比webpack快了將近10倍!

(圖片來源於neal的文章- 宣佈 Parcel:一個快速,零配置的 Web 應用打包工具

從star上面而言,Parcel的關注度似乎超過了當時了webpack,熱度仍在持續。

webpack難用之處,我覺得就是配置繁瑣,且文件不完善,看著也懵逼。至於打包時間方面,只能說沒有對比就沒有傷害吧。如果Parcel能做好這幾點,說不準能從webpack裡面分到不少肉。

宣佈 Parcel:一個快速,零配置的 Web 應用打包工具

Parcel Vs Webpack

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 開發者?

WebAssembly 實踐:如何寫程式碼

6.react,angular,vue三駕馬車

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

中國的情況就是,react第一,vue第二

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

參考資料

2017JavaScript調查報告

前端領域2017年有哪些變化,2018年又有怎樣的期待?

2017 前端大事件和趨勢回顧,2018 何去何從?

2017 JavaScript 現狀報告:詢問了23000名開發者,他們給出了這樣的答案

2018 年最值得關注的 JavaScript 趨勢

無論如何,框架這個我覺得沒有最好,只有最適合。三駕馬車也沒有說一定要全部都要會!一下就是,如果js基礎好,學習框架會比較容易上手。如果極端得不學js,直接上手框架,會很吃力,很容易懵。

7.人工智慧和大資料

人工智慧和大資料,不是一門技術,而是一個領域,最近兩年都很火,也不止於前端。我也覺得是網際網路下一波的紅利。非常值得關注與學習!這也是一個流行的趨勢,因此一些資料視覺化的工具(echart,D3等)和人工智慧的庫都得以收到關注!

8.yarn VS npm

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

參考資料

yarn, 不是又一個 npm 第三方客戶端

Yarn vs npm: 你需要知道的一切

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

前端領域,一向是推薦結構層(html),表現層(css),行為層(javascript)分離。但是在react出來之後,這個準則就貌似被推翻了!因為react的元件結構,要求把html,css,javascript寫在一起。很多開發者對css in js不適應甚至反對。那麼在新的2018年,是否還是繼續的爭議下去?

參考資料

CSS in JS 簡介

精讀《請停止 css-in-js 的行為》

大家對CSS in JS怎麼看?

不要再在JavaScript中寫 CSS了

10.flex和grid佈局更加流行

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

首先flex基本已經被所有的瀏覽器支援的,其方便的特性也受到了很多開發者的熱捧!

(圖片來源於阮一峰的網路日記– Flex 佈局教程:語法篇

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

參考資料

Flex 佈局教程:語法篇

Flex 佈局教程:例項篇

CSS Grid佈局:什麼是網格佈局 (看完這篇,建議連著看下面的幾篇,都是大漠寫的一個系列的文章,質量非常高)

CSS Grid VS Flexbox:例項對比

11.rxjs

rxjs我有稍微瞭解一下,但是還沒用上,可能是大家對這個也是比較陌生,但是我在這裡提出來,是因為覺得rxjs還是值得推薦的。引用官網的說法:RxJS 是使用 Observables 的響應式程式設計的庫,它使編寫非同步或基於回撥的程式碼更容易。這個專案是 Reactive-Extensions/RxJS(RxJS 4) 的重寫,具有更好的效能、更好的模組性、更好的可除錯呼叫堆疊,同時保持大部分向後相容,只有一些破壞性的變更(breaking changes)是為了減少外層的 API 。

參考資料

rxjs中文文件

rxjs簡單入門

通俗的方式理解RxJS

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的的個人對於前端這一方面的預測和一些推薦關注的就寫到這裡了!雖然寫了這麼多,但是我並不是說所有都要學,要會,而是建議大家關注,學習哪些技術看自己所需,看自己興趣。文章提及的也只是我平常關注的,有些只是我也是隻是瞭解,但並沒有深入學或者使用。也覺得在前端這一方面,沒有什麼最好的工具,框架,庫等,只有最適合自己的。

最後,如果大家有什麼工具,框架,庫或者其它的技術,歡迎在評論區內指點提出。讓大家相互學習,相互進步!

————————-華麗的分割線——————–

|


相關文章