最近社区针对框架的争论,从发文互怼再到粉丝站队再到大漠穷秋准备离职,令人唏嘘不已。不知从何而起,前端圈已经逐步变成了前端娱乐圈。越来越多的人开始站队 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日

作者:于江水

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

Angular、Vue、React 和前端的未来相关推荐

  1. Angular入门到精通系列教程(1) - Angular,Vue,React 选型

    1. 概述 总的来说一句话,如果你是老大,你可以选择用什么:如果你不是,那么,老大让用什么,你就用什么. 前端框架Angular,Vue,React三选一,没有第四种. (当然,如果只是一两个简单的页 ...

  2. vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备

    前端开发完成的项目,不管是使用vue.react.或者是别的web项目,最终都是要部署到外网上,让用户可以通过域名来访问.这篇文章以一个 react 移动端的项目为例,讲怎样将自己本地的项目部署到阿里 ...

  3. 爱前端邵山欢课程 node+angular+vue+react+webapp高级部分

    [邵老师]大前端爱前端学习课程初中高级课程全套,课程很全面,名师讲座,由博学会员分享,未一一检测是否可用,大家可选择学习 北京航空航天大学软件工程硕士,前端开发培训名师.讲课幽默.有***,学生称他的 ...

  4. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例...

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){this.state{msg:"双向数据绑定" ...

  5. 使用angular vue react框架做过那些类型的项目?项目有多大?遇到过那些棘手的bug?

    angular现在市场小,没有用它做过大型项目 ,我现在主要用vue.react来做开发.做过电商.在线教育等移动端web和app. 棘手的Bug:做微信分享时与后台对接签名的问题,用vue做webs ...

  6. 2021 年 Angular vs. React vs. Vue 前端框架对比

    2021 年 Angular vs. React vs. Vue 前端框架对比 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架 ...

  7. Vue React Angular之三国杀,web前端入坑第六篇 上

    「 懒癌引发血案 」 目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...

  8. Vue为什么能逆袭 Angular和React成为主流前端框架?

    作者 | Maja Nowak  译者 | 苏本如  责编 | 屠敏 来源:CSDN https://www.monterail.com/blog/reasons-why-vuejs-is-popul ...

  9. 2017html5框架排名,2017年最主流前端框架比较:Angular、React 和 Vue

    如果你是一名前端开发人员,或者是想要学习web前端开发技术的小伙伴,必须要了解的这三款最主流的前端框架.不仅可以帮助你拿到高薪,也能够提升你的编程思想. 目前前端开发技术主要可以分成四个方面: 1.前 ...

最新文章

  1. Dubbo整合hystrix
  2. 为什么有转换流,作用是什么?
  3. [Hei-Ocelot-Gateway ].Net Core Api网关Ocelot的开箱即用版本
  4. scala的map映射问题
  5. 复制一段话,发现收费怎么办,下边帮你解决
  6. 重做系统,出现invalid switch noid
  7. 华为GPON设备ONU常见告警及处理
  8. Appium自动化测试(Java版)
  9. 软考软件设计师中级考试知识点(一)
  10. 可用性设计之过载保护
  11. Monte Carlo Tree Search (MCTS) 蒙特·卡罗尔树搜索
  12. 暗黑管理系列:发红包的管理杠杆率和量级作用
  13. Android——ECG心电图的绘制实现
  14. leetcode 36. 有效的数独 (将 9 * 9 数独划分成 9 宫格 )
  15. Dell+win10 进入Bios界面设定u盘启动详细图解
  16. 如何在一只股票坐庄散户敢死队点评
  17. 罗技无线鼠标导致windows 8.1不正常唤醒的问题
  18. DSP28379D_ePWM同步触发差分AD
  19. 前端程序员Vue开发经验总结
  20. 【初学者必看】vlc实现的rtsp服务器及转储H264文件

热门文章

  1. Winform中使用ZedGraph实现曲线图中字体去掉边框
  2. oracle-sqlloader的简单使用
  3. 为鸿蒙说两句公道话,鸿蒙是安卓的套壳吗?
  4. ios查看ipa是否函数特定字符_iOS 中基础字符判断函数收集(如判断大小写、数字等)...
  5. python tf_TF 2.1.0-rc2发布,2020年停止支持Python 2
  6. python内置的读取文件函数_python基础(内置函数+文件操作+lambda)
  7. 极致无边界!2021 神策数据 Tech-Day 即将开幕
  8. 速递 | 在线教育行业 12 大核心场景案例全解析!
  9. 重磅!神策 2018 数据驱动大会报名正式开启!
  10. 捞月狗签约神策数据 数据赋能打造全球玩家生态圈