Web网站技术选型

存在即合理，没有最好的框架，只有最合适的框架。

一切脱离需求和技术储备的选型都是耍流氓！

 

鱼与熊掌：选择流行框架还是兼容低版本IE（IE8及以下）

HTML5、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由于其历史悠久性在其运行效率及用户体验性较差。

 

转载于:https://www.cnblogs.com/sph1024/p/9429039.html