前端框架选型调研报告

前言

随着Web相关技术的发展,JavaScript所要承担的工作也越来越多,早就超越了“表单验证”的范畴,这就更需要快速的解析和执行JavaScript脚本。谷歌浏览器的V8引擎就是为解决这一问题而生,在node中也是采用该引擎来解析JavaScript。V8在运行之前将JavaScript编译成了机器码,而非字节码或是解释执行它,以此提升性能。更进一步,使用了如内联缓存(inline caching)等方法来提高性能。初此之外,还有 IE9/Edge 的 Chakra、Firefox 的 TraceMonkey等。

一门编程语言的良好发展离不开其标准的制定,而ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

开始之前我们先来看几个问题:
1.前端模块化的意义 ?
支撑庞大的前端业务逻辑需要编写大量的js代码,如此繁多的js代码如果缺乏有效的组织,项目会变得越来越难维护。为解决这个问题,引入了模块化开发的方案。最流行的当属以下三个规范:
AMDRequireJS 在推广过程中对模块定义的规范化产出。
CMDSeaJS 在推广过程中对模块定义的规范化产出。
CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。
这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。

2.有了模块化工具,是否还需要JS框架?(自动化仓库/哆啦A梦)
答案是肯定的,这是两个不同的层面的东西,提供的功能不同,JS框架是为了简化开发,规范代码风格;模块加载器是为了实现模块的定义、分割、通信和加载。

3.什么样的JS框架适合我们?
前端目前最流行的JS框架有:

ReactJS是一个用来构建用户界面的 JavaScript 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

主要特性:
1. 声明式设计 −React采用声明范式,可以轻松描述应用。
2. 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3. 灵活 −React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5. 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6. 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

配套UI
1. Material-UI
2. Ant Design

Angular JS 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,兼容主流浏览器,与 jQuery 配合良好。

主要特性
1. MVX型框架
2. 双向数据绑定
3. 强大的指令
4. 自定义HTML 模板
5. 可嵌入、注入和自动化测试

配套UI
1. Angular Material
2. NG-ZORRO

Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。

主要特性:
1. 可扩展的数据绑定
2. 将普通的 JS 对象作为 model
3. 简洁明了的 API
4. 组件化 UI 构建
5. 配合别的库使用
6. 渐进式框架

配套UI
1. Element UI
2. iView

React功能强大,社区众多,但是学习曲线陡峭,需要用他全家桶才能最大程度发挥其性能,另外由于去年8月的许可协议风波,使国内各大互联网公司纷纷转向了放弃了Readct,即使react 已经妥协改成了MIT。

Angular很好,功能强大,应用广泛,适合大型复杂项目,但是从2.0后,最佳实践转到了Typescript,需要额外学习typescript,且版本发布的非常频繁,一年之内就从1.x发到了6.x。

综上,目前来看,最合适的是Vue,国内应用最广,github一年涨4w+star,已经赶上react。

猜你喜欢

转载自blog.csdn.net/qq_30164225/article/details/80635121