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