2017前端技術大盤點

前言

臨近2017的尾聲，老是但願來盤點一下這一年中前端的發展。到目前爲止，前端的井噴期也快臨近尾聲了。並不像幾年前同樣，老是會有層出不窮的新東西迸發出來。同時，前端技術也慢慢的趨於穩固，自成一套體系。若是你喜歡個人文章，歡迎評論，歡迎Star~。歡迎關注個人github博客

正文

咱們何處提及？天然是離不開那三駕馬車。

三駕馬車

自從2015年，react的問世，開始了三駕馬車時代的先河。同時，jQuery也逐漸讓出了其霸主的地位。後續的，angular開始了大型的改版，彷佛想要追逐react的步伐。兩種徹底不一樣思路的體現，在前端開發的技術棧中發光發亮。同時，Vue就像一匹黑馬同樣，一路披荊斬棘，快速地進步着。

所以，從2017年開始，3架馬車能夠說是並駕齊驅。彷佛須要看些對比數據，來表示它們目前的現狀。(來自國外的數據)

能夠看到react的深紫色是最多的，表示用戶對於react仍是十分滿意的。雖然，早前的React收到了協議的影響，可是，這彷佛並不影響它在開發者心目當中的地位。另外，react如此受歡迎的另外一個重要緣由就應該是React Native了吧。今年以來，React Native一直以兩週一次的小版本更迭週期，迅速發展着。或許，2018年將會迎來最重大的正式版本1.0。(這個仍是值得期待的。)

對於大多數開發者而言，學習了React的時候，對於它們學習React Native是有直接性質的幫助的，因此通常的國外開發者不會拒絕學習React這個框架的。

介紹完，React的狀況，咱們或許能夠回望一下Angular的狀況吧。

Angular能夠說是一個最先問世的MVVM的框架。2009年，angular像一枚重磅炸彈同樣，震撼了前端的開發者們。當時，W3C彷佛還未推出正式的Web Component標準。React和Vue也還在襁褓之中安眠。可想而知，以後的幾年Angular一直影響着後續前端的發展。可是，Angular有着許許多多的問題，也使得它在後續的框架之爭中，處於下風。2016年9月正式推出的angular2，將angular引領向了另外一種形式——以HTML爲中心的框架。一套完整的體現，其中加入了TypeScript+RxJS等組合，可想而知，一套內容的學習成本至關之高，與React以JS爲中心的思想徹底不一樣。不過彷佛這一次Google將框架的定位目標換成了企業，國內外在使用這套框架的每每是銀行、證券類企業。不過，它的發展仍是被看好的，畢竟它的背後可都是一羣Google的頂尖開發工程師呢！！

最後，咱們來了解一下三駕馬車中的黑馬——Vue。

從第一張圖中，雖然React一直處於領導地位，可是，Vue2的使用，也將於其餘兩個框架持平快了。畢竟，在國內的前端環境中，Vue能夠說是很是受歡迎的。(聽說印度開發前端，會用Angular，中國人開發前端，會用Vue)不得不說的是，Vue與Weex的結合，雖然體驗不及RN，可是有着阿里的技術支持，也將有但願突破吧。

PWA

若是在國外，你今年聽到的熱詞必定會有PWA這個東西。前不久，Safari已經開始支持PWA了，那麼也就意味着PWA的時代不會太遠了。固然，國內實踐PWA的公司也不佔少數，例如餓了麼、阿里等。從去年開始，對其有所耳聞，到今年Google開發者大會上的現場演示，相信更多的開發者對於這門技術的狂熱。對於國內開發者而言，惟一很差的優點應該就是文檔了。由於目前來講，大部分的文檔都是以英文的形式存在於GitHub或者國外書籍中的。翻譯過來的書，也不會這麼快的速度問世，因此目前研究PWA的中文資料少之又少。

不過相信，它的發展在以後的一兩年的是強而有力的。

國內的小程序

今年，在國內會被稱爲「小程序年」。從1月份開始，微信正式將公測了小程序。繼而在7月份開始，支付寶也推出了相應的小程序。在國內，這樣子的重大消息是不容忽視的。兩大巨頭之爭，推進的是無與倫比的流量紅利。基於小程序的開發，也將成爲國內的前端的一大重點。將原用的總體化的內容，逐步分割成一個個小的模塊，將至放入到微信這個大環境中去分享，最後起到一個引流的效果。回到技術的成面，小程序或許會有着與PWA同樣的思想，將以前在移動端難覺得繼的Web端，放入到自家應用中，來確保它的長久與穩定。更多的是說，這二者起到了殊途同歸的效果。一樣的，這項技術，將在2018年持續發展下去，同時，也會有更多的前端投入到這項開發中去。

styled-components

這項技術，也是從上半年開始有所耳聞的。主要是做爲react庫的衍生物的形式出現的。它將css部分的代碼以js的形式展示在代碼中，那麼以後只須要開發js就能夠完成整個應用的開發了。同時，它還有一個好處，它的樣式是基於組件的，因此能夠作到複用，同時，每每js的變量在css中去使用時，是一個使人頭疼的問題。而styled-components很好的解決了這個問題，由於它自己就是在組件中開發樣式，js的變量依然能夠被使用在css的部分代碼中。這項技術也是可期的，由於愈來愈多的人在本身的react項目中開始了這項技術的嘗試。

Rollup

這是啥？沒錯，又有一個模塊打包工具來了。或許，你們熟知的更多的是webpack這個模塊打包工具。今年的4月份，React作了一個大動做——在React的主分支上合併了一個PR，將當時的構建工具換成了Rollup。可想而知，這個東西將會是多麼的重要。好奇的是，它與其餘的不一樣之處吧！它是一款基於ES2015模塊進行打包的打包器。在過去的打包工具(包括webpack在內)中，都是基於CommonJS的規範去進行模塊的打包的，因此，過去不少庫的前面老是會有一大堆webpack等自家的邏輯填充在開頭。Rollup不一樣，他是後天生的，出生的基準點就代表它的高度將不限於此。可是，相對於巨頭webpack來講，它或許在今年並未體現出它的優點，可是相信它會厚積薄發的。

建議：在開發應用時，使用webpack，在開發庫時，能夠考慮Rollup。

GraphQL

這個東西，或許在國內鮮有聞之。可是，它還是一項不錯的技術，同時在調查中，也體現出不俗的潛力，如圖：

它是有Facebook開發的一款API查詢語言，或將替代Rest在後端的地位。雖然，目前來講，其性能並非特別的優秀，也會bug不斷。可是，2018年或將是GraphQL的一年。那麼，和前端又有什麼關係呢？別忘了，咱們手裏還有一個利器NodeJS呢！可以用好它，對於你開發nodeJS，或許使用便利。

TypeScript

這一項由微軟老大開發的語言，到處在彌補着JavaScript的缺陷。一出生，就打着「取代JavaScript」的旗號，發展的速度也是驚人的。固然了，W3C也在努力的推動着JavaScript的進步，以後的幾年，應該會是着兩門語言並駕齊驅的發展吧。由於開發人口衆多，不可能走到誰取代誰的地步。

最後，貼出一張Stackoverflow上面的一項數據統計表吧！

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

總結

咱們盤點了一年以來前端的發展，有着不錯新技術不斷被推出着，相信前端會發展的愈來愈好。由於在JSConf大會上，有人發言說，以後將會發展成「前端+雲端」的組合。那麼，也並不存在全棧類開發的說法了。前端開發的小夥伴加油吧！！咱們共勉

若是你對我寫的有疑問，能夠評論，如我寫的有錯誤，歡迎指正。你喜歡個人博客，請給我關注Star~呦 github博客