摘要:年前端有哪些領(lǐng)域,技術(shù)值得關(guān)注,哪些技術(shù)會(huì)興起,哪些技術(shù)會(huì)沒落。自從谷歌提出后,就持續(xù)的獲得了業(yè)界的關(guān)注,熱度可見一斑。就在今年,谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。
1.前言
2017悄然過去,2018已經(jīng)來到。人在進(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é)哪些!如果大家有什么工具,框架,庫覺得可以推薦的,歡迎在評(píng)論區(qū)提點(diǎn),讓大家相互進(jìn)步,學(xué)習(xí)!
2.PWAPWA(Progressive Web Apps)由谷歌提出,用前沿的技術(shù)開發(fā),讓網(wǎng)頁使用如同App般的體驗(yàn)的一系列方案。明確的一點(diǎn)就是:PWA就是一個(gè)網(wǎng)頁, 可以通過前沿的技術(shù)開發(fā)出一個(gè)網(wǎng)頁應(yīng)用。
自從谷歌提出PWA后,就持續(xù)的獲得了業(yè)界的關(guān)注,熱度可見一斑。就在今年,谷歌也宣布:PWA將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。這就意味著以后的網(wǎng)頁基本和APP將越發(fā)將近,那么關(guān)注度將會(huì)進(jìn)一步的上升。
資料參考:
PWA 入門: 寫個(gè)非常簡(jiǎn)單的 PWA 頁面
【轉(zhuǎn)載】你的首個(gè) Progressive Web App
【轉(zhuǎn)載】下一代Web應(yīng)用模型:Progressive Web App
TypeScript由微軟開發(fā)。它是JavaScript的一個(gè)超集,自由和開源的編程語言。在這個(gè)語言中,添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭S上聢D說明typeScript和JavaScript的關(guān)系!
(圖片來源牧之--從 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è)系列的幾篇文章)
webpack大家都知道是JavaScript模塊打包工具,簡(jiǎn)單的來說就是把各個(gè)模塊就行分析,編譯,打包等,使產(chǎn)出的文件可以在瀏覽器中運(yùn)行。
(圖片來源于菜鳥教程-Webpack入門教程)
webpack的工作雖然是模塊打包工具,但也能代替類似gulp等自動(dòng)構(gòu)建工具的部分功能!經(jīng)過2017的發(fā)展,webpack的火熱程度也是有目共睹。
但是,但是。在2017末就出現(xiàn)了一個(gè)黑馬:parcel。parcel出乎了大多數(shù)人的意料,也算是2017的最大驚喜之一。說到parcel的最大優(yōu)勢(shì),貌似就是webpack的最大劣勢(shì):配置和性能!parcel號(hào)稱零配置,多核打包,并且使用文件緩存,在時(shí)間上比webpack快了將近10倍!
(圖片來源于neal的文章-宣布 Parcel:一個(gè)快速,零配置的 Web 應(yīng)用打包工具)
從star上面而言,Parcel的關(guān)注度似乎超過了當(dāng)時(shí)了webpack,熱度仍在持續(xù)。
webpack難用之處,我覺得就是配置繁瑣,且文檔不完善,看著也懵逼。至于打包時(shí)間方面,只能說沒有對(duì)比就沒有傷害吧。如果Parcel能做好這幾點(diǎn),說不準(zhǔn)能從webpack里面分到不少肉。
宣布 Parcel:一個(gè)快速,零配置的 Web 應(yīng)用打包工具
Parcel Vs Webpack
由谷歌, 微軟, Mozilla,蘋果等公司合作的一個(gè)面向Web的通用二進(jìn)制和文本格式的項(xiàng)目。
引用騰訊IVWEB團(tuán)隊(duì)的說法:WebAssembly是一種新的字節(jié)碼格式。它的縮寫是".wasm",.wasm 為文件名后綴,是一種新的底層安全的二進(jìn)制語法。。它被定義為“精簡(jiǎn)、加載時(shí)間短的格式和執(zhí)行模型”,并且被設(shè)計(jì)為Web 多編程語言目標(biāo)文件格式。這意味著瀏覽器端的性能會(huì)得到極大提升,它也使得我們能夠?qū)崿F(xiàn)一個(gè)底層構(gòu)建模塊的集合,例如,強(qiáng)類型和塊級(jí)作用域。
WebAssembly剛出來的時(shí)候,甚至有開發(fā)者猜想,以后會(huì)不會(huì)是WebAssembly代替JavaScript。在這里,我的感覺就是JavaScript不會(huì)被WebAssembly代替,等待沒落,而是和WebAssembly共存的關(guān)系!2017年,chrome,火狐,IE,Safari四個(gè)瀏覽器統(tǒng)一通過了WebAssembly的方案,這是很少見的情況,我所了解的是第一次出現(xiàn)這樣的統(tǒng)一情況,可見四個(gè)瀏覽器廠商對(duì)WebAssembly的重視。至于2018年,WebAssembly會(huì)有如何的發(fā)展,這個(gè)難說,初步預(yù)測(cè)應(yīng)該還是普及推廣,但是還沒有到普及開發(fā)使用的階段。但是無論如果,這個(gè)都值得關(guān)注!
來談?wù)?WebAssembly 是個(gè)啥?為何說它會(huì)影響每一個(gè) Web 開發(fā)者?
WebAssembly 實(shí)踐:如何寫代碼
2017年,react發(fā)展的迅猛,vue更是扮演框架黑馬的角色,而angular雖然關(guān)注度不如以前,但是不容忽視!在2017的調(diào)查報(bào)告里面可以看到,趨勢(shì)基本上是react已經(jīng)占據(jù)主流,不使用框架位居第二,angular1,angular2分列三四。
中國的情況就是,react第一,vue第二
vue在2017年很火,但在2018年vue的潛力不容小覷如下圖(有1.2W人想使用vue)。雖然超過react的可能性不是很大,但是位置依然會(huì)提升
參考資料
2017JavaScript調(diào)查報(bào)告
前端領(lǐng)域2017年有哪些變化,2018年又有怎樣的期待?
2017 前端大事件和趨勢(shì)回顧,2018 何去何從?
2017 JavaScript 現(xiàn)狀報(bào)告:詢問了23000名開發(fā)者,他們給出了這樣的答案
2018 年最值得關(guān)注的 JavaScript 趨勢(shì)
無論如何,框架這個(gè)我覺得沒有最好,只有最適合。三駕馬車也沒有說一定要全部都要會(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等)和人工智能的庫都得以收到關(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: 你需要知道的一切
前端領(lǐng)域,一向是推薦結(jié)構(gòu)層(html),表現(xiàn)層(css),行為層(javascript)分離。但是在react出來之后,這個(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了
以前前端頁面布局的時(shí)候,inline-block,float,postion布局等。但是有了flex和grid,布局變得更加的簡(jiǎn)單。
首先flex基本已經(jīng)被所有的瀏覽器支持的,其方便的特性也受到了很多開發(fā)者的熱捧!
(圖片來源于阮一峰的網(wǎng)絡(luò)日記--Flex 布局教程:語法篇)
而grid,網(wǎng)格布局號(hào)稱是下一代的布局方式,但是瀏覽器兼容方面就沒有flex那么好。但是這個(gè)也是有必要了解的。畢竟已經(jīng)被W3C納入標(biāo)準(zhǔn)了。兼容性也是進(jìn)一步增強(qiáng)。
參考資料
Flex 布局教程:語法篇
Flex 布局教程:實(shí)例篇
CSS Grid布局:什么是網(wǎng)格布局(看完這篇,建議連著看下面的幾篇,都是大漠寫的一個(gè)系列的文章,質(zhì)量非常高)
CSS Grid VS Flexbox:實(shí)例對(duì)比
rxjs我有稍微了解一下,但是還沒用上,可能是大家對(duì)這個(gè)也是比較陌生,但是我在這里提出來,是因?yàn)橛X得rxjs還是值得推薦的。引用官網(wǎng)的說法:RxJS 是使用 Observables 的響應(yīng)式編程的庫,它使編寫異步或基于回調(diào)的代碼更容易。這個(gè)項(xiàng)目是 Reactive-Extensions/RxJS(RxJS 4) 的重寫,具有更好的性能、更好的模塊性、更好的可調(diào)試調(diào)用堆棧,同時(shí)保持大部分向后兼容,只有一些破壞性的變更(breaking changes)是為了減少外層的 API 。
參考資料
rxjs中文文檔
rxjs簡(jiǎn)單入門
通俗的方式理解RxJS
受限于篇幅,還有幾個(gè)我也認(rèn)為是可以關(guān)注的簡(jiǎn)單說下。如下
小程序首先微信小程序,自打微信小程序一出來,很多前端就吐槽。跟別人群聊的時(shí)候,很多人也提到:小程序一出來,我就認(rèn)為是沒前途的玩意?;蛘呔褪牵簻缃^APP不可能,小程序只是一個(gè)閹割版的APP,競(jìng)爭(zhēng)廠商也不會(huì)開發(fā)小程序。還有就是:學(xué)習(xí)這個(gè)還不如關(guān)注了PWA,那個(gè)比這個(gè)更加有意義。談到的話語大概就是這個(gè)意思,2017年,我也是比較介意開發(fā)小程序,以至于2017我壓根就學(xué)過小程序。但是就在17年第四季度還是年末,微信先后宣布可以內(nèi)嵌html5頁面,也可以開發(fā)小游戲。讓我看過了小程序又有了剛發(fā)布的熱度。在18年,小程序發(fā)展如何,我是否會(huì)接觸和學(xué)習(xí)開發(fā)小程序,走著瞧。但是無論都值得關(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í)過。2018年依然關(guān)注,甚至?xí)W(xué)習(xí)開發(fā)!
WebVR 與 WebAR看了所謂的相關(guān)實(shí)例,那些VR和AR的效果并不能引起我的興趣,雖然那些實(shí)例,我也沒了解過時(shí)怎么開發(fā)的。但是,對(duì)于這一塊,關(guān)注還是值得的。畢竟這也算是WebVR和WebAR剛起步而已。
13.哪些技術(shù)會(huì)沒落/下滑 angular前面還說到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那樣多。
jqueryjquery在2018年也不會(huì)沒落,只是使用率還是會(huì)進(jìn)一步的減少。說到j(luò)query,還真是一個(gè)時(shí)代的轉(zhuǎn)變,在我剛接觸前端的時(shí)候,jquery打天下。那個(gè)時(shí)候相對(duì)于其他的庫和框架,jquery就是一個(gè)巨無霸,使用率遙遙領(lǐng)先。就連微軟是在.net平臺(tái)上支持了jquery。在剛工作的時(shí)候,潛規(guī)則就是:不會(huì)jquery,沒人承認(rèn)你是前端??梢姰?dāng)時(shí)的jquery的地位。也相信很多人對(duì)有jquery情懷。只是技術(shù)不講情懷!
es5以下版本語法本段內(nèi)容提及的es6代表es6以上的語法,包括es7,es8。es5代表es5以下的語法,包括es3
es6經(jīng)過兩年的發(fā)展,方便和實(shí)用性得到了眾多開發(fā)者的歡迎。2017應(yīng)該是es6語法的使用比率首次超es5,在2018年,es6語法使用比率會(huì)繼續(xù)的升高。而es5等語法的使用比率會(huì)繼續(xù)的下滑。即使就目前開發(fā)而言,還是要使用babel把es6的語法編譯成es5。
grunt在gulp發(fā)布時(shí),grunt的地位就已經(jīng)很受影響了,現(xiàn)在又有打包工具代替了自動(dòng)構(gòu)建工具的部分工具,就顯得自動(dòng)構(gòu)建工具的作用不如以前了,更別說市場(chǎng)有一個(gè)更好的構(gòu)建工具了--gulp。
sea.jssea.js由國人開發(fā),當(dāng)時(shí)使用的時(shí)候還滿心歡喜,終于有國人的東西登上舞臺(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)注的就寫到這里了!雖然寫了這么多,但是我并不是說所有都要學(xué),要會(huì),而是建議大家關(guān)注,學(xué)習(xí)哪些技術(shù)看自己所需,看自己興趣。文章提及的也只是我平常關(guān)注的,有些只是我也是只是了解,但并沒有深入學(xué)或者使用。也覺得在前端這一方面,沒有什么最好的工具,框架,庫等,只有最適合自己的。
最后,如果大家有什么工具,框架,庫或者其它的技術(shù),歡迎在評(píng)論區(qū)內(nèi)指點(diǎn)提出。讓大家相互學(xué)習(xí),相互進(jìn)步!
-------------------------華麗的分割線--------------------
想了解更多,關(guān)注關(guān)注我的微信公眾號(hào):守候書閣
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90732.html
摘要:年前端有哪些領(lǐng)域,技術(shù)值得關(guān)注,哪些技術(shù)會(huì)興起,哪些技術(shù)會(huì)沒落。自從谷歌提出后,就持續(xù)的獲得了業(yè)界的關(guān)注,熱度可見一斑。就在今年,谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去,2018已經(jīng)來到。人在進(jìn)步,技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域,技術(shù)值得關(guān)注,哪些技術(shù)會(huì)興起,哪些技術(shù)會(huì)沒落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷,希望能對(duì)大家...
摘要:年的報(bào)告,總共有來自個(gè)不同的國家共多名開發(fā)者參與調(diào)查中國占總數(shù)的,共個(gè)開發(fā)者。今年的報(bào)告和前兩年不同,取消了部分。此比率較高的國家地區(qū)顯示為紅色,較低的國家地區(qū)顯示為藍(lán)色調(diào)查受訪者總數(shù)少于的國家地區(qū)將被省略。 前言 作為前端開發(fā)者,及時(shí)了解行業(yè)動(dòng)態(tài)對(duì)我們的工作、學(xué)習(xí)方向起到至關(guān)重要的作用,畢竟知識(shí)太多,選擇對(duì)的學(xué)習(xí)方向才能既省力又能緊跟技術(shù)發(fā)展潮流。近期,StateOfJS發(fā)布了剛剛過...
摘要:年的報(bào)告,總共有來自個(gè)不同的國家共多名開發(fā)者參與調(diào)查中國占總數(shù)的,共個(gè)開發(fā)者。今年的報(bào)告和前兩年不同,取消了部分。此比率較高的國家地區(qū)顯示為紅色,較低的國家地區(qū)顯示為藍(lán)色調(diào)查受訪者總數(shù)少于的國家地區(qū)將被省略。 前言 作為前端開發(fā)者,及時(shí)了解行業(yè)動(dòng)態(tài)對(duì)我們的工作、學(xué)習(xí)方向起到至關(guān)重要的作用,畢竟知識(shí)太多,選擇對(duì)的學(xué)習(xí)方向才能既省力又能緊跟技術(shù)發(fā)展潮流。近期,StateOfJS發(fā)布了剛剛過...
摘要:類似,是由,和個(gè)人開發(fā)者和公司的社區(qū)維護(hù)。這是非常流行的用于設(shè)計(jì)網(wǎng)站和應(yīng)用程序的開源前端框架。這是另一個(gè)日益普及的大數(shù)據(jù)框架。最初是由創(chuàng)建的另一個(gè)移動(dòng)應(yīng)用程序開發(fā)框架。在年收購了,將其重新命名為,后來又發(fā)布了一個(gè)名為的開源軟件。 春節(jié)即將來臨,許多開發(fā)者們已經(jīng)做好了新一年的學(xué)習(xí)計(jì)劃,假如你還沒有計(jì)劃好2018年,可以看下這一篇文章,在這篇文章中,我將分享一些值得開發(fā)者學(xué)習(xí)的優(yōu)秀框架,以...
摘要:我們的目標(biāo)是找出最有職業(yè)投資回報(bào)率的主題和技術(shù)。比特幣在幾年內(nèi)增長(zhǎng)了若干個(gè)量級(jí)。比特幣倍拐點(diǎn)在這個(gè)圖表中,每個(gè)箭頭始于倍點(diǎn),指向價(jià)格修正后的最低點(diǎn)。 showImg(https://segmentfault.com/img/remote/1460000017919159); 圖:Jon Glittenberg Happy New Year 2019 (CC BY 2.0) 又到了一年的...
閱讀 2706·2023-04-26 02:02
閱讀 2571·2023-04-25 20:38
閱讀 4098·2021-09-26 09:47
閱讀 3092·2021-09-10 10:50
閱讀 3765·2021-09-07 09:58
閱讀 3326·2019-08-30 15:54
閱讀 2694·2019-08-30 15:54
閱讀 1918·2019-08-29 17:03