从「后端现在已经看不懂前端了」说起

2020/01/07

V2EX 这两天有一篇这样的帖子:《说句实话,我后端现在已经看不懂前端了,太难了》

原文内容是:

看不懂惹,肿么办,最近在学 react,完全抓瞎。

然后又附加了内容:

一直用的 jquery,手动找位置然后对应 dom 操作,现在各种前端各种依赖,一会 route 一会 webpack 的 给爷整蒙了都。

类似这样的帖子多年来数不胜数,但这次评论区的评论比较典型,所以我决定这次不再沉默。当然,本文并非针对帖子作者。

对于那些抱怨前端「看不懂」的网友,我们应该问他们一个问题:为什么前端就应该是谁都能看懂?

这些网友从来不会抱怨别的领域的代码看不懂,比如他们不会说「我一个前端已经看不懂后端了」,或者「我一个后端已经看不懂 iOS」了。

所以在这些网友心中,前端代码就是要谁都看得懂才是正常的。因为谁都应该看得懂 HTML, 谁都看得懂 CSS.

显然,这群人对前端的认知还活在过去,他们一边享受着用 Web 技术做出来应用,一边意淫着这些包含复杂业务逻辑的 Web 应用靠 HTML 和 Vanilla JS (原生 JS) 就能写成。

换句话说,这群人最大的问题在于,他们意识不到 GUI 开发 (Graphic User Interface Programming) 是一个从图形界面被发明开始就一直在被研究的独立领域,而 Web 前端只是 GUI 开发的其中一个分支而已。

这群人没有意识到到底什么是「前端」。前端就是写 HTML / JavaScript / CSS 吗?不,前端应该泛指那些需要编写 GUI 的技术。在我看来,写 iOS / Android 应用和写 Web 前端没有本质上的区别,区别只是语言和平台,背后处理的问题是一模一样的:如何实现视觉和交互 -> 交互如何触发逻辑 -> 逻辑如何影响视觉的变化

所以,如果认为浏览器识别的是 HTML 所以认为前端应该谁都能看懂、门槛低,进而得出前端目前的工作流是问题复杂化的结果,就如同因为 Android 的 UI 是用 XML 写的就认为 Android 门槛低一样不成立得可笑

对 GUI 开发难点的不了解是导致这种误解的最主要原因,以网友「 avastms 」提出的评论为典型:

这是前端圈长期逆淘汰的结果。

模板混代码里这种 PHP 宗教行为就别提了。

个人认为因为 javascript 语言的部分原因,前端很少有人懂什么是继承,什么是类,实例到底啥意思,更别谈良好维护引用了。

什么 redux,什么 vuex 根本就是莫名其妙,不就是事件监听吗,像 Node.js 那样 EventEmitter 多么清晰,非得自己造概念。

画虎不成反类犬,凡是有这套什么状态管理逻辑的,代码完全不可读。

前端自己也是不争气,不用别人的这些狗概念,自己就不会写代码了吗?

没有什么 redux,自己就不会管理自己的属性了吗?

他说:「模板混代码里这种 PHP 宗教行为就别提了」,想必他在说 JSX. JSX 刚开始出来就充满争议,但人们最终会发现,JSX 是函数式 GUI 开发最易读写的方案。实际上,他完全可以选择不使用 JSX,这样去写代码:

const Component = h(‘div’, null, [h(‘p’, null, ‘hello world’), h(‘p’, null, ‘I am Randy’)])

但是,这位网友大概更愿意读这样的代码:

const Component = (
	<div>
		<p>hello world</p>
		<p>I am Randy</p>
	</div>
)

觉得这样的写法恶心,多数是因为不知道 JSX 这个语法糖的背后是什么。

事实上没有人阻止任何人不用 JSX, 或者看看 Flutter 就大概知道没有 JSX 的 React 会是什么样子。

作为补充,这是希望 Flutter 引入 JSX 的相关讨论:Consider JSX-like as React Native · Issue #15922 · flutter/flutter · GitHub

至于提到的 Redux 和 Vuex, 证明这位网友根本不知道 EventEmitter 和 Reactive 的区别。这里就不展开讨论了。

为什么我们宁愿用 JSX 这种折中方案也不愿意放弃函数式编程,是因为声明式(Declarative) 是编写 GUI 最好的方法。复杂的 GUI 应用包含复杂的状态,人脑在处理复杂的状态绝对不比计算机在行,我们尽可能地把这些状态交给计算机做,函数式编程就是我们实现这个目标的工具。

Elm 的作者写过一篇名叫 Concurrent FRP 的论文,讲述了函数式响应式编程 (Functional Reactive Programming) 在 GUI 开发中的历史背景和应用。

那些喜欢说「jQuery 一把梭」的网友,要么遇到的业务很简单,要么是在自虐。我见过写外挂用易语言一把梭的,但没听说过 Adobe 写 PhotoShop 用 Visual Basic 一把梭。

有些人,能接受 Maven, Gradle 的不完美,也知道什么场景应该用什么技术栈,但一旦开始写点前端代码,就认为应该有一个神一样的、完美的、还没有学习成本的构建工具,然后 Twitter, V2EX 抱怨一番,却不愿意认真学一学前端这个领域的知识。

不要妄想有一个睡醒就突然会用的构建工具。说实话,Webpack 不需要任何配置就能用,再不行试试号称 zero configuration (零配置) 的 Parcel, 用 TypeScript, 引入 CSS / LESS / SASS 通通不需要配置,跑起来就行。但那又如何呢,那些不愿意学习又想出活的网友们不懂的不是运行 webpack dev 这个命令,而是根本不懂这个命令背后解决的是什么问题。

一个人要锤子锤个钉子,结果大家都说雷神的锤子很牛逼。这个人听了,上来就要用雷神的锤子,结果拿都拿不起来。然后网上发个贴:「根本不懂为什么雷神要搞个这么重的锤子,给爷整蒙了都」。底下评论:「我工具锤一把梭!」楼下再附和:「雷神搞这个锤就是为了装逼」。

奉劝各位,把抱怨转化成求知,没有一个领域是不需要学习成本的,不管是做技术还是技术以外的领域,是分工和市场经济让各位觉得一切理所当然,然而像磨刀这样看上去简单的动作,也不是每个人都能磨好一把刀。


通过支付宝 [email protected] 或赞赏码赞助此文