摘要：同時(shí)，前端技術(shù)也慢慢的趨于穩(wěn)固，自成一套體系。從月份開(kāi)始，微信正式將公測(cè)了小程序?；谛〕绦虻拈_(kāi)發(fā)，也將成為國(guó)內(nèi)的前端的一大重點(diǎn)。

臨近2017的尾聲，總是希望來(lái)盤(pán)點(diǎn)一下這一年中前端的發(fā)展。到目前為止，前端的井噴期也快臨近尾聲了。并不像幾年前一樣，總是會(huì)有層出不窮的新東西迸發(fā)出來(lái)。同時(shí)，前端技術(shù)也慢慢的趨于穩(wěn)固，自成一套體系。如果你喜歡我的文章，歡迎評(píng)論，歡迎Star~。歡迎關(guān)注我的github博客

我們何處說(shuō)起？自然是離不開(kāi)那三駕馬車(chē)。

自從2015年，react的問(wèn)世，開(kāi)始了三駕馬車(chē)時(shí)代的先河。同時(shí)，jQuery也逐漸讓出了其霸主的地位。后續(xù)的，angular開(kāi)始了大型的改版，似乎想要追逐react的步伐。兩種完全不同思路的體現(xiàn)，在前端開(kāi)發(fā)的技術(shù)棧中發(fā)光發(fā)亮。同時(shí)，Vue就像一匹黑馬一樣，一路披荊斬棘，快速地進(jìn)步著。

因此，從2017年開(kāi)始，3架馬車(chē)可以說(shuō)是并駕齊驅(qū)。似乎需要看些對(duì)比數(shù)據(jù)，來(lái)表示它們目前的現(xiàn)狀。(來(lái)自國(guó)外的數(shù)據(jù))

可以看到react的深紫色是最多的，表示用戶(hù)對(duì)于react還是十分滿(mǎn)意的。雖然，早前的React收到了協(xié)議的影響，但是，這似乎并不影響它在開(kāi)發(fā)者心目當(dāng)中的地位。另外，react如此受歡迎的另一個(gè)重要原因就應(yīng)該是React Native了吧。今年以來(lái)，React Native一直以?xún)芍芤淮蔚男“姹靖芷?，迅速發(fā)展著?；蛟S，2018年將會(huì)迎來(lái)最重大的正式版本1.0。(這個(gè)還是值得期待的。)

對(duì)于大多數(shù)開(kāi)發(fā)者而言，學(xué)習(xí)了React的時(shí)候，對(duì)于它們學(xué)習(xí)React Native是有直接性質(zhì)的幫助的，所以一般的國(guó)外開(kāi)發(fā)者不會(huì)拒絕學(xué)習(xí)React這個(gè)框架的。

介紹完，React的情況，我們或許可以回望一下Angular的情況吧。

Angular可以說(shuō)是一個(gè)最早問(wèn)世的MVVM的框架。2009年，angular像一枚重磅炸彈一樣，震撼了前端的開(kāi)發(fā)者們。當(dāng)時(shí)，W3C似乎還未推出正式的Web Component標(biāo)準(zhǔn)。React和Vue也還在襁褓之中安眠?？上攵?，之后的幾年Angular一直影響著后續(xù)前端的發(fā)展。但是，Angular有著許許多多的問(wèn)題，也使得它在后續(xù)的框架之爭(zhēng)中，處于下風(fēng)。2016年9月正式推出的angular2，將angular引領(lǐng)向了另一種形式——以HTML為中心的框架。一套完整的體現(xiàn)，其中加入了TypeScript+RxJS等組合，可想而知，一套內(nèi)容的學(xué)習(xí)成本相當(dāng)之高，與React以JS為中心的思想完全不同。不過(guò)似乎這一次Google將框架的定位目標(biāo)換成了企業(yè)，國(guó)內(nèi)外在使用這套框架的往往是銀行、證券類(lèi)企業(yè)。不過(guò)，它的發(fā)展還是被看好的，畢竟它的背后可都是一群Google的頂尖開(kāi)發(fā)工程師呢??！

最后，我們來(lái)了解一下三駕馬車(chē)中的黑馬——Vue。

從第一張圖中，雖然React一直處于領(lǐng)導(dǎo)地位，但是，Vue2的使用，也將于其他兩個(gè)框架持平快了。畢竟，在國(guó)內(nèi)的前端環(huán)境中，Vue可以說(shuō)是非常受歡迎的。(據(jù)說(shuō)印度開(kāi)發(fā)前端，會(huì)用Angular，中國(guó)人開(kāi)發(fā)前端，會(huì)用Vue)不得不說(shuō)的是，Vue與Weex的結(jié)合，雖然體驗(yàn)不及RN，但是有著阿里的技術(shù)支持，也將有希望突破吧。

如果在國(guó)外，你今年聽(tīng)到的熱詞一定會(huì)有PWA這個(gè)東西。前不久，Safari已經(jīng)開(kāi)始支持PWA了，那么也就意味著PWA的時(shí)代不會(huì)太遠(yuǎn)了。當(dāng)然，國(guó)內(nèi)實(shí)踐PWA的公司也不占少數(shù)，例如餓了么、阿里等。從去年開(kāi)始，對(duì)其有所耳聞，到今年Google開(kāi)發(fā)者大會(huì)上的現(xiàn)場(chǎng)演示，相信更多的開(kāi)發(fā)者對(duì)于這門(mén)技術(shù)的狂熱。對(duì)于國(guó)內(nèi)開(kāi)發(fā)者而言，唯一不好的優(yōu)勢(shì)應(yīng)該就是文檔了。因?yàn)槟壳皝?lái)說(shuō)，大部分的文檔都是以英文的形式存在于GitHub或者國(guó)外書(shū)籍中的。翻譯過(guò)來(lái)的書(shū)，也不會(huì)這么快的速度問(wèn)世，所以目前研究PWA的中文資料少之又少。

不過(guò)相信，它的發(fā)展在之后的一兩年的是強(qiáng)而有力的。

今年，在國(guó)內(nèi)會(huì)被稱(chēng)為“小程序年”。從1月份開(kāi)始，微信正式將公測(cè)了小程序。繼而在7月份開(kāi)始，支付寶也推出了相應(yīng)的小程序。在國(guó)內(nèi)，這樣子的重大消息是不容忽視的。兩大巨頭之爭(zhēng)，推動(dòng)的是無(wú)與倫比的流量紅利?；谛〕绦虻拈_(kāi)發(fā)，也將成為國(guó)內(nèi)的前端的一大重點(diǎn)。將原用的整體化的內(nèi)容，逐步分割成一個(gè)個(gè)小的模塊，將至放入到微信這個(gè)大環(huán)境中去分享，最后起到一個(gè)引流的效果?；氐郊夹g(shù)的成面，小程序或許會(huì)有著與PWA一樣的思想，將之前在移動(dòng)端難以為繼的Web端，放入到自家應(yīng)用中，來(lái)確保它的長(zhǎng)久與穩(wěn)定。更多的是說(shuō)，這兩者起到了異曲同工的效果。同樣的，這項(xiàng)技術(shù)，將在2018年持續(xù)發(fā)展下去，同時(shí)，也會(huì)有更多的前端投入到這項(xiàng)開(kāi)發(fā)中去。

這項(xiàng)技術(shù)，也是從上半年開(kāi)始有所耳聞的。主要是作為react庫(kù)的衍生物的形式出現(xiàn)的。它將css部分的代碼以js的形式展現(xiàn)在代碼中，那么之后只需要開(kāi)發(fā)js就可以完成整個(gè)應(yīng)用的開(kāi)發(fā)了。同時(shí)，它還有一個(gè)好處，它的樣式是基于組件的，所以可以做到復(fù)用，同時(shí)，往往js的變量在css中去使用時(shí)，是一個(gè)令人頭疼的問(wèn)題。而styled-components很好的解決了這個(gè)問(wèn)題，因?yàn)樗旧砭褪窃诮M件中開(kāi)發(fā)樣式，js的變量依然可以被使用在css的部分代碼中。這項(xiàng)技術(shù)也是可期的，因?yàn)樵絹?lái)越多的人在自己的react項(xiàng)目中開(kāi)始了這項(xiàng)技術(shù)的嘗試。

這是啥？沒(méi)錯(cuò)，又有一個(gè)模塊打包工具來(lái)了?；蛟S，大家熟知的更多的是webpack這個(gè)模塊打包工具。今年的4月份，React做了一個(gè)大動(dòng)作——在React的主分支上合并了一個(gè)PR，將當(dāng)時(shí)的構(gòu)建工具換成了Rollup?？上攵?，這個(gè)東西將會(huì)是多么的重要。好奇的是，它與其他的不同之處吧！它是一款基于ES2015模塊進(jìn)行打包的打包器。在過(guò)去的打包工具(包括webpack在內(nèi))中，都是基于CommonJS的規(guī)范去進(jìn)行模塊的打包的，所以，過(guò)去很多庫(kù)的前面總是會(huì)有一大堆webpack等自家的邏輯填充在開(kāi)頭。Rollup不同，他是后天生的，出生的基準(zhǔn)點(diǎn)就表明它的高度將不限于此。但是，相對(duì)于巨頭webpack來(lái)說(shuō)，它或許在今年并未體現(xiàn)出它的優(yōu)勢(shì)，但是相信它會(huì)厚積薄發(fā)的。

建議：在開(kāi)發(fā)應(yīng)用時(shí)，使用webpack，在開(kāi)發(fā)庫(kù)時(shí)，可以考慮Rollup。

這個(gè)東西，或許在國(guó)內(nèi)鮮有聞之。但是，它仍是一項(xiàng)不錯(cuò)的技術(shù)，同時(shí)在調(diào)查中，也體現(xiàn)出不俗的潛力，如圖：

它是有Facebook開(kāi)發(fā)的一款A(yù)PI查詢(xún)語(yǔ)言，或?qū)⑻娲鶵est在后端的地位。雖然，目前來(lái)說(shuō)，其性能并不是特別的優(yōu)秀，也會(huì)bug不斷。但是，2018年或?qū)⑹荊raphQL的一年。那么，和前端又有什么關(guān)系呢？別忘了，我們手里還有一個(gè)利器NodeJS呢！能夠用好它，對(duì)于你開(kāi)發(fā)nodeJS，或許使用便利。

這一項(xiàng)由微軟老大開(kāi)發(fā)的語(yǔ)言，處處在彌補(bǔ)著JavaScript的缺陷。一出生，就打著“取代JavaScript”的旗號(hào)，發(fā)展的速度也是驚人的。當(dāng)然了，W3C也在努力的推進(jìn)著JavaScript的進(jìn)步，之后的幾年，應(yīng)該會(huì)是著兩門(mén)語(yǔ)言并駕齊驅(qū)的發(fā)展吧。因?yàn)殚_(kāi)發(fā)人口眾多，不可能走到誰(shuí)取代誰(shuí)的地步。

最后，貼出一張Stackoverflow上面的一項(xiàng)數(shù)據(jù)統(tǒng)計(jì)表吧！

圖片來(lái)源：I just asked 23,000 developers what they think of JavaScript. Here’s what I learned.

我們盤(pán)點(diǎn)了一年以來(lái)前端的發(fā)展，有著不錯(cuò)新技術(shù)不斷被推出著，相信前端會(huì)發(fā)展的越來(lái)越好。因?yàn)樵贘SConf大會(huì)上，有人發(fā)言說(shuō)，之后將會(huì)發(fā)展成“前端+云端”的組合。那么，也并不存在全棧類(lèi)開(kāi)發(fā)的說(shuō)法了。前端開(kāi)發(fā)的小伙伴加油吧??！我們共勉

如果你對(duì)我寫(xiě)的有疑問(wèn)，可以評(píng)論，如我寫(xiě)的有錯(cuò)誤，歡迎指正。你喜歡我的博客，請(qǐng)給我關(guān)注Star~呦github博客