今天分享的內容是前端3大框架，主要有介紹前端的發展歷程，框架出現的原因和介紹angular、react和vue各自的優缺點，讓大家能夠對這3個框架有一個大致的瞭解。
首先介紹一下前端技術的發展
1994年可以看作是前端歷史的一個起點，在這一年的10月13日，網景公司推出了第一版的navigator，這一年tim建立了w3c，他的好基友釋出了css，還是這一年，php誕生。
navigator是一個物件，它包含了有關瀏覽器的資訊，w3c是全球資訊網聯盟，是web技術領域最具權威和影響力的國際中立性技術標準機構。到目前為止，w3c釋出了超過200項影響深遠的web技術標準和實施指南。php是加拿大的Rasmus Lerdorf建立的，他當時是為了支援他的個人網站。php的原意是personal home page，宣傳語是超文字處理者。讓前端頁面可以和後端進行互動，實現了資料庫的互動。直到現在php也是一門重要的服務端語言。

這張圖片就是最早期的瀏覽器

因為當時的全球資訊網www目的很單一。是歐洲核子研究組織的一幫科學家為了方便看文件、傳論文而創造的，這就是為什麼Web網頁都基於Document。Document就是用標記語言+超連結寫成的由文字和圖片構成的HTML頁面，在當時，這樣的功能就已經完全滿足了學術交流的需要，所以網頁的早期形態和Document一樣，完全基於HTML頁面，並且所有內容都是靜態的。
然而，隨著網頁從學術機構走向公眾社會，網頁承載的功能便超出了學術範圍而變得更加豐富，因此早期網頁的侷限性也逐漸顯露出來。

侷限性主要有三點
第一，所有的網頁都基於HTML頁面，因為沒有任何手段可以控制區域性內容的顯示和隱藏，不像現在可以用if或者hide這些屬性去完成這個任務，因此任何區域性的變化哪怕只多出一個標點符號，都只能重新下載一個新的頁面。
第二，計算任務只能在服務端實現。由於當時網速的限制，與伺服器通訊的過程是非常緩慢的，並且此過程是同步阻塞的，於是就會出現這樣的一個場景：使用者提交一個表單，然後整個頁面消失，瀏覽器呈現白屏，經過漫長的等待，瀏覽器渲染出一個和之前一模一樣的頁面，只不過輸入框旁邊多了一排紅色小字：使用者名稱錯誤。
第三，所有頁面都是靜態的，這意味著一個電商網站有一千種商品，哪怕頁面佈局一模一樣，也必須寫一千個單獨的頁面。
以上第一條和第三條限制，證明早期網頁形態低下的效率是無法僅僅通過提高網速解決的，即使是第二條，在很快的網速的條件下，它會閃屏，也是不行的。
隨後：
1995年網景推出了JavaScript，實現了客戶端的計算任務（如表單驗證就是在前端完成，而不是請求發給後端，在請求頁面了），不會再出現那種等了半天只為了返回一行使用者名稱錯誤的情況。
1996年微軟推出了iframe標籤，實現了非同步的區域性載入。iframe就相當於頁面中的一個頁面，只需要重新整理這個頁面而不用重新整理整個頁面。
1999年W3C釋出第四代HTML標準，同年微軟推出了用於非同步資料傳輸的ActiveX，ajax的前身，隨即各大瀏覽器廠商模仿實現了XMLHttpRequest。這標識著Ajax的誕生，但是Ajax這個詞是在六年之後問世的，特別是在谷歌使用Ajax技術打造了Gmail和谷歌地圖之後，Ajax才獲得了巨大的關注。Ajax是Web網頁邁向Web應用的關鍵技術，它標識著Web2.0時代的到來。web2.0的核心主旨是以使用者為中心。使用者不再是單純的讀網站作者輸出的內容，同時也在向網站輸出內容。
2006年，XMLHttpRequest被W3C正式納入標準。
至此，早期的Document終於進化為了Web page，上述三個侷限都得到了妥善的解決。
之後就來到了jquery的時代
早期的網頁開發是由後端主導的，前端能做的也就是操作一下DOM。2006年 John Resig釋出了jQuery，jQuery主要用於操作DOM，其優雅的語法、符合直覺的事件驅動型的程式設計思維使其極易上手，因此很快風靡全球，大量基於jQuery的外掛構成了一個龐大的生態系統，更加穩固了jQuery作為JS庫一哥的地位。
在百度搜索jquery，第一條內容就是它的一個比較龐大的外掛庫網站。

再看這個圖，老夫寫程式碼就用jquery，
這個圖不僅是用來搞笑的，他也確實代表著jq在鼎盛時期，在前端人員心裡的一個地位。
其實在web初期，制約Web開發從後到前的因素很簡單，就是前端很多事幹不了或幹不好，當時的瀏覽器效能弱，標準化程度低。特別是佔據大量市場份額的IE，不僅ugly，並且buggy。
於2008年問世的谷歌V8引擎改變了這一局面。現代瀏覽器的崛起終結了微軟的壟斷時代，前端的計算能力一下子變得過剩了。標準組織也非常配合的在2009年釋出了第五代JavaScript，前端的裝備得到了整體性的提高，前端界就像當年改革開放一樣，走進了一個令人目不暇接的新時代。
2009年AngularJS誕生，隨後被谷歌收購。2010年backbone.js誕生。2011年React和Ember誕生。2014年Vue.js誕生……前端能做的事越來越多，前後端分離就是大勢所趨了。
這張圖片顯示的是目前各大瀏覽器的使用情況，可以看出chrome已經算是一家獨大。IE8之所以還有12.03%的使用率，是因為還有一部分人在使用win7系統。
如果繼續將時間縮短，可以看出chrome瀏覽器所佔比例在逐步增加。

從前端的發展歷程可以看出，前端開發在產品的整個開發中所佔的比重在不斷變大，現代瀏覽器強大的計算能力讓前端開發可以做更多的事情，不單單是實現頁面的特效，展示內容等。隨著資料量的飆升，前端接觸到了越來越多的資料，jQuery專注於DOM的開發模式就顯得力不從心了。
框架應運而生。
框架的始祖，angularjs
對於實現靜態頁面的動態話，最初的解決方案是使用js或jq來操作dom，這就導致在一個複雜的頁面，開發人員需要進行大量dom操作。而且很多重複的操作，只能通過編寫重複的程式碼或封裝函式來解決複用，jq就封裝了一些常用的js函式。
angularjs的出現，簡化了開發人員對dom的操作。我們不需要再像之前使用js、jq那樣，要高度關注dom結構的操作，而是隻需要關注資料模型的變化，框架會幫助我們去改變dom。還有最重要的一點，就是程式碼的複用問題，不再是簡單的複製貼上，而是可以將一個模組進行封裝，然後實現高度複用。這種封裝是無法通過封裝方法來解決的。
angularjs是2009年由Misko Hevery等人建立，後被Google收購。現在的angular系列也一直由google的團隊進行維護。angularjs在當時可以稱作一個完整的解決方案，在構建CRUD應用時，有著很大的便利，CRUD中需要的資料繫結、表單驗證、路由、元件重用等都包含在angularjs中。大部分的網頁都是crud，除了網頁遊戲那些。
AngularJS使用了不同的方法，它嘗試去補足HTML本身在構建應用方面的缺陷。AngularJS通過使用我們稱為指令(directives)的結構，讓瀏覽器能夠識別新的語法。
例如：
使用雙大括號{{}}語法進行資料繫結；
使用DOM控制結構，來實現迭代或者隱藏DOM片段；
支援表單和表單的驗證；
能將邏輯程式碼關聯到相關的DOM元素上；
能將HTML分組成可重用的元件。
隨著前端技術的繼續發展，越來越多的框架出現了。
隨後出現的其他框架完成的任務其實與angularjs基本相同，只不過在實現方式和效率等方面有所差別。大浪淘沙，現在還活躍在人們視野中的框架，就是要說的3大框架。
angularjs是通過directive（指令）去封裝元件，react和vue是通過component，就是元件。
angular、react和vue都是mvvm模式，（model，view，view-model），angular的資料繫結、操作dom就是通過viewmodel完成的。react和vue的view-model的高效率通過框架自身提供的virtual dom（虛擬dom）來實現，它是一個js物件，我們資料的變化會被對映到這個虛擬dom上，然後虛擬dom再去和真實的dom通過各框架自己的演算法進行對比，來修改真實dom結構，這就要比angular的viewmodel直接繫結真實dom樹的操作要更有效率一些，因為雖然現在的瀏覽器計算效能大幅度提高，但是頻繁對真實dom樹的操作依然是一個很大的開銷，這要比操作一個js物件，就是virtual dom，的開銷大很多。然後這裡說的效率不是指人工優化效能提升的那種效率，因為它經過演算法的比較再去找樹一定會比開發人員針對某一個dom節點的操作效率要低，它完成的是提升了一個整體的水平，因為開發人員無法在一個大專案中對每一個dom元素的操作都去優化。
簡單點說，viewmodel就是幫我們完成了對dom的操作，不需要我們自己去整了。然後angularjs的viewmodel要比react的和vue的落後，效率低。
既然框架的目的和解決的主要問題是相同的，那麼哪一個是更加優秀的方案，就成為了前端人員一直爭論的一個話題。
由於es版本的不斷升級，js的不斷進步，已經有許多操作不再需要框架去完成，比如一些新關鍵字、新方法的使用就可以完成angularjs框架內部複雜的過程。再由於資料量的飆升，使用者對網頁效能的不斷看重，等等原因，讓angularjs逐漸的被淹沒在時代的洪流中。
隨後google也看出了angularjs不再適應時代的發展，開始對其進行跨時代的、破壞性的升級，這就導致angular2之後的版本和angularjs就相當於兩個框架了，無論是寫法還是實現方式上都有了巨大的差別。
所以現在所謂的框架之爭，其實已經把angularjs即angular1.x排除在外了。指的是angular、react和vue的爭鬥。
angular是google升級、維護。
react由facebook升級、維護。
vue是由中國人尤雨溪和他的團隊負責。
介紹三者各自的優缺點之前，我們先看一下目前這三個框架在調查中的表現，也算一個可以參考的資料。

圖中深紫色代表用過還想用，淺紫色代表用過之後不想用，深黃色代表聽過想去用。我們基本上可以通過這個圖看出，在2017年，被調查的這些人中對於框架的選擇。React的深紫色和深黃色佔的比重是最多的。對於用過還想用這部分來說，它要比angular2、vue、angularjs加起來還要多。再看淺紫色，用過不想再用的人數，angularjs是最多的。再看深黃色，可以看出vue的比重是最大的，這證明vue給大家的印象還是不錯的，也許會在不久的將來逐漸佔領市場的部分份額。
如果單從這張圖來看，那麼react無疑是框架之爭的贏家，再看這張圖。

angularjs的極速下滑伴隨著angular的極速上升，這證明google的angular系列還是有某些特質在吸引著開發者。
最後再看一組資料。


從比例來看，react和vue的滿意度都超過了90%，angular2基本不變，這個angular指的是angularjs，下降了7%。
以上的資料畢竟是別人的感受，對於自身而言，在開發過程中是否要使用框架，或又是使用哪種框架還要根據實際情況來決定，下面要說的就是各框架之間的優缺點，之所以沒有說對比，是因為這三個框架還沒有一個可以說在任何方面都完勝對手，因此更好的辦法我認為就是去了解他們的優缺點，再來對比自身專案，看哪個框架更適用。

angular4對於2來說，有了一定的進步，比如也在逐步拆分它的功能，減少體積，增強效能以及router的升級等，在最初，三者之間的效能也會總被拿出來作為某個框架更強的一個論據，最後從各大網站的效能統計上來看，在使用者實際使用中，三大框架對於PC端的使用者來說是差不多的（雖然效能上的確angular會弱於另外兩個，但是毫秒之間的差距，使用者是很難體驗出來的）。它更多的是在影響開發者，而2和4對於開發者來說是相差不大的，這一點從angular2的程式碼向4升級時並不難就可以看出來。因此下面會將angular2和4，統稱為angular。
angular是最早出現的框架，第一個優點就是背後靠著google這座大山，有著穩定的維護團隊。並且google的Adwords業務（一個按點選量收費的廣告業務，據說是google比較賺錢的一個業務）就使用了angular，作為一個賺錢的業務，google也會讓它的環境更穩定一些。
第二個：angular+typescript，google和微軟的雙劍合璧。angular全面支援typescript語法，typescript不僅包含es6中的語法，也包括一些新的語法，最重要的一點是它增加了型別規則，這讓程式碼的可讀性和可維護性大大的提高，它也可以讓有java或.net背景的開發人員更快的掌握。
第三個優點：完整。其實相對react和vue來說，angular更可以說是一個框架，而react和vue本身只能算是一個庫。angular自帶了幾乎所有頁面應具有的功能，路由、表單、ajax、模版、雙向資料繫結等等。它原生的form表單模組非常強大，除了雙向繫結的基本功能，還自帶驗證等，開發人員不需要再去為了這些功能找第三方庫，angular一個框架就包含了這些的所有，因此對於選擇困難症人群，這是一個優點。
還有一個優點可以算在這裡，每個框架都有自己的cli腳手架，可以快速搭建專案雛形。angular-cli自帶國際化。
第四個優點：它的每一個元件都是一個資料夾，html、js、和css檔案是分開的，讓程式碼更加清晰。
而且它的各型別檔案單獨存在，在開發中使用任何IDE都可以檢查程式碼。可以使用自帶的格式化功能，讓開發過程中的程式碼更整潔。

這些是它的優點，然後是缺點。
第一個，最大的缺點，難除錯。angular的程式碼整潔、規範，很容易維護和審查，但是它的控制檯報錯資訊太差了，大部分情況是無法看出問題到底在哪，這就在開發過程中給除錯增加了很大的難度。而react和vue在開發中會更加明確的讓開發人員瞭解到錯誤出在哪裡。
第二個，它是一個胖子，它自帶了很多模組，這解決了開發人員在選擇上耗費的時間，但是這也導致它太重了，壓縮後達到了168k，是vue50k的三倍還多，即使在4版本中，拆分了一些功能，但是它依然是個胖子。這些功能無論你用還是不用，它就在那裡，佔著空間。如果在pc端或許還體現的不是很明顯，如果在移動端就會體現出胖的缺點。
第三個，就是學習成本的問題，首先ts，它的確對後臺的同學們更友好，但是對於一個純前端人員來說，就是一個另外要學習的知識點。然後是angular它有超多的概念，有一些單單通過文件還很難於理解，還有不友好的api文件。因為它的東西太多，所以api文件內容也很多，增大了閱讀難度。這就導致了剛接觸angular的人很難上手。也給心理上造成了很大的壓力，那文件一看就不想看了，還有api，它是英文的。
難於除錯和更高的學習成本，讓許多人望而生畏。

我們來看react，react的第一個優點，和angular一樣，有一個大廠的團隊在維護（萬萬沒想到facebook最近遭遇了天價罰單，這是否會對react的維護造成影響還未可知，所以暫時把這個仍然算作它的一個優點，如果react因此死了，簡直就是一個大寫的尷尬）。
react本身不能算作一個框架，因為它本身的功能有限，不過它有一個龐大的生態系統，全世界無數開發人員在為它提供開源包，也許對於開發人員一個很難完成的問題已經有其他人員幫你完成了，只需要引入就好了。
之前一直在說angular很重。react和vue要比它輕量，體積小本來應該是算在react和vue的優點中，但是在一個大型的專案中，就比如一般的spa，react要用的是react+redux+react-router或許還要加上傳送請求的axios，如果有一些其他的需求還要再加包，vue也同樣，vue+vuex+vue-router+vue-axios，這就導致react和vue體積小的優點在逐步減小。所以這一方面我們應該說react和vue的可組裝性是強於angular的，更加靈活，想用什麼用什麼。
第四點就是react的單項資料流機制，這相對angular的雙向資料流來說，因為單向，所以它的各種變化都是可預計的，不像雙向資料流，一旦資料流複雜起來，大家都互相觸發變化，開發人員根本猜不出你改變一個地方會在另外什麼地方跟著變。
react下載量高居不下的一個重要原因是它的react-native，一個優秀的移動端開發框架，使用react特有的jsx語法，可以讓開發人員像寫pc端頁面那樣去寫移動端，它自動適配了不同的移動端的螢幕解析度。jsx語法是將html融入到js中。雖然angular的ionic和vue的weex現在也可以進行移動端開發，不過最優秀的，最被大眾認可的仍然是react-native。這是github上的下載量，可以看出來下載量遠遠超過其他兩者



最後一點，react的最大優點就是state，所有的資料都儲存在state中，只可以使用setState方法去改變。開發人員可以把所有的資料都存放在state中，讓所有元件都去這裡邊取資料，當然如果元件過多的話會讓頂級元件的state過重，這時可以將公用的放在頂級state中，各自私用的存放在自身的state中。這樣在開發和維護的過程中只需要關注各個state就好。

下面來看react的缺點。
第一點，react的靈活性就導致了在選擇上要耗費成本，確定使用框架的人要去考量這個專案有哪些功能，要用到哪些包還要去看哪些包的質量要高一些，因為相同的功能也會有很多開源人員貢獻包。這些工作耗費的時間成本也是一個專案不得不考慮的問題。這一問題在vue上也同樣存在
第二點，react的jsx語法，它學習起來並不是很難，應該是比ts要簡單一些。但是它的寫法是把html和js結合起來，這就導致在一些IDE上，你沒法對它格式化，如果格式化的話，它會將html像js語法那種格式排列。程式碼的可讀性要差一些。而且在js中寫html時就要避免兩者出現相同的關鍵字，比如class，在jsx中就要寫成className，還要是駝峰式寫法
第三點，使用redux，redux在處理資料流的時候是使用saga語法，開發人員要去學習saga的寫法，然後saga的非同步操作和同步操作是分開在兩個函式中寫，要在元件本身寫一次，資料流到父元件時還要再寫一遍，寫法上要更復雜，如果想簡化它，就要用一個前端應用框架-DVA，就還是通過加東西來增加開發效率。
最後是vue，vue的一個特點是每一個.vue檔案都是一個元件，在這一個vue檔案中包括style、scripts、template三個標籤來包含css、js和html。它是最後一個出現的框架，所以在它的實現中，它取其他兩個框架之長，去其他兩個框架之短，借鑑了許多好的設計理念，比如angular的指令、雙向繫結，react的component思想。
相比其他兩個框架，vue是國產框架，所以它對國內開發者在學習它時要更友好。它的第一個優點，就是它的學習成本是三個框架中最低的。中文的api文件，我覺得單這一點，就讓國內的開發者在學習vue時能夠節省超多的精力。
它的vuex，完成了redux的功能且在寫法上更加便捷，不再需要dva這種框架去幫他簡便寫法。
vue的體積是三個框架中最小的，加上它的處理機制，在非大型專案的對比中，它的效能是最高的。
其實無論再說哪些優點，歸結起來就是：vue在非大型專案上，有了react和angular的優點，且更簡單，更易上手。
vue的缺點同樣也很明顯。
首先相比其他兩個，它是由個人團隊開發和維護的，雖然個人的團隊並不一定沒有大廠的團隊穩定，但總感覺個人團隊對於維護vue這種使用者越來越多的框架來說，還是存在著更大的風險。
第二個，由於vue的實現原理利用了es5中的一個方法，這就導致了，如果瀏覽器是不支援es5的，那麼它只能放棄vue了。比如ie8
第三點，vue的響應系統無法檢測屬性的新增和刪除，以及某些陣列的修改，開發人員有時會忽略這一點。
第四點只能說是對比其他兩個框架算是缺點，就是它畢竟發展的時間沒有它們長，生態環境要更小，有時在開發中出現了問題，無法在網路上尋求到有效的幫助。
至此，三個框架的優缺點就基本介紹完了，最後簡單總結一下。
就我個人認為，angular的缺點更明顯、它難以除錯的缺點更會影響一個專案在開發過程中的進度。vue較小的生態環境和少解決方案也讓它在大型專案的開發中敗給了react。所以我覺得react更適用在一個成規模的專案中去使用。
對於一個前端開發人員來說，框架或者庫始終只是一個有助於開發的工具，無論使用哪個，都需要有紮實的js基礎，將js掌握牢固是所有前端人員達成的共識，沒有哪個框架是脫離它的，我們可以不使用框架，但是不能不用js，只要把它掌握好了，無論哪個框架都能夠更加輕鬆的上手，不僅是使用它們，還包括瞭解他們的機制。甚至可以自己去封裝一個庫。
隨著前端技術的不斷髮展，框架和庫也越來越多，對於到底哪個才是最符合專案的，需要經驗更加豐富，對框架和專案有更加深入的瞭解，這樣才能夠有一個更加可靠的決策。

※如果有程式碼展示就更好了，積累不夠，貽笑大方