1.前言

2017年悄然過(guò)去，2018年已經(jīng)到來(lái)。人們正在取得進(jìn)步，技術(shù)正在發(fā)展。 2018年的前端領(lǐng)域是什么，技術(shù)值得關(guān)注，哪些技術(shù)將會(huì)上升，哪些技術(shù)將會(huì)下降。讓我對(duì)我的個(gè)人判斷做出預(yù)測(cè)和判斷。我希望我能為每個(gè)人發(fā)揮參考作用！下面提到的技術(shù)只表明每個(gè)人都應(yīng)該注意它，并不建議每個(gè)人都應(yīng)該學(xué)習(xí)所有這些。您認(rèn)為您需要學(xué)習(xí)什么，以及您感興趣的是哪些？如果您有任何可以推薦的工具，框架和庫(kù)，請(qǐng)隨時(shí)在評(píng)論區(qū)域提出建議，讓每個(gè)人都進(jìn)步和學(xué)習(xí)！

2.PWA

PWA（Progressive Web Apps）由Google開(kāi)發(fā)，旨在開(kāi)發(fā)一系列使用尖端技術(shù)的應(yīng)用程序體驗(yàn)的解決方案。明確的一點(diǎn)是，PWA是一個(gè)可用于通過(guò)尖端技術(shù)開(kāi)發(fā)Web應(yīng)用程序的網(wǎng)頁(yè)。

自谷歌推出PWA以來(lái)，它一直受到業(yè)界的關(guān)注，而且熱度很明顯。就在今年，谷歌還宣布PWA將獲得與Android原生應(yīng)用相同的待遇和特權(quán)。這意味著基本網(wǎng)頁(yè)和APP將越來(lái)越近，因此關(guān)注度將進(jìn)一步提高。

信息參考：

PWA入門(mén):編寫(xiě)一個(gè)非常簡(jiǎn)單的PWA頁(yè)面

[保留]您的第一個(gè)Progressive Web App

[保留]下一代Web應(yīng)用程序模型：漸進(jìn)式Web應(yīng)用程序

3.typeScript

TypeScript由Microsoft開(kāi)發(fā)。它是JavaScript的超集，JavaScript是一種免費(fèi)的開(kāi)源編程語(yǔ)言。在這種語(yǔ)言中，添加了可選的靜態(tài)類(lèi)型和基于類(lèi)的面向?qū)ο缶幊獭?typeScript和JavaScript之間的關(guān)系如下圖所示！

（圖像來(lái)源田園 - 從JavaScript到TypeScript）

Angular已經(jīng)開(kāi)始使用typeScript開(kāi)發(fā)，而react和vue進(jìn)一步加深了對(duì)typeScript的支持。不難發(fā)現(xiàn)打字稿的熱門(mén)程度如何！

信息參考：

TypeScript官方文檔

TypeScript資源集

從JavaScript到TypeScript 1 - 什么是TypeScript（請(qǐng)看第一篇，不要在本系列中刪除一些文章）

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

Webpack每個(gè)人都知道它是一個(gè)JavaScript模塊打包工具。簡(jiǎn)單地說(shuō)，每個(gè)模塊都經(jīng)過(guò)分析，編譯，打包等，以便輸出文件可以在瀏覽器中運(yùn)行。

（圖片來(lái)自菜鳥(niǎo)教程 - Webpack教程）

雖然webpack工作是一個(gè)模塊打包工具，但它也可以取代像gulp這樣的自動(dòng)構(gòu)建工具的一些功能！在2017年的發(fā)展之后，webpack的熱度是顯而易見(jiàn)的。

但無(wú)論如何。 2017年底有一匹黑馬：包裹。包裹超出了大多數(shù)人的期望，是2017年最大的驚喜之一。說(shuō)到包裹的最大優(yōu)勢(shì)，它似乎是webpack的最大缺點(diǎn)：配置和性能！ Parcel聲稱(chēng)零配置，多核打包和使用文件緩存，比webpack快近10倍！

（圖片來(lái)自neal的文章 - 宣布的包裹：一種快速，零配置的Web應(yīng)用程序打包工具）

從明星的頂端來(lái)看，Parcel似乎不僅僅是當(dāng)時(shí)的webpack，而且熱量仍在繼續(xù)。

webpack很難使用，我認(rèn)為配置很麻煩，而且文檔也不完美，外觀也非常具有攻擊性。至于包裝時(shí)間，只能說(shuō)沒(méi)有比較沒(méi)有傷害。如果包裹可以做這些事情，就不可能從網(wǎng)絡(luò)包中獲得大量的肉。

宣布包裹：快速，零配置的Web應(yīng)用程序打包工具

Parcel Vs Webpack

5.WebAssembly

面向Web的通用二進(jìn)制和文本格式項(xiàng)目由Google，Microsoft，Mozilla和Apple等公司合作完成。

來(lái)自騰訊IVWEB團(tuán)隊(duì)的報(bào)價(jià)：WebAssembly是一種新的字節(jié)碼格式。它的縮寫(xiě)是'.wasm'，而.wasm是一個(gè)文件名后綴，一個(gè)新的底層安全二進(jìn)制語(yǔ)法。 。它被定義為“縮減的，短載格式和執(zhí)行模型”，并被設(shè)計(jì)為Web多編程語(yǔ)言目標(biāo)文件格式。這意味著瀏覽器端的性能將大大提高，它還使我們能夠?qū)崿F(xiàn)底層構(gòu)建塊的集合，例如強(qiáng)類(lèi)型和塊級(jí)范圍。

當(dāng)WebAssembly第一次出現(xiàn)時(shí)，甚至有開(kāi)發(fā)人員想知道WebAssembly將來(lái)是否會(huì)取代JavaScript。在這里，我的感覺(jué)是JavaScript不會(huì)被WebAssembly取代，等待下降，而是與WebAssembly的關(guān)系！ 2017年，chrome，F(xiàn)irefox，IE，Safari四個(gè)瀏覽器統(tǒng)一了WebAssembly程序，這是非常罕見(jiàn)的看情況，我所理解的是第一個(gè)這樣的情況。很明顯，四家瀏覽器供應(yīng)商都關(guān)注WebAssembly。至于2018年，WebAssembly將如何發(fā)展？很難說(shuō)初步預(yù)測(cè)應(yīng)該普及，但還沒(méi)有達(dá)到普及和發(fā)展的階段。但無(wú)論如何，這都值得關(guān)注！

我們來(lái)談?wù)刉ebAssembly是不是很尷尬？為什么它會(huì)影響每個(gè)Web開(kāi)發(fā)人員？

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

6.react，angular，vue troika

2017年，反應(yīng)迅速發(fā)展，vue正在扮演黑馬框架的角色，而且角度注意力不如以前，但也不容忽視！在2017年的調(diào)查報(bào)告中，我們可以看出趨勢(shì)基本上是反應(yīng)占據(jù)了主流，不使用框架排名第二，而angular1和angular2排名第三和第四。

中國(guó)的情況是第一反應(yīng)，第二反應(yīng)

Vue在2017年非常火爆，但2018年的vue潛力不應(yīng)低估，如下所示（有1.2W的人想要使用vue）。盡管超出反應(yīng)的可能性不是很大，但這個(gè)位置仍然會(huì)有所改善

參考

2017JavaScript調(diào)查報(bào)告

2017年前端行業(yè)發(fā)生了哪些變化，2018年的預(yù)期是什么？

2017年前端大事件和趨勢(shì)評(píng)論，2018年何去何從？

2017年JavaScript狀態(tài)報(bào)告：詢(xún)問(wèn)了23,000名提供此答案的開(kāi)發(fā)人員

2018年最值得關(guān)注的JavaScript趨勢(shì)

無(wú)論如何，我認(rèn)為框架不是最好的，只有最好的。三駕馬車(chē)并沒(méi)有說(shuō)必須滿(mǎn)足一切！關(guān)鍵是，如果js基礎(chǔ)是好的，學(xué)習(xí)框架將更容易使用。如果你不學(xué)習(xí)極端的js，那么開(kāi)始使用這個(gè)框架將是非常困難和容易的。

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

人工智能和大數(shù)據(jù)不是一種技術(shù)，而是一個(gè)在過(guò)去兩年中非常熱門(mén)的領(lǐng)域，而不僅僅是在前端。我也認(rèn)為這是互聯(lián)網(wǎng)上的下一波紅利。非常值得關(guān)注和學(xué)習(xí)！這也是一種流行的趨勢(shì)，因此一些數(shù)據(jù)可視化工具（echart，D3等）和人工智能庫(kù)已經(jīng)受到關(guān)注！

8.yarn VS npm

我相信，通過(guò)前端工程，模塊化開(kāi)發(fā)人員將不可避免地使用npm來(lái)安裝功能包。特別是在node.js的早期，npm是工程的標(biāo)準(zhǔn)。但在2017年，npm的地位顯然正在接受紗線(xiàn)的威脅！今年的調(diào)查結(jié)果顯示，紗線(xiàn)也超過(guò)了npm。紗線(xiàn)的優(yōu)點(diǎn)是：快速，安全，以及一些觸摸細(xì)節(jié)！如果你遵循這個(gè)情況，差距會(huì)逐漸變大！

參考

紗線(xiàn)，而不是另一個(gè)npm第三方客戶(hù)

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

9.css在js中仍然存在爭(zhēng)議嗎？

始終建議前端域分離結(jié)構(gòu)層（html），表示層（css）和行為層（javascript）。但在做出反應(yīng)之后，這條規(guī)則似乎被推翻了！由于反應(yīng)的組件結(jié)構(gòu)，需要一起編寫(xiě)html，css，javascript。許多開(kāi)發(fā)人員在js中不適應(yīng)甚至反對(duì)css。那么在新的2018年，它還在繼續(xù)引發(fā)爭(zhēng)議嗎？

參考

JS中的CSS簡(jiǎn)介

精讀《請(qǐng)停止 css-in-js 的行為》

您如何看待JS中的CSS？

不要再在JavaScript中編寫(xiě)CSS了

10.flex和網(wǎng)格布局更受歡迎

在前面的首頁(yè)布局中，內(nèi)聯(lián)塊，浮點(diǎn)，位置布局等。但是使用flex和grid，布局更簡(jiǎn)單。

首先，flex已經(jīng)基本上得到了所有瀏覽器的支持，其便捷的功能在很多開(kāi)發(fā)人員中都很受歡迎！

（圖片由易一峰的網(wǎng)絡(luò)日記提供 - Flex Layout Tutorial：Grammar）

網(wǎng)格，網(wǎng)格布局據(jù)說(shuō)是下一代布局，但瀏覽器兼容性不如flex。但這也是必要的。畢竟，它已被W3C列入標(biāo)準(zhǔn)。兼容性進(jìn)一步增強(qiáng)。

參考

Flex Layout教程：語(yǔ)法

Flex Layout教程：示例

CSS網(wǎng)格布局：什么是網(wǎng)格布局（看完之后，建議看下面的文章，這是沙漠中寫(xiě)的一系列文章，質(zhì)量非常高）

CSS Grid VS Flexbox：實(shí)例比較

11.rxjs

我對(duì)rxjs有一點(diǎn)了解，但它仍然沒(méi)用。可能每個(gè)人都是新手，但我在這里因?yàn)槲艺J(rèn)為rxjs仍然值得推薦。引用官方網(wǎng)站：RxJS是一個(gè)響應(yīng)式編程庫(kù)，它使用Observables使編寫(xiě)異步或基于回調(diào)的代碼更容易。該項(xiàng)目重寫(xiě)了Reactive-Extensions/RxJS（RxJS 4），具有更好的性能，更好的模塊化，更好的調(diào)試調(diào)用堆棧，同時(shí)保持最大的向后兼容性，只有一些破壞性的變化。 （重大改變）是減少API的外層。

參考

Rxjs中文文檔

rxjs入門(mén)

以流行的方式理解RxJS

12.其他方面

由于篇幅限制，我認(rèn)為還有一些其他問(wèn)題也值得關(guān)注。如下

小應(yīng)用程序

首先，WeChat小程序，來(lái)自微信小程序，許多前端吐了。在與其他人交談時(shí)，很多人還提到，當(dāng)小程序問(wèn)世時(shí)，我認(rèn)為這是一個(gè)沒(méi)有前途的問(wèn)題?；蛘咚牵簻缃^APP是不可能的，applet只是APP的閹割版本，競(jìng)爭(zhēng)對(duì)手不會(huì)開(kāi)發(fā)小程序。還有：學(xué)習(xí)這不如關(guān)注PWA那么好，這比這更有意義。關(guān)于這一點(diǎn)的話(huà)可能就是意思。在2017年，我還考慮開(kāi)發(fā)小程序，以便我從2017年開(kāi)始學(xué)習(xí)小程序。然而，在17年的第四季度或年底，微信宣布它可以嵌入html5頁(yè)面，并且還可以開(kāi)發(fā)小游戲。讓我看看小程序有釋放的熱量。在18年中，小程序的發(fā)展如何，我是否會(huì)聯(lián)系并學(xué)習(xí)開(kāi)發(fā)小程序，并四處走動(dòng)。但值得關(guān)注的是什么。

接下來(lái)是支付寶的小程序，雖然感覺(jué)不是新聞，但畢竟它是大工廠(chǎng)的東西。值得關(guān)注的是值得關(guān)注。至于學(xué)習(xí)不學(xué)習(xí)，發(fā)展不發(fā)展，另一件事！

電子

被稱(chēng)為開(kāi)發(fā)桌面應(yīng)用程序的絕佳工具。我還嘗試了幾個(gè)官方示例，操作非常順利，只是因?yàn)槲覜](méi)有開(kāi)發(fā)桌面應(yīng)用程序一段時(shí)間，所以我沒(méi)有太注意它，我沒(méi)有學(xué)習(xí)它。在2018年仍然關(guān)注，甚至學(xué)習(xí)發(fā)展！

WebVR和WebAR

在閱讀了所謂的相關(guān)例子之后，VR和AR的影響并沒(méi)有引起我的興趣。雖然那些例子，我不明白如何發(fā)展過(guò)時(shí)。然而，對(duì)于這件作品，注意仍然值得。畢竟，這也是WebVR和WebAR的開(kāi)始。

13.哪些技術(shù)將向下/向下

角

如前所述，angular在前端框架中使用率很高。谷歌也是5.x，實(shí)際上會(huì)出現(xiàn)在這里嗎？這只是一個(gè)小預(yù)測(cè)。 2017年討論角度的情況已經(jīng)相對(duì)較小。在2018年，角度的使用率將繼續(xù)下降，但不會(huì)下降，并且在前端框架中仍然具有很好的地位。在18年中，角度仍然與反應(yīng)和vue的三個(gè)框架相同，但是用戶(hù)不如反應(yīng)和反對(duì)。

Jquery的

Jquery將不會(huì)在2018年下降，但使用率將進(jìn)一步降低。說(shuō)到j(luò)query，它真的是時(shí)代的變化。當(dāng)我第一次接觸前端時(shí)，jquery擊中了世界。那時(shí)，與其他圖書(shū)館和框架相比，jquery是一個(gè)巨人，使用率遙遙領(lǐng)先。甚至微軟也在.net平臺(tái)上支持jquery。在工作時(shí)，潛規(guī)則是：沒(méi)有jquery，沒(méi)有人承認(rèn)你是前端?？梢栽趈query的狀態(tài)時(shí)看到。我也相信很多人都有jquery的感覺(jué)。只是技術(shù)不談感情！

es5

本段中提到的es6代表es6及以上語(yǔ)法，包括es7，es8。 Es5表示es5下面的語(yǔ)法，包括es3

經(jīng)過(guò)兩年的發(fā)展，es6受到了許多開(kāi)發(fā)者的歡迎，因?yàn)樗谋憷院蛯?shí)用性。 2017年應(yīng)該是es6語(yǔ)法的首次使用率超過(guò)es5。在2018年，es6語(yǔ)法使用率將繼續(xù)上升。 es5和其他語(yǔ)法的使用率將繼續(xù)下降。即使對(duì)于當(dāng)前的開(kāi)發(fā)，您仍然需要使用babel將es6語(yǔ)法編譯為es5。

咕嚕

當(dāng)gulp被釋放后，grunt的地址已經(jīng)受到影響。現(xiàn)在有了包裝工具而不是自動(dòng)構(gòu)建工具的一些工具，似乎自動(dòng)構(gòu)建工具不像以前那么好，更不用說(shuō)市場(chǎng)有更好的構(gòu)建。工具 - 吞咽。

Sea.js

sea.js是由中國(guó)人開(kāi)發(fā)的。當(dāng)時(shí)，它在使用時(shí)充滿(mǎn)了喜悅。最后，舞臺(tái)上有中國(guó)人的事情。 Sea.js以其簡(jiǎn)單，輕便和其他優(yōu)點(diǎn)而廣受歡迎。但是隨著es6的模塊化，即使是sea.js的作者，Yu Bo也在微博上發(fā)言：它也應(yīng)該是Sea.js和KISSY的墓碑。

14.摘要

那么，關(guān)于2018年個(gè)人對(duì)前端和一些建議的預(yù)測(cè)，我在這里寫(xiě)了！雖然我寫(xiě)了這么多，但我并不是說(shuō)所有人都必須學(xué)習(xí)，但我會(huì)建議大家注意。 ，了解哪些技術(shù)可以查看您的需求并了解您的興趣。提到的文章只是我通常關(guān)注的問(wèn)題，其中一些只是我，但我還沒(méi)有學(xué)習(xí)或使用它。我也覺(jué)得前端方面沒(méi)有最好的工具，框架，庫(kù)等，只有最適合你。

最后，如果您有任何工具，框架，庫(kù)或其他技術(shù)，歡迎您在評(píng)論部分指出。讓每個(gè)人相互學(xué)習(xí)，共同進(jìn)步！

« 該網(wǎng)站在線(xiàn)。網(wǎng)站運(yùn)營(yíng)的三個(gè)方面需要完成 | Mazzoni西裝定制微信推廣潛力無(wú)限 »