Angular、Vue、React 和前端的未来

简介:

最近社区针对框架的争论,从发文互怼再到粉丝站队再到大漠穷秋准备离职,令人唏嘘不已。不知从何而起,前端圈已经逐步变成了前端娱乐圈。越来越多的人开始站队 Angular、Vue、React,仅仅围绕这些库或者框架进行前端技术讨论,这实在不是什么好的现象。其实我想基于我个人的经验聊下前端的演进和未来,希望可以贡献微薄的力量,消除一些我个人认为的前端社区不太好的风气。

注意:以下只是我个人对于前端和业务的理解和感悟,不代表任何其他人和我所在公司、团队的观点,意见不同欢迎一起讨论。

========

以史为鉴,想要知道前端的未来,必须知道前端的过去,抽象前端发展的规律。

前端的历史

前端的发展始终伴随着端的发展。

PC 端的兴起

06 年左右国内互联网公司开始有了前端工程师的概念,原因很简单,是因为上网访问网页的人数增多,大型互联网公司为了提升用户体验专门剥离了这样一个岗位来解决相关问题。这是第一批专业前端工程师的起源。

在这几年中的发展,进行了很多轮的技术方案、框架、浏览器的演进。比如 jQuery 兼容性库,再到 Require.js 异步加载,再到现在 React、Vue、Angular 等附带编程思想的前端库以及前后端分离、前端构建器、样式预处理器等。这些演进都是随着 PC 端的用户量的增多和业务复杂度的提升,为了用户体验和开发者体验而进化的。

移动端的兴起

09 年左右,智能手机的兴起导致了移动端开发的热潮。人人拥有智能手机,这种特殊的端的特性,也产生了新的业务形态。因此无线前端相关需求开始爆发,无线前端开发、iOS/Android 工程师等需求量非常大。

这几年中的发展,先从最初把 PC 端页面放在手机上渲染,再到出来响应式设计的概念,再到专门做无线端页面,再到独立客户端和 Weex、React Native 这些跨终端的方案。也是出现了非常多的技术演进,这些演进不难看出也是因为用户量的增多和业务复杂度的提升,为了用户体验和开发者体验而进行优化的。

PC 端的衰落

14 年左右,其实 PC 端颓废之势早已显现,但在双十一下被放大。因此阿里系前端在这个时间点附近就开始弱化 PC 端前端的投入。 以前 PC 端业务,在无线端流量更大的直接被下掉,核心链路的 PC 端业务能用就可以了,不再做效果、功能迭代优化。甚至很多业务直接不做 PC 端只做无线端。业务指标也从 PC 的 PV、UV 变成了客户端的 DAU 等指标。

在这个时间,只做 PC 端的前端,毫无无线端经验的前端,将会慢慢丧失竞争力。PC 兼容库 jQuery 之流也渐渐被替换废弃,因为 PC 的业务很少花费精力做兼容性测试,甚至目前我们团队的业务从来都只测试最新版 Chrome。可以看到,随着端和业务形态的变化,很多前端演进的产物会逐步被替换废掉。

移动端的衰落

移动端目前还没有衰落,但一个端只要兴起,就会有衰落的时候。总会有新的、更好的、更高效的端来替代老的端。但这个时机是难以预测的。

前端的未来

回顾前端的历史,前端总是伴随的端的变化而变化

端的出现 -> 业务场景的落地 -> 需要端的开发者 -> 端开发者学习、演进 -> 端的开发效率提升 -> 新的端出现 -> 端的没落 -> 端开发者转领域或者被淘汰

这也就是为什么前端需要学习这么多东西,有这么庞大的体系的原因。每一个端都有它自己的特性。比如未来可能会火的 VR、AR 端,它们的特性就不同于二维平面的移动端,掌握 VR、AR 端的开发就需要新学习很多三维图形图像以及图像识别领域的东西。

因此如果你想要知道前端的未来,你需要预测端的发展。但端的发展是很难预测的,回到 06 年,有谁会想到会有智能手机,并开创了移动端这个端?

而现在火热的 VR、AR 端,目前看下来并不具备普适性。你需要在特定地点或者佩戴比较大的设备才可以用,你可以带着它给人做手术第一视角给学生做演示,但你上厕所蹲坑更愿意掏出手机看新闻而不是带着 VR 眼镜看。现有的技术很难将其很自然的融入到我们的生活中。

没有普适性和极大用户量的端,不会有太大的开发需求量,主要是特定领域的端开发者。如果这个端死掉了,端的开发者将一无所有。但下一个干掉移动端的端到底是什么?我们可能很难预料,只能顺应时代的发展快速学习顶上去。但人的精力有限,跟站在巨人肩膀上的每年出来活力四射的校招生,你又能竞争几年?

那么现在前端还可以做什么?

除了移动端领域,既然无法预料到未来的端,那我们在当下和一段未来可以做什么?

其实在上面这些前端的历史发展中,其实暗藏了一条被忽略的前端的线。我们再来回顾一下前端技术的迭代规律:

端的技术演进的原因,本质是因为业务的复杂度提升。比如一个资讯类业务,最初就展示一个信息列表和信息详情页面,那么简单的 HTML 就可以完成。之后他们对列表和详情页增加了很多元素,比如有的详情页面增加了投票功能、有的详情页展示问答和评论功能等。业务逻辑的复杂就导致这个咨询详情页需要 前后端分离、平台化机制、前端组件化、异步加载模块渲染 等技术演进。然而这只是消费者端的前端,运营者端的前端却被忽略掉了。某类详情页显示投票、某类详情页显示问答和评论,都是业务规则,是需要运营者在运营后台进行操作和配置;前端组件化是需要有组件化平台来管理并推送相关组件等。

暗藏的这条被忽略的前端的线,其实就是中后台前端。简单的说,就是整个业务链路中偏向于运营端后台链路的前端。

随着前台业务的复杂度提升,运营后台的复杂度成倍提升。简单的前端交互已经难以满足运营的需求和效率。以前配置运营规则,只需要提交个表单即可,而现在则需要操作一个更复杂的表单,表单上面各种数据接口异步请求、联动变化。运营平台的建设和效率,在快速变化的互联网环境,在某些情况下是关乎于公司业务发展的,可以预见的是这将成为前端需求的爆发点。

相比面向消费者端的前端,中后台的前端更加稳定,通常只需要面向 PC 端即可,但是需要基于复杂的业务场景进行抽象产出通用技术方案和产品,面临的挑战并不会很小。

阿里系前端在做什么?

阿里的业务体系很庞大,很多业务十分深入,因此阿里系前端也会提前针对业务发展的预期,做一些技术储备。包括早期的 Node 前后端分离、前端工程化体系、Weex(weapp 等)在国内都是领跑的,而且有足够的业务场景进行落地。所以通常可以作为前端领域的风向标。

现在这个时间节点,整个阿里集团各个 BU 都有团队在做中后台产品。就我所知就有四五套组件体系、五六个可视化搭建体系。目前组件体系领跑的有 

 下面的开源产品 ant-design 以及内部没开源的跨 BU 联合协作的后起之秀 Fusion。

而在淘宝终端技术团队,我们的暂未开源的 ICE 中后台技术产品也是集团范围内强有力的中后台产品,经过我们一年的打拼已经基本站稳淘宝中后台业务,开始逐步辐射到菜鸟、盒马、搜索等 BU 的中后台业务。我们团队基于 Fusion 中后台体系,针对业务封装了大量技术解决方案,并布局可视化拖拽系统和前端人工智能领域,处于领先位置。同时我们有非常大的中后台业务场景 淘宝商家后台 和 淘宝达人平台,这些都是面向百万级用户对外的中后台业务。

这些都可以说明中后台前端领域可能是未来会爆发的一个领域,这个领域会立足业务、助力业务,快速产出(比如拖拽创建后台页面、特定领域解决方案)运营平台页面或者内部产品以响应复杂的业务逻辑变化。

Angular、Vue、React 框架之争

上面内容全程没有提 Angular、Vue、React,因为这些库或者框架都是基于现有端的业务体系,基于用户体验和开发者体验演进出来技术方案,并没有什么优劣之分,各有各的长处。而在整个前端演进过程中,只是一块很小的内容。

Angular 约束多,擅长复杂中后台场景和多人协作。Vue 灵活,适用于简单业务快速迭代(当然也有 Vue 做中后台的)。React 组件化设计的好,可以实现比较好的组件生态进行复用。对于这些框架,你只需要基于现有的业务体系和开发者经验,做好最佳的技术方案选型即可。在某些场景下甚至 jQuery 反而是更好的技术选型。

而随着端的变化,一轮一轮的框架和技术方案会持续迭代,当新的端或者业务领域出现之后,更适合的库或者框架将会出现。那么 Angular、Vue、React 很容易的就会像现在我们对待 jQuery 一样,被我们更新换代掉。毕竟一个公司赚钱是因为业务赚钱,而不会因为你用了 Vue 或者 Angular 这些技术框架而赚钱。哪个库或者框架适合你的业务形态,可以给你带来稳定的系统和好的用户体验,让你有高效的开发效率,当然就选哪个了。

前端新手很容易会把框架当成前端的全部,比如我前几年刚学会 jQuery 可以用 jQuery 写出任何特效的前端页面,当时的我认为 jQuery 就是前端的全部,用熟了就可以一招走天下。但工作时间长了你才会发现 jQuery 只是满足了当时的业务需求,技术框架是随时会变的,不变的是特定业务的解决思想和方案。这个我认为才是非框架研发的前端需要探讨研究的更有价值的内容,比如针对无线页面跨页面跳转的状态本地存储方案、多页面无刷新的单页面路由方案等等。

写在最后

再次重申,以上只是我个人的观点。希望可以帮助大家看到更大的前端演进的全貌,避免在一个小节点死怼。

希望讨论的可以加我下微信或者直接在评论中评论,跟随讨论我可能会修改本文部分内容来保障内容尽可能正确。

原文发布时间:2018年05月11日

作者:于江水

本文来源:知乎  如需转载请联系原作者

目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
119 9
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
929 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10
|
3月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
116 58
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
280 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
71 1
|
3月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
98 1
|
3月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
99 2
|
3月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
123 1
|
3月前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
55 2

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡