網(wǎng)站前端開(kāi)發(fā)在過(guò)去的2017年有哪些演變？跟老司機(jī)一起來(lái)回顧！
在過(guò)去的2017年網(wǎng)站前端開(kāi)發(fā)領(lǐng)域發(fā)生了怎樣的演變？即將到來(lái)的2018又將會(huì)有怎樣的發(fā)展趨勢(shì)呢？一起來(lái)看看網(wǎng)站開(kāi)發(fā)領(lǐng)域的老司機(jī)肥貓的經(jīng)驗(yàn)之談，希望能有你想看到的答案。
逃不過(guò)的三大框架
React繼續(xù)在前端領(lǐng)域占據(jù)著主導(dǎo)地位，并在2017年發(fā)布了最受期待的版本之一-React16。它包含了可以實(shí)現(xiàn)異步UI渲染的fiber架構(gòu)。通過(guò)提供包括錯(cuò)誤邊界在內(nèi)的很多其他特性。但React在這一年中所取得最重要的成就不是它推出的新特性，而是修改了它的開(kāi)源協(xié)議：BSD協(xié)議->MIT協(xié)議。除此外，Jest、Flow、Immutable.js和GraphQL授權(quán)也都改為MIT協(xié)議。
Angular市場(chǎng)占有率持續(xù)下滑(相較于React)，發(fā)布了V4(3月23日)以及V5(11月2日)，在V4中看到了AngularUniversal成為官方項(xiàng)目的一部分以及AngularAnimation從核心包中被抽離出來(lái)，V5中則對(duì)PWA支持進(jìn)行了改進(jìn)、對(duì)編譯器優(yōu)化達(dá)到更快地構(gòu)建等。
即便React獲得了巨大成功，Vue(作者尤雨溪)也仍然越來(lái)越受歡迎。該框架提供了非常友好、簡(jiǎn)單的API，是React的主要替代方案之一。它已經(jīng)被包括GitLab在內(nèi)的大公司所采用，該公司回顧了在過(guò)去的一年里使用該框架的故事。
注：上圖為三大框架過(guò)去一年中在NPM的下載量對(duì)比圖，以下類(lèi)似的框架/包對(duì)比圖均采用npmtrends一年內(nèi)下載量進(jìn)行對(duì)比，同時(shí)附有GitHub上star/fork等狀態(tài)信息。
ECMA Script
在一個(gè)詳盡的提案過(guò)程結(jié)束之后，六月份發(fā)布了ECMAScript規(guī)范的2017年版本，其中包括一些開(kāi)創(chuàng)性的功能，如異步功能，共享內(nèi)存和原子操作(atomicoperations)。其中，共享內(nèi)存將使JavaScript中的高性能并行計(jì)算更容易處理，而且效率更高。擁有共享內(nèi)存的并行架構(gòu)對(duì)于任何想用WebGL和webworker創(chuàng)建游戲的人來(lái)說(shuō)都是巨大的誘惑。
該版本在2017年12月已經(jīng)被所有主流瀏覽器所支持，Edge表示將從v16版本開(kāi)始對(duì)這些功能進(jìn)行支持。由于Node不支持webworker，所以他們也沒(méi)有對(duì)共享內(nèi)存的支持，但他們正在重新思考該項(xiàng)決定。
Web Assembly
所有主流瀏覽器現(xiàn)在都支持WebAssembly，五月份Chrome開(kāi)始支持，F(xiàn)irefox則是從三月份就開(kāi)始支持，Edge是十月份。Safari則在第十一次發(fā)布中開(kāi)始支持。ChromeforAndroid和SafariMobile也支持WebAssembly。詳情可以參考WebAssemblysupportnowshippinginallmajorbrowsers–TheMozillaBlog
Progressive WebApps
我們一直在尋找彌補(bǔ)web和其他客戶端之間體驗(yàn)差距上的解決方案。Google一直主導(dǎo)通過(guò)將web應(yīng)用轉(zhuǎn)換為ProgressiveWebApps(PWA)來(lái)增強(qiáng)它的能力，而這一方法在2017年迅速獲得采用。一個(gè)PWA應(yīng)用利用現(xiàn)代瀏覽器技術(shù)來(lái)提供更像移動(dòng)應(yīng)用程序的web體驗(yàn)。它提供了改進(jìn)的性能和離線體驗(yàn)，以及以前僅可用于移動(dòng)的功能，例如推送通知。PWA的基礎(chǔ)是一個(gè)manifest.json文件和對(duì)serviceworkers的利用。詳情見(jiàn)ProgressiveWebApps:GreatExperiencesEverywhere(GoogleI/O‘17)。
包管理器
Bower市場(chǎng)占有率持續(xù)下降，它的最后一次發(fā)布在2016年11月，之后官方正式推薦用戶使用NPM用于管理前端項(xiàng)目中的軟件包。
NPM自從最初發(fā)布以來(lái)已經(jīng)有了相當(dāng)長(zhǎng)的一段時(shí)間，但它仍然缺少一些關(guān)鍵特性，而這正是Yarn希望補(bǔ)充的。Yarn的主要貢獻(xiàn)是包緩存，一個(gè)確保確定性構(gòu)建的鎖文件，并行操作以及依賴關(guān)系。這些功能非常成功，以致于NPM在其5.0版本中實(shí)現(xiàn)了它們。Yarn下載量超過(guò)10億次(目前每月下載量達(dá)到了125萬(wàn)次)并擁有驚人的29000多個(gè)GitHubstars。即使你沒(méi)在使用Yarn，JavaScript的包管理整體上由于Yarn的發(fā)布也得到了顯著地提升。
針對(duì)Yarn的出現(xiàn)，NPM回?fù)粢詖5版本的發(fā)布，這個(gè)版本顯著提高了性能(包括上述的Yarn發(fā)布的功能)。
樣式布局
網(wǎng)格布局最終被CSS采納為標(biāo)準(zhǔn)，瀏覽器也正在快速地采用它。過(guò)去，網(wǎng)格系統(tǒng)在CSS中曾被tables、float、flex以及inline-block實(shí)現(xiàn)過(guò)。
2017年見(jiàn)證了styled-components(由MaxStoiber、GlenMaddern和PhilPlückthun創(chuàng)建)在流行程度上逐漸占據(jù)主導(dǎo)地位。Emotion(由KyeHohenberger創(chuàng)建)是最新的JavaScript庫(kù)之一，但它已經(jīng)被迅速采用。另一個(gè)可選方案是glamorous(由PayPal、KentC.Dodds和一群熱情的貢獻(xiàn)者創(chuàng)建)，它封裝了glamor庫(kù)。
在過(guò)去的幾年里，像SASS，Less和Stylus這樣的CSS預(yù)處理器已經(jīng)流行起來(lái)。PostCSS于2014年推出，而在2017年真正火爆起來(lái)，成為目前最受歡迎的CSS預(yù)處理器。
另一方面，在2017年，主要的進(jìn)步來(lái)自CSS-in-JS的明顯改進(jìn)與采用，其中所有樣式都是通過(guò)代碼而不是樣式表進(jìn)行構(gòu)建的。目前還不清楚這是否將成為前端社區(qū)的最終方向，但這是目前最新的方法。
PostCSS仍然是首選的CSS預(yù)處理器，但是很多都在切換到CSS-in-JS解決方案。
注：評(píng)論中有同學(xué)談到PostCSS是后處理器，根據(jù)定義，CSS后處理器是對(duì)CSS進(jìn)行處理，并最終生成CSS的預(yù)處理器，它屬于廣義上的CSS預(yù)處理器。由于本人回答時(shí)的定位以及參考的文獻(xiàn)中所指，故這里不做細(xì)分，認(rèn)定PostCSS為預(yù)處理器。細(xì)致的同學(xué)可以做進(jìn)一步的細(xì)分。
工程模塊化工具
Webpack2于今年2月份發(fā)布。它帶來(lái)了諸如ES6模塊(不再需要Babel轉(zhuǎn)換import語(yǔ)句)和treeshaking(消除了打包中未使用的代碼)等重要功能。此后不久，V3發(fā)布了一個(gè)名為“scopehoisting”的功能，將所有的webpack模塊放入一個(gè)單獨(dú)的JavaScript包中，從而大大縮小了它的尺寸。
7月份，Webpack團(tuán)隊(duì)從Mozilla開(kāi)源支持計(jì)劃獲得了一筆贈(zèng)款，以便為WebAssembly提供一流的支持。
Parcel作為一個(gè)有趣的項(xiàng)目，在短短十天內(nèi)便在GitHub上獲得了10000個(gè)star。它主要通過(guò)利用多個(gè)CPU內(nèi)核和一個(gè)高效的文件系統(tǒng)緩存來(lái)實(shí)現(xiàn)。它還基于抽象語(yǔ)法樹(shù)進(jìn)行操作，而不像Webpack使用字符串。
除此外，Rollup的發(fā)展也不容小覷。4月React團(tuán)隊(duì)從Gulp切換到了Rollup進(jìn)行開(kāi)發(fā)。除此外，Webpack團(tuán)隊(duì)也推薦在某些方面使用Rollup而不是Webpack。
Type Script
JavaScript中缺少類(lèi)型一直是很多人的抱怨所在。為了解決這些問(wèn)題，TypeScript出現(xiàn)。它由微軟創(chuàng)建，TypeScript-JavaScriptthatscales.JavaScript中缺少類(lèi)型一直是很多人的抱怨所在。為了解決這些問(wèn)題，TypeScript出現(xiàn)。它由微軟創(chuàng)建，由于其出色的表現(xiàn)贏得了很多JavaScript開(kāi)發(fā)者的追捧，而Flow提供了一種在不需要激進(jìn)的重構(gòu)下更為靈活的方式來(lái)引入類(lèi)型，后者是Facebook的成果。
應(yīng)用狀態(tài)管理
Redux仍然作為React項(xiàng)目推薦的狀態(tài)管理解決方案，并在2017年獲得了五倍的增長(zhǎng)速度(NPM下載量)。
Mobx成長(zhǎng)的也很快，并被一些高利潤(rùn)公司所使用，例如IBM，美國(guó)銀行以及Lyft。
除此外，MobX團(tuán)隊(duì)正在努力，希望在新項(xiàng)目——mobx-state-tree(MST)中結(jié)合Redux和MobX的優(yōu)點(diǎn)。
Graph QL
GraphQL似乎在REST之上迅速占據(jù)了一席之地，SamerBuna甚至聲稱REST已經(jīng)死亡。GitHub已經(jīng)使用GraphQL編寫(xiě)了最新版本的API，與此同時(shí)為了使GraphQL對(duì)所有開(kāi)發(fā)人員可用，許多公司正在開(kāi)發(fā)產(chǎn)品，例如JohannesSchickling開(kāi)發(fā)的Graphcool框架。
靜態(tài)網(wǎng)站生成方案
2017見(jiàn)證了靜態(tài)網(wǎng)站卷土重來(lái)。像Gatsby這樣的框架使您能夠使用React和其他現(xiàn)代工具構(gòu)建靜態(tài)網(wǎng)站。不是每個(gè)網(wǎng)站都需要或應(yīng)該成為一個(gè)復(fù)雜的現(xiàn)代web應(yīng)用。由于采用與預(yù)構(gòu)建標(biāo)記(原文prebuiltmarkup)，靜態(tài)網(wǎng)站生成方案使你獲得服務(wù)器端渲染的好處和絕無(wú)僅有的速度。如果你正在尋找一個(gè)很好的例子，React官方文檔就是用Gatsby構(gòu)建的。
在即將到來(lái)的2018年中，我們期待：
基于組件應(yīng)用中的樣式是否是組織CSS的最佳方式？有關(guān)該內(nèi)容的討論或許會(huì)激化。
越來(lái)越多的公司采用具有統(tǒng)一代碼庫(kù)的移動(dòng)端解決方案，如ReactNative，F(xiàn)lutter或Weex。
因?yàn)殡x線能力和無(wú)縫的移動(dòng)端體驗(yàn)，web變得更加原生，再加上蘋(píng)果對(duì)ServiceWorker的表態(tài)ReleaseNotesforSafariTechnologyPreview46，PWA在2018年可能會(huì)被全面支持。
WebAssembly可以取得長(zhǎng)足的進(jìn)步，提供一個(gè)更好的web體驗(yàn)。
GraphQL正在并繼續(xù)挑戰(zhàn)REST。
由于不再有對(duì)開(kāi)源協(xié)議上的爭(zhēng)議，React強(qiáng)化了它的地位。
Flow和TypeScript采取更強(qiáng)大的舉措，使JavaScript更具結(jié)構(gòu)。
虛擬現(xiàn)實(shí)使用類(lèi)似A-Frame、ReactVR和GoogleVR這樣的庫(kù)正在向前邁進(jìn)。
人們使用區(qū)塊鏈和web3.js(由MarekKotewicz和FabianVogelsteller創(chuàng)建)構(gòu)建了一些非常酷的應(yīng)用程序。
構(gòu)建方案的持續(xù)發(fā)展，Webpack，Rollup以及后起之秀Parcel等在構(gòu)建方案份額中扮演這一種合久必分、分久必合的輪回。
本文標(biāo)簽： 網(wǎng)站開(kāi)發(fā) 網(wǎng)站制作 網(wǎng)頁(yè)前端開(kāi)發(fā)
攜手肥貓，做個(gè)顏值派！推薦城市：
蘇州建站公司 杭州網(wǎng)站建設(shè) 廣州建網(wǎng)站 唐山網(wǎng)站建設(shè) 鄂爾多斯企業(yè)建站 鄭州企業(yè)建站 長(zhǎng)沙網(wǎng)站建設(shè) 石家莊做網(wǎng)站 徐州建網(wǎng)站
天門(mén)網(wǎng)站制作 恩施網(wǎng)站制作 鐘祥網(wǎng)站設(shè)計(jì) 洪湖網(wǎng)站制作 當(dāng)陽(yáng)網(wǎng)站設(shè)計(jì) 武穴網(wǎng)站建設(shè) 襄陽(yáng)做網(wǎng)站 鄂州企業(yè)建站 枝江網(wǎng)頁(yè)制作
蘇州建站公司 杭州網(wǎng)站建設(shè) 廣州建網(wǎng)站 唐山網(wǎng)站建設(shè) 鄂爾多斯企業(yè)建站 鄭州企業(yè)建站 長(zhǎng)沙網(wǎng)站建設(shè) 石家莊做網(wǎng)站 徐州建網(wǎng)站
天門(mén)網(wǎng)站制作 恩施網(wǎng)站制作 鐘祥網(wǎng)站設(shè)計(jì) 洪湖網(wǎng)站制作 當(dāng)陽(yáng)網(wǎng)站設(shè)計(jì) 武穴網(wǎng)站建設(shè) 襄陽(yáng)做網(wǎng)站 鄂州企業(yè)建站 枝江網(wǎng)頁(yè)制作
網(wǎng)站應(yīng)該怎么做.jpg)
備類(lèi)網(wǎng)站推廣方案.jpg)
類(lèi)網(wǎng)站建設(shè)費(fèi)用明細(xì)表.jpg)
網(wǎng)站內(nèi)容運(yùn)營(yíng)方案.jpg)
體材料類(lèi)網(wǎng)站內(nèi)容運(yùn)營(yíng)方案.jpg)
網(wǎng)站應(yīng)該怎么做.jpg)
網(wǎng)站應(yīng)該怎么做.jpg)
浴設(shè)施類(lèi)網(wǎng)站建設(shè)費(fèi)用明細(xì)表.jpg)
類(lèi)網(wǎng)站建設(shè)方案書(shū).jpg)
施類(lèi)網(wǎng)站內(nèi)容運(yùn)營(yíng)方案.jpg)
做網(wǎng)站SEO選哪家公司好.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢(qián).jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢(qián).jpg)
做網(wǎng)站SEO一年需要多少錢(qián).jpg)
站SEO一年需要多少錢(qián).jpg)
站SEO選哪家公司好.jpg)
站SEO需要注意什么.jpg)
做網(wǎng)站SEO選哪家公司好.jpg)
店鋪怎么綁定自己的直播號(hào).jpg)
多久可以修改.jpg)
如何添加圖片.jpg)
小店如何發(fā)貨.jpg)
是什么意思.jpg)
商品什么推廣.jpg)
創(chuàng)意怎么改.jpg)
如何屏蔽ip.jpg)
如何制作.jpg)
平臺(tái)干什么的.jpg)
