2021年选择 Web 前端开发框架的方式
Web 前端开发是时下最热门的领域之一,为了提升开发效率和用户体验从而创造更具竞争力的产品,选择适合自己项目或团队的开发框架成为技术决策者首先需要解决的问题。
但是近年来随着技术和开发理念的发展和进步,前端开发框架也在不断迭代。在众多选择面前,如何甄别各个框架的特长和短板?如何判断其技术架构是否适合自己?
本文尝试从多个角度分析市面上主流的前端框架,试图为你的选择提供一些参考。
前端框架的流行度
从上图 Stack Overflow 的数据可以看出近十年来前端框架流行程度的变化。
从 2016 年开始,React 和 Angular 被人们学习和讨论的越来越多。而曾经辉煌一时的 jQuery 逐渐没落,但还仍有一定的群众基础。
Vue 虽起步较晚,但是增长势头很强劲。
截止到2020年末,Github 上的 Star 数量也从侧面印证了 Vue、React、Angular 的流行程度。毫无疑问 React、Vue 和 Angular 仍将是 2021 年最受青睐的三款开发框架。
jQuery 有许多支持者,而且近期也有很不错的用于支持移动端开发的进展。但从本质上讲它仍是一款用于处理 DOM 和 CSS 并提供交互动画的库。
在开发大型应用、高级 JavaScript 特性支持 、可重用组件以及更少量的编码方面,仍旧与现代框架有不少的差距。
其他的框架,无论是从用户量还是社区发展的角度看和 React、Vue 和 Angular 都有很大的差距。
React、Vue 和 Angular 介绍
采用的网站:Airbnb、Facebook、Netflix ...
React 最初是 Facebook 为满足其产品需求而开发的,于 2013 年向受众展示并开源。其虚拟 DOM 技术(virtual Document Object Model)大幅提升了页面的渲染性能和表现力。
对于那些想要构建稳定、高效的单页面应用程序(single-page application)的项目来说 React 是个不错的选择。
采用的网站:PayPal、Google、Autodesk ...
Angular 是谷歌支持的用于构建用户界面的开源框架,它的历史最早可以追溯到2010年正式发布的AngularJS。后期开发团队将 AngularJS 基于 TypeScript 重写,于 2016 年 9 月发布了 Angular 2 以适应日益增长的Web需求。为了避免混淆,新框架名称去掉了 "JS"。
Angular 是一个大而全的开发平台,也是一个完整的技术体系,非常适合大型复杂项目的开发和维护。
采用的网站:Gitlab、Behance、Alibaba ...
Vue 是由前 Google 员工 Evan You 于 2014 年开发的。它具有平缓的学习曲线,只需要有 HTML、CSS 和 JavaScript 的基础就可以很快上手,官方文档也很细致和全面。这在注重快速迭代、小步快跑的互联网大环境中尤为重要。
设计哲学
React
React 提供了一个轻量级的 DOM 渲染库,旨在以一种高效和可重用的方式创建组件和子组件。它引入了 JSX 的语法,通过在 JavaScript 代码中嵌入 "HTML 元素" 实现在组件层面的关注点分离。
React 主张更大的灵活性,因此除了核心的 DOM 渲染库,官方并没有提供更多的例如状态管理和路由等类库的支持。
好在 React 拥有庞大且专业的社区,贡献了大批像 react-redux、react-router 这样强大的第三方类库,在其中你总能找到适合自己的解决方案。
Angular
Angular 提供了三个框架中最多的功能,如用户界面控制、用户输入处理、表单验证、状态管理、路由、测试、PWA 等等。
因此 Angular 更像是一个平台,它提供了一套工具集,覆盖了几乎所有开发周期内可能出现的问题。
Vue
Vue 的核心库只关注视图层,它提供的类库和工具比 React 多(CLI、 状态管理和路由的支持),但相比 Angular 更少。
Vue 是渐进式的,被设计为可以自底向上逐层应用。Vue 的一个特色是使用文件扩展名为 .vue 的 single-file components (单文件组件) ,可以在一个文件中同时处理 HTML、CSS 和 JavaScript。
小结
React 主张灵活性,相对的就丢失了确定性,Angular 满足了确定性,但又不够灵活。这本身就是在事物的不同方面做取舍。
Vue 似乎兼容了确定性和灵活性,并且提供渐进式的支持,但是过高的自由度带来的是不够稳定和健壮。
谁的设计更好?这可能是个难以回答的问题。不同的团队、不同的需求,所侧重的方向也不尽相同。
语法风格
React
React 使用 JSX 将 JavaScript 和 HTML 结合在一起,在构建项目的时候 JSX 会被编译为常规的 JavaScript 和 HTML 代码。
下面是 React 的 Hello World 组件代码。
import React from "react"
function HelloWorld(props) {
return <li>Hello World</li>
}
export default HelloWorld
你可以通过 JavaScript 函数创建 React 组件,在返回值中使用 JSX 呈现视图内容。
Angular
Angular 使用 TypeScript 作为开发语言。他是 JavaScript 的超集,在面向对象、类、接口、静态类型检查等方面提供了更全面的支持。
Angular 会将 TypeScript 项目编译为与浏览器兼容的 JavaScript 代码。
你可以用如下的方式编写 Angular 组件。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: `<h1>Hello World</h1>`,
})
export class AppComponent{}
Angular 负责在幕后将你定义的组件,转换为真实的 DOM。
Vue
Vue 使用普通的 JavaScript 语法,对于新手而言很友好。
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
小结
三个框架都是基于组件来构建功能模块和界面。
React 和 Angular 都有自己的主张的技术栈(JSX、TypeScript)因此有更陡峭的学习曲线,而在这方面 Vue 则没有过强的主张,更易上手。
但 React 和 Angular 也正是因为有自己的主张,才使得自身能够支持更加先进和高级的特性。
因此,讨论谁的语法风格更优秀似乎并没有什么意义,适合自己的就是最好的。
优势与不足
一番对比下来,似乎并没有什么坚实的理由来选出一款最优秀的框架,它们都有自身的特色。
正因如此,我们不妨将他们的优势和不足统统罗列出来,相信会有更大的参考价值。
React
优势
采用虚拟 DOM 大幅提升页面性能和一致性。
拥有强大的浏览器端开发工具,对于提升开发和调试的效率至关重要。
庞大的社区生态,使你总是能够找相关问题的解决方案。
单向数据流能防止很多错误,并且有助于调试工作。
可重用的组件从某种程度上来说简化了开发工作,提升了效率。
可以方便的使用 React-Native 开发移动端 Web 应用。
不足
不完整,官方仅提供 MVC 模型的视图(View)部分,因此你不得不选择其他的第三方库。
React 的发展速度非常快,这意味着你现在学习的特性很可能在以后被遗忘,你必须时刻跟随它的脚步。
相对来讲 React 的文档可能不是很全面。
React 生态主张函数式编程和 JSX 语法特性,对于不熟悉相关技术的新手,上手难度较大。
Angular
优势
Typescript - 相比较 JavaScript 而言是更健壮的语言,有利于写出高效和可维护的代码。
指令 - 作为 HTML 的扩展,指令可以让工程师轻松地创建动态且丰富的内容。
依赖注入使组件更易于重用,更易于管理和测试。
双向数据绑定可以使工程师减少开发的时间。
基于组件的体系结构,有利于提供可重用的高质量代码。
强大的社区支持,包含全面的文档、讨论和第三方工具。
不足
将旧的系统从 AngularJS 迁移到 Angular 需要一定时间。
从某种程度来说,Angular 系统显得冗长和复杂。
Angular 是一套完整的前端解决方案,有很陡峭的学习曲线。
使用真实的 DOM ,对于动态 Web 内容的加载在性能上会受到些许的影响。
Vue
优势
具有平缓的学习曲线,对于新手开发者非常友好。
在单个文件中分离关注点,程序开发更便捷,可读性更强。
和 React 一样,具有虚拟 DOM 带来的高渲染性能和一致性的优势。
和 Angular 一样支持双向数据绑定,数据更新和追踪更直接。
可重用组件,对于简化开发工作、提升开发效率至关重要。
生态系统完善,官方提供状态管理和路由库的支持。
出现时间较晚,吸收了 React 和 Angular 的优势,增长迅速。
不足
双向数据绑定可能会带来一些问题。
对比 React 和 Angular,Vue 背后没有大型企业的支持。
对较旧版版本的 Safari 支持会出现一些问题。
过高的灵活性通常会引入更多的错误以及编码的不规范。
社区中文化程度较高,对于英文用户来讲很难学习。
结论
下图总结了 Vue、React 和 Angular 三个框架在集成度、学习曲线、性能和主张方面的表现。
当你需要在很短的时间内快速构建一个健壮的交互式单页应用,React 会是一个稳妥的选择。但是如果你缺乏对 JavaScript 的掌控,React 则不是很合适,因为 JSX 有一定的学习难度。
对于构建大型复杂的企业级的应用,使用 Angular 是最好的选择。但同样因为它庞大的体系,Angular 并不适合构建简单的小型应用。尤其是当你的团队规模较小时,选择一个低复杂度和语法简单的框架会好很多。
当你需要一个灵活的架构,以便于从头开始设计所有内容,Vue 是值得被推荐的。但与此同时你需要在组件稳定性和它所带来的便利性之间做权衡。
这三个框架都有各自的优点和缺点,要做选择的确不是一件简单的事。但是,如果你明确了自己真正需要的和真正不能接受的,那么相信你的心中已经有答案了。
本文来源:灵感发生器 微信公众号
图片来源:
封面, simform.
本文编辑: 标梵互动(https://www.biaofun.com/)
2021年选择 Web 前端开发框架的方式相关推荐
- 好用的Web前端开发框架有哪些呢?推荐这9款
对于一个程序员来学选择一款好用的开发工具可以大大提高工作效率,底层前端框架领域中早先jquery称霸.近年MVVM类型的框架成为主流,Vue.React和Angular三大框架较为常见.今天小千就介绍 ...
- 8个提高工作效率的Web前端开发框架总结
今天要跟大家分享的文章是关于8个提高工作效率的web前端开发框架总结.着互联网的推进我们可以寻找到各种高效资源,比如我们设计网站.小程序和公众号开发的时候,前端设计并不需要我们太多的自主设计,我们可以 ...
- 有助提高效率的Web前端开发框架有哪些?
目前可选的前端框架还是比较多的,有些以前出名的如今已经逐渐淡出我们的视野.有助于提高效率的Web前端开发框架有以下这些: 第一.Bootstrap Bootstrap,来自推特官方提供的一个用于前端开 ...
- 好程序员web前端干货之web前端开发框架汇总
好程序员web前端干货之web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们.前端开发框架有很多,其中有一些写得 ...
- 常用的Web前端开发框架有哪些呢?分享这11个
在Web前端开发中,适时地使用一些框架,对于我们日常的开发,可以说是事半功倍.那么,常用的Web前端框架有哪些呢?本文,小千带你了解一下. Web前端框架节约了大量的开发成本和时间,因此很多企业会选择 ...
- 推荐十四款常见的Web前端开发框架
在做web开发的时候经常会遇到一个问题,那就是,选择什么样的框架来做前端开发.下面封程中把目前常用的一些前端的框架简单的给大家介绍一下. 1. Bootstrap Boostrap绝对是目前最流行用得 ...
- 现在有哪些web前端开发框架呢?
上一篇文章<web前端框架的五个优点>给大家介绍了web前端框架带来的一些便利.那么,现在有哪些web前端开发框架呢?今天,web前端培训的小编就来给大家盘点盘点. 1.Bootstrap ...
- 好程序员大前端送干货Web前端开发框架汇总
好程序员大前端送干货Web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们.前端开发框架有很多,其中有一些写得很棒 ...
- web前端开发框架有哪些
各种开发框架层出不穷,各有千秋.哪些才是最适合开发者的呢?以下是前端框架的一些集锦,都非常优秀,前端框架好不好,看如何组合使用,这篇文章收集了目前互联网最具有代表性web 前端开发工具和框架,这是一个 ...
最新文章
- C博客作业01--分支、顺序结构
- js断点和调试学习总结3
- Nginx服务的信号控制之USR2
- 【云速建站】表单应用
- 没有日志 mysql 5.6主从同步_mysql之 mysql 5.6不停机主从搭建(一主一从基于日志点复制)...
- 记一次坑爹报错之旅 -bash: /etc/profile: line 11: syntax error near unexpected token
- hadoop上传文件报错
- Zotero 安装 插入引用
- sublime 如何使用less_【图文】5分钟可以学会在vue里使用sass?
- 编程英语单词1.编程常用英语词汇大全
- 风险管理计划包括哪些内容
- c#获取文件的MD5值
- app推送怎么实现更好的效果?
- Android动画之Interpolator插入器
- SpringMVC是什么?
- wps公式如何加序号_WPS表格技巧—筛选后也会自动连续的序号
- python少儿编程讲师笔试题_小码王教育儿童编程教师面试:做笔试题(填空题和编程题,填空题 - 职朋职业圈...
- Mysql 删除的数据恢复
- 计算机服务器排名,2019服务器CPU天梯图 多路CPU性能排名
- 射影几何----用交比证明著名的梅涅劳斯定理