Web網站技術選型

存在即合理，沒有最好的框架，只有最合適的框架。

一切脫離需求和技術儲備的選型都是耍流氓！

 

魚與熊掌：選擇流行框架仍是兼容低版本IE（IE8及如下）

HTML五、CSS3

HTML5新標籤以及CSS3的新屬性在IE6/IE7/IE8上不能識別。

jQuery

jquery2.0以後的版本開始不支持IE8。（可用1.9.x版本，最新版本v3.2.1）

Bootstrap

Bootstrap3已再也不支持IE8，官網提供了兼容方法，須要引入額外的文件。

Angular

Angular1.3版本之後再也不支持IE8。（可用1.2.x版本，最新版本Angular4）

React

從React v15開始，React DOM將再也不支持IE8。（可用v0.14.x版本，最新版本v15.6.1）

Vue

不支持IE8

真的有必要兼容IE8（甚至IE6，IE7）嗎？ 

• 產品定位：門戶網站，給用戶看的；優雅，用戶體驗優先。
• 平衡一下支持老版本IE帶來的的收益和成本（開發、測試的投入，以及傷開發人員士氣等等）。
• 爲了兼容IE6-8，要多花不少時間，並且不敢使用最新的技術。
• 爲了兼容低版本瀏覽器須要加入一些額外的代碼，致使運行速度也會被拖累。
• 與其花費時間、精力在低版本瀏覽器的兼容上，不如在其餘方面投入更多以得到更優質的用戶體驗。

三分天下（一個框架、兩個類庫）

Angular：Google團隊開發、完整的一套框架，大而全。 

React：facebook團隊開發，強調組件化的類庫。

Vue：國產、關注視圖層的漸進式框架。

 

• Angular是框架；React 和Vue是類庫，這就意味着須要其餘的庫配合才能造成一套完整的框架。
• Angular是一個大而全的 MVC 框架，它提供了咱們所須要的各類功能：如模塊管理、雙向綁定等等。它涵蓋了開發中的各個層面，而且層與層之間都通過了精心調適。
• 常見的React開發組合： React + react-router + redux
• Vue官方推薦的全套方案： Vue + vue-router + vuex + webpack + vue-loader

大而全的Angular

• Angular是一個完整的框架，有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
• 不少人說Angular很重，可是這個重是在於它給你提供了一切你想要、或者說你可能會用到的庫。好比：react中作http通信，那你就必須引入第三方的庫如 isomorphic-fetch 等等，然而，在angualr2中直接提供了http庫@angular/http；再好比：react中路由，那你須要引入react-router，然而在angular2中直直接提供了Router功能。使用React，一切都須要你本身負責，你要本身整合一大堆開源類庫來打造一個完整的應用，類庫之間互不相干且變更頻繁。（無選擇性疲勞）
• Angular的核心團隊默認在文檔中使用TypeScript，這意味着相關的示例應用和開源項目更有可能保持一致性（優點也多是缺點，並不是全部人都喜歡 TypeScript）
• Angular還擁抱了Web Component標準。當然Web Components的瀏覽器支持度依然很弱，但長期來看，對Web Components友好是很大的優點。

兩個類庫React && Vue

• React與Vue存在不少類似之處，他們都是JavaScript的UI框架，專一於創造前端的富應用。不一樣於早期的JavaScript框架「功能齊全」，Reat與Vue只有框架的骨架，其餘的功能如路由、狀態管理等是框架分離的組件。
• Vue2.0和React都使用了Virtual DOM。
• 提供了響應式（Reactive）和組件化（Composable）的視圖組件
• 將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。
• React和Vue都有本身的構建工具。

React：單向數據流，大膽的設計理念

• 新的語法—JSX。（其實不少人很是不喜歡 jsx 這種 HTML 和 JS 在一塊兒的方式）
• 現成的UI組件庫：螞蟻金服基於React開發的UI組件庫
• 完善的生態圈，活躍的社區，facebook在其背後強大的技術支持。
• React最大的優點是React native，能在手機上建立原生應用，可讓React輕鬆運行在不一樣的平臺之上。（React在這方面處於領先位置）
• React報錯清晰快速，JSX具有的代碼自動補全、編譯時檢查與豐富的錯誤提示創造奢華的開發體驗。
• React支持服務端渲染。
• React沒法優雅的處理動畫。

Vue：把高大上的思想變得平易近人

• 國產框架，輕量，學習成本低，容易上手，擁有完善的中文文檔。
• 現成的UI組件庫：餓了麼團隊基於Vue開發的UI組件庫
• 相對完善的生態圈。（Vue 的社區當然比不上 React，但也不算小）
• 更符合傳統web開發的思路，模版樣式與邏輯分離。
• 配合 webpack 和 vue-loader，每一個頁面都是一個 .vue 文件，寫起來、管理起來很方便。
• 適合作組件化開發（每一個組件也是一個 .vue 文件，能夠全局或者在須要的地方引入），若是遇到比較複雜的、父子組件間須要頻繁通訊的場景，能夠用 vuex 搞定。

SPA與SEO

單頁應用（ SPA）優勢：

• 用戶體驗好、快，內容的改變不須要從新加載整個頁面，web應用更具響應性和更使人着迷。
• 良好的先後端分離。SPA和RESTful架構一塊兒使用，後端再也不負責模板渲染、輸出頁面工做，web前端和各類移動終端地位對等，後端API通用化。
• 同一套後端程序代碼，不用修改就能夠用於Web界面、手機、平板等多種客戶端。

單頁應用（ SPA）缺點：

• 不利於搜索引擎優化（ SEO）
• 初次加載耗時相對增多。
• 前進、後退、地址欄等，須要程序進行管理。

make a choice

技術選型須要考慮的點：

• 技術（兼容性、是否成熟、架構和模式、生態系統、文檔是否完備）
• 業務
• 效率（上手、開發難易度、團隊人員的知識儲備以及瀏覽器運行效率）

方案分析：

• jQuery瀏覽器兼容性最好，低版本的angular和react也能作到部分兼容，vue不支持IE8及如下。
• jQuery最成熟，API也比較多，對應的插件庫也多。angular、react、vue都是近幾年的新興產物，可是發展迅速。angular1.x因爲其設計缺陷，已逐漸被淘汰，取而代之的angular2則比較成熟。Vue也推出了2.0版本，借鑑了React和angular的優勢。
• 社區生態方面，React是目前最成熟也最活躍的，各種工具庫層出不窮。Vue相對較少，可是配置設施也齊全，同時擁有完善的中文文檔。Angular因爲其大而全的特性，不須要額外的工具庫，文檔較少。
• 上手、開發難易度：vue > angular > react
• 運行效率：vue、react位於第一梯隊，Angular次之，jQuery因爲其歷史悠久性在其運行效率及用戶體驗性較差。