数字化转型浪潮中,金融行业如何破局?获取学习视频 了解详情
写点什么

操作系统封闭、后台保守,为什么前端仍能一路狂奔?

  • 2022 年 6 月 21 日
  • 本文字数:5961 字

    阅读完需:约 20 分钟

操作系统封闭、后台保守,为什么前端仍能一路狂奔?

采访嘉宾 | 尤雨溪、周爱民


在 InfoQ 成立 15 周年之际,InfoQ 编辑部发起了“2007-2022:云、运维、架构、前端的 15 年演进史”特别策划,将和业内专家共同盘点云计算、运维、架构、前端四大技术领域的演进历史,试图从几个切面窥见 IT 技术的演进规律。本文是前端篇。


特此感谢尤雨溪(Evan You)、周爱民(Aimingoo)(按姓名首字母排序)两位老师对本文的贡献,他们的真知灼见,是本文能与大家见面的关键。


本篇文章中,我们回顾了前端领域十五年来的关键节点以及发展历程,希望能帮助各位前端人深度把握前端趋势脉络,从而对当下的前端面貌有更清晰的认知。

狂奔的十五年


十五年来,前端领域可谓是发展飞速,期间发生了很多对前端领域产生了深远的影响的事件。本次两位嘉宾回顾过程中,虽然对于关键年份,二者站在不同角度给出了不同答案,但在展开分析时,都不约而同的指出了相同的几个节点。从中,我们也在两位的回答中整理出了这些年的前端成长历程。


时间回到早期,当时前端从业人员大多来自后端开发者、应用软件开发者,或者网页设计师,还并没有出现专职的前端开发。2005 年,Ajax 让静态的网页“动”了起来,异步请求和局部刷新改变了网页的交互模式,加之用户对于网页的需求越来越多。技术的进步和需求的增长促使出了第一批专职的前端工程师。不过在这个阶段,JavaScript 陷在 ES4 难产的困局中,IE 浏览器带来的标准分裂也还没有得到全面的修补,诸多大厂对于这个领域也并没有重视起来。“框架和中间件层出不穷而又良莠难分,开发工具和环境却荒草凄凄以至于乏善可陈。”周爱民表示,“但也是在这个时候,ES6、CSS3、HTML5 等等却在其中筑基、蓄势。”


“2009 年可能是最为重要的分割点。”尤雨溪谈到。原因在于这一年发生了两件大事:Node.js 发布以及 ES5 定稿发布。这个说法颇受大众赞同,也有人称,前端技术这些年经历了爆发式的发展,其中最重要的推动者之一就是 Node.js。“这两件事件的发生,直接奠定了整个前端领域向工程化发展的基石。”

展开来说,在上一个阶段中,我们谈到 JavaScript 曾陷在 ES4 难产的困局当中 ,ES5 的发布则让 JavaScript 从这种困局中挣脱出来,“并让它作为一个语言重新开始进化”;而 Node.js 的发布,则让前端进入了一个新的时代。


对于 Node.js 的定义,官网上对其特点描述为:


1. 它是一个 Javascript 运行环境

2. 依赖于 Chrome V8 引擎进行代码解释

3. 事件驱动

4. 非阻塞 I/O

5. 轻量、可伸缩,适于实时数据交互应用

6. 单进程,单线程


上述这些特性让前端工程师们开始能够打造符合自己需求的工具链和工作流程。在此背景下,接下来的两年也涌现了 Knockout.js ( 2010 ),AngularJS ( 2010 ),Browserify ( 2011 ) 等现代化前端开发的先驱,随后更是迎来了前端生态大爆发 ( 2013 React,2014 Vue / webpack )。


“随着专用工具链和开发流程的成熟,前后端分离的运动从项目内部开始蔓延到整个领域。”在周爱民看来,2008 年左右开始的前后端分离运动改变了软件开发的体系与格局。“前后端分离不仅仅是一种技术表现,更是一种行业协作的模式与规范,并且反过来再次推动了工具和框架的大发展。”


他进一步解释,前端一方面向前、向专业领域推进,从而影响到交互与接触层,因此有了更丰富的界面表现,并且从移动设备到人机交互界面等领域都成了其研究方向,这也就是现在一直在谈的“大前端”的概念;而另一方面则向后、向系统领域渗透,有了所谓工程师“全栈化”运动。


这里,尤雨溪也提及,“2016 年 Next.js 的发布可以看做前端向全栈化 / BFF (Backend-for-frontend) 发展的一个转折点,前端框架基于服务端渲染做全栈或是静态生成站点慢慢成为了一类主流开发方式。”可以说,这时候的全栈,在工程上正好符合敏捷团队的需求,在实践上正好又叠加上 DevOps、云端开发和小应用的助力,前端也迎来了一片繁华景象。


至此,前端十五年来的发展历程呈现在了大家面前,当然这其中,除了划时代的 ES5 和 Node.js 发布,也不乏其他值得关注的事件的发生,以下来自尤雨溪的盘点:


  • 2015 年,ES2015 发布。其让 JavaScript 这个语言获得了一次现代化的重生,自此 JavaScript 慢慢从一个被普遍鄙视、嘲笑的粗糙语言变成了一个颇有竞争力的语言。

  • TypeScript 的崛起似乎并没有一个明确的时间点,但时至今日其已经是前端工程中绕不过去的一个重要组成部分。

  • 2018 年 React Hooks 的发布间接启发了 Vue 3 Composition API 和 Svelte 3 的设计,引领了一波新的组件开发范式。

  • 2019~2020 年 SWC、Esbuild、Vite 等工具的发布刷新了大家对前端工具链性能的认知。


可以看到,在整个历程当中,前端从还没有完全独立,行至当下所谓的“大前端 ”,领域中包含的技术栈日趋丰富,同时,对前端开发者的要求也越来越高,以至于现在我们经常听到前端开发者高喊“卷不动了”。总的来看,这十五年,前端领域发展快速,可以说是“狂奔”到了今日。

新阶段前夕


“我认为如今我们正行进在一个全新阶段中。”周爱民谈到。所谓正行进中,说明目前还处在新阶段的初期,那么在新阶段的初期又有怎样的表现?前文说道,前后端分离运动使前端独立成一个新的领域,并且向前、后两个方向推进。而就目前看来,这种推进的势头已经在逐步放缓。“这里的关键在于,前端领域中的内容日趋丰富,其应用的体量也将愈加庞大,所以再向任何方向发展都难尽全力、难竟全功。”


周爱民解释,摊子摊得大了,就需要再细化。所以,可以预见在新的阶段中,将再次发生横向的领域分层。也就是说开始向着精细化探索,注重讨论如何将之前的技术方向进行细分,并将各个方向再做进一步技术突破和完善,如此一来,一些弥合层间差异的技术、方法与工具的出现也会出现,类似于 Babel 这样的“嵌缝膏”产品将会再次成为一时热门。


长期来说,领域分层将会带来更专精的职业与技能,并且跨域的协作也将会是规约性的、流程化的,以及工具适配的。“目前从 ECMAScript 的实践来看,规范的快速更新和迭代已经成为现实,因此围绕规范与接口的新的开发技术与工程模型,将会在这个阶段中成为主要力量,并成为维持系统稳定性的主要手段。”


但要说真正迈入新阶段,目前看来还欠缺一些火候,“我倾向于认为开启新阶段的将会发生在交互领域,也就是说新的交互方式决定了前端的未来。”周爱民表示。这一点与年初 Winter(程邵非)老师做年度展望时的观点不谋而合。“什么技术会火?要押的话,我就押 VR ,因为我觉得这个东西最接近可用。”当时 Winter 老师曾聊到,当未来 3D 交互领域,交互不再需要鼠标,没有 onclick 事件,是否会持续前端现有的框架成为未知。因此他也谈到,如果新的交互方式产生,可能对目前前端核心基础设施等产生很大的影响。


当然,周爱民也进一步补充,VR 和 AR(虚拟现实和增强实境)是这个方向上的典型技术,但并不限于此。“几乎所有在交互方式上的变革,都会成为人们认识与改变这个世界的全新动力,像语音识别、视觉捕捉、脑机接口等等,这些半成熟的或者实验性的技术都在影响着我们对‘交互’的理解,从而也重新定义了前端。”


同时,新阶段带来的还有行业生态的重构,如同今天的前端大会已经从“XX 技术大会”中分离出来一样,不久之后“交互”也会从前端分化出来,设计、组件化、框架与平台等等也会自成体系。“前端会变得比后端更复杂、更多元,以及更加的生机勃勃。这样的生态起来了,新的时代也就来临了。”


迎接新的时代听起来令人振奋,但道路中除了机遇同样面临诸多挑战,对于前端技术人来说,面对这些挑战并尽早解决才能对新时代准备更充分。周爱民总结当下挑战主要有以下几点:


其一,底子薄弱,前端在技术团队与社区的积累上仍然不够。看起来摊子是铺开了,但是一般只在“如何应用”上下功夫,真正在网络、系统、语言、编译、机器学习等等方面有深入研究的并不多。可以看到,真正有创建性或预见性的思想、方法与理论鲜很少在前端看到,根底薄是首要原因。


其二,思维转换慢,有些技术与思想抛弃得不够快,不够彻底。如果总把核心放在三大件(JS+CSS+HTML)上面而没有改变,前端的革命就不会真正开始。要把“Web 前端”前面的“Web”去掉,这一点,很多人连“观望”都没有开始。


其三,还没有找到和交互领域结合起来的有效方法与机制。如果下一次转型起于交互,那么目前看来前端还没有能力适应这样的变化。当然,若契机不在于交互,就意味着准备更不充分了。


其四,向更多的应用领域渗透的动机与动力不明确。长期以来,前端在各个领域上都只是陪跑,缺乏真正推动这些领域的动机与动力。寻求让前端持续发展,甚至领跑某些领域的内驱力量,任重而道远。

“未来还在变化”


正如我们在前端今日篇中提到,前端经过快速的发展,内容、技术栈等已经愈加丰富、复杂,而这种现状又会进一步影响前端领域未来的发展。诚然,日后前端究竟能进化成什么模样没有人能下准确的定论,所以今天我们更多的是在某些技术方向上,给予前端开发者们一些思考与建议。


首先,在前端开发者的日常开发中,框架的重要性不言而喻,这里尤雨溪站在了框架设计者的角度谈了这个方向上需要关注的几点技术趋势:


  • 基于原生语言和原生 ESM 的新一代工具链。

  • SSR 全栈场景下,从框架设计层面出发的前后端一体的性能优化。

  • 以编译期优化为前提进行的框架设计。


除了框架方向,其他的技术方向也在不断更新迭代中,换个角度来看,周爱民提出了几点:


  • 前端浏览器是未来。目前看来,去操作系统和云化是两个大的方向和趋势,当它们达成目标时,浏览器将成为与用户接触的唯一渠道。研究浏览器,其本质就是研究交互和表现,是前端的“终极私活”。但不要局限于 Web 浏览器,它必将成为历史,如同操作系统的“文件浏览器”一样。

  • 重点关注 JavaScript 的类型化,弱类型是这门语言在先天条件上的劣势,也是其在大型化和系统化应用中的明显短板。一旦改善这个问题,JavaScript 将有力量从其它各种语言中汲取营养,并得以面向更多的开发领域,这是 JavaScript 的未来。

  • AI 和 WASM 在前端可以成为齐头并进的技术,一个算法,一个实现。对于前端来说,性能问题一直是核心问题,而交互与表现必将大型与复杂化,例如虚拟现实交互,以及模拟反馈等等,而 WASM 是应对这些问题的有效手段。

  • 所谓交互与表现,本质上都是“空间问题”。也就是说,前端表现中的所谓布局、块、位置、流等等传统模式与技术,与将来的交互技术在问题上是同源的。就像盒模型确定了 CSS 在前端的核心地位一样,新的空间定位技术,以及与之匹配的表现与交互方法是值得关注和跟进的。

  • 前端要有更强的组织力,才能应付更大规模的系统。这里的组织力主要是针对工程化而言,所有工程化工具,其最终的落脚点都在快速、可靠,并以体系化的方式来组织工程项目。这包括人、资源、信息、时间、能力与关系等等工程因素,每个方面都有问题,都值得投入技术力量。


无论站在何种角度,我们都可以体会到,未来值得各位前端人聚焦的技术趋势还是很多的,所以总体而言前端领域仍然称得上充满活力。当然,这里盘点这些技术趋势,也并非要让开发者门门精通,而是可以作为了解,再根据业务需求,慢慢将它们融入到自身的开发、成长中。当然,还是那句话,没有人能准确预知以后的发展,引用圆心《前端路上的思考》分享中的一句话,“今天的我们还只是在启程的路上,未来的世界还在变化”。

对前端人说


采访最后,两位结合自己的经验对前端技术人分享了一些心里话。虽然,两位讨论的内容不同,但笔者认为本质上也有着某种联系。


尤雨溪谈道:“我认为当下,比起熟读框架源码,从用户体验的角度出发去思考前端架构可能更有价值。”这一观点,不免让人联想到张鑫旭在 GMTC 中的分享《前端工程师应该为用户体验负责》,在其中,张鑫旭也曾谈到“对新晋一批 95 后前端从业者的观察,就是我发现这批小朋友,他们主流框架、工具和库使用非常熟练,但是用户体验这块的意识相当匮乏。”他认为简单且基础的交互体验常识,在新一代的前端中是被大量忽视的,或者说完全没有意识,没有这方面的概念。


他在分享中也道出了其中的原因:由于社会发展,行业发展等各种原因,游走于上层领域,当下的前端逐渐与基础和边界脱离,使得前端开发用户体验相关意识淡薄,知识缺乏成为比较普遍的现象,已经与前端原本的职业追求相背离。


结合尤雨溪和张鑫旭的看法,不难发现,前端经过狂奔,或许已经到了一个需要放缓脚步的时间,去回归本心,更多的去考虑思维、意识上的问题,比如用户体验意识又或者接下来周爱民谈到的体系性思维。


“我从没有前端,到如今前端的发展一路所见,真正让我钦佩的正是前端持久的活力。”周爱民感慨道。在他眼里,前端开发者几乎总是一个团队中“新鲜血液”的代名词,因此前端在业界的每个阶段都走在时代的前列。


“眼前 C 语言老迈,操作系统封闭,后台保守,以及业务应用、产品市场等等各个领域都在筑城自守,再看前端种种,便总觉得开放与探索的信念犹在。”


他提出,唯一想提醒大家的是,在领域分层的潮流下,其实层间技术的核心不是功能(functional),而是能力(capabilities)。这意味着对于前端技术人来说,需要具有体系性的思维,从整体出发分析系统全貌,才能真正做出正确判断。


当然,除了能力,心态对于技术人来说也至关重要。我们都知道,在前端领域里,一直都存在着很多不同的声音。但不可否认的是,正是前端技术的更迭之快才能引发诸多讨论,这并不是一件坏事,月影曾经在接受 InfoQ 的采访时谈道:“我一直觉得,如果一个行业的新东西层出不穷,说明这个行业一直在高速发展,这本身对于从业者来说是一个非常好的事情,因为这说明这个行业中有更多的机会和成长空间。”


不过对于技术人来说,也要学会从众多声音中理清重点,理智判断,这也是自身成长中重要的一环。“类似‘前端娱乐圈’这些话当作玩笑玩梗缓解下压力没问题,但我觉得真的对一个领域有热情有投入的人是不会这么想,也不会在意这些事情的。”尤雨溪表示。

写在最后


对于前端的回顾以及当下、未来的看法,相信每位前端人都有自己的判断和见解。笔者认为,这其中的看法无关对错,不过是身处方向或者看待角度不同,正如前文曾多次提到前端内容日渐庞杂、复杂,实在难以面面俱到。


因此,对于前端技术人来说,无需刻意追求技术上的样样精通,选择自己擅长的适量方向深造,过程中别忘了抬头“看路”,同样有机会创造自己的价值,帮助前端多面开花,迎来属于前端人的新时代。

祝各位前端人越来越好。


最后,感谢尤雨溪、周爱民的分享。


嘉宾介绍:(按姓名首字母排序)


尤雨溪:Vue.js 和 Vite 的作者,独立开源开发者。

周爱民:架构师,JavaScript 语言专家,《 JavaScript 语言精髓与编程实践 》作者。


如果你想了解各种大前端技术在国内的最新实践,点击 GMTC全球大前端技术大会(北京站),与 Weex 2.0、Waft(基于 WebAssembly 和 Skia 的 IoT 应用开发框架)、KMM 专家以及 Bun 框架作者零距离交流。

2022 年 6 月 21 日 18:053586

评论 2 条评论

发布
用户头像
操作系统封闭、后台保守?这标题肯定不是两位老师起的,LInux刚刚宣布引入Rust为第二编程语言!我觉得前端人的确是相对后段一般会年轻很多,但是也不要对后端抱有封闭和保守的刻板印象好吗?
2022 年 06 月 26 日 23:55
回复
用户头像
既然是采访,干嘛不直接放上对话记录,而是试图总结,附带一堆 "名人名言"?
2022 年 06 月 25 日 09:44
回复
没有更多了
发现更多内容

【LeetCode】电话号码的字母组合Java题解

HQ数字卡

算法 LeetCode 12月日更

说了半天跨平台,今儿咱就来跨跨!(中)

为自己带盐

Docker jenkins 28天写作 签约计划第二季 12月日更

入驻快讯|欢迎 OpenI 启智社区正式入驻 InfoQ 写作平台!

InfoQ写作社区官方

入驻快讯

[Pulsar] 订阅跳过一定数量消息的原理

Zike Yang

Apache Pulsar 12月日更

初识架构设计

皓月

架构实战营 #架构实战营 「架构实战营」

Flutter开发:项目加载本地html文件的步骤

三掌柜

28天写作 21天挑战 12月日更 12月

Flutter中如何添加垂直分隔线【Flutter 专题 18】

坚果

flutter 28天写作 12月日更

架构实战营模块1课后作业

swallowluo

架构实战营

88邮箱-从入职到离职

D

Flutter 详解 Timer & ACETimerButton 自定义计时器按钮

阿策小和尚

28天写作 0 基础学习 Flutter 内容合集 签约计划第二季 12月日更

程序员的“双十二”大礼包,上海拆箱啦!

百度大脑

人工智能

聊聊 Kafka: Kafka 为啥这么快?

老周聊架构

签约计划第二季

业务代码如何才能不再写出大串的if/else?

JavaEdge

12月日更

Prometheus Exporter (二十)Lustre Exporter

耳东@Erdong

Prometheus 28天写作 exporter 12月日更 Lustre

S 锁与 X 锁的爱恨情仇《死磕MySQL系列 四》

咔咔

MySQL 共享锁 排它锁

推开GraphQL大门

梁龙先森

签约计划第二季

如何选择普通索引和唯一索引《死磕MySQL系列 五》

咔咔

MySQL 唯一索引 普通索引

终于玩明白Golang数据可视化了!

Jackpop

当我们在谈‘数据标准’的时候,我们到底在谈什么?

圣迪

数据 主数据 数据标准 参考数据

整理的三重境界

Ian哥

28天写作 超级整理术 整理 整理的三重境界

图解栈帧,别再死记硬背

李子捌

Java 28天写作 12月日更

一生挚友redo log、binlog《死磕MySQL系列 二》

咔咔

MySQL Binlog Redo Log

团队基建系列 - 组织知识传承 2

Hillz

团队协作 团队成长

[vue3组件库]0到1参与7k Star大型开源项目成为贡献者🎃

速冻鱼

开源 大前端 签约计划第二季 12月日更

《PyTorch 深度学习实战》复习3

IT蜗壳-Tango

28天写作 12月日更

HOW

Nydia

学习宫本茂的创意

Justin

方法论 创意 28天写作

MySQL强人“锁”难《死磕MySQL系列 三》

咔咔

MySQL

程序员有哪些提升幸福感的专属神器?

Jackpop

老生常谈--什么是装箱什么是拆箱

喵叔

28天写作 12月日更

python scrapy 管道学习,并拿在行练手爬虫项目

梦想橡皮擦

12月日更

“一键上链”技术大牛教你快速构建链上应用

“一键上链”技术大牛教你快速构建链上应用

操作系统封闭、后台保守,为什么前端仍能一路狂奔?_前端_闫园园_InfoQ精选文章