我转发了一张图到前端群，大周末的群里已经爆炸了

图片是这个：

来源是 jordwalke reactjs 作者：

https://x.com/jordwalke/status/1875336115009573268

本意是想调侃一下，没想到对这个事情的认知分歧竟然这么大……

这个问题可能和这两天火热的 Go 话题有点像，要可读性还是要生产力，还是做成年人？

Nyeshuai

3 天前

尽量不创语法贴近语言 JSX 已经是最优解，也是唯一被 TS 官方支持的，这下真能说 React 就是 JS 了。上下限问题确实，还是看人，是真有很多 low 货模版里就地重复 storage get 和大段计算不觉得难看的。喜欢 tag 打头的封下组件就好，<ToggleView when={...} />

XCFOX

3 天前

JSX 已经赢了，Vue 支持 JSX ，TypeScript 天然支持 JSX ，后来的前端框架 SolidJS 、Qwik 都直接使用 JSX 作为描述 View 的方案。

在组件化时代，应该以组件为单位做分离。组件内部将逻辑(JS)、视图(HTML)和样式(CSS)写到一起对开发效率有非常大的提升。JSX 允许在 JS 里描述视图，Tailwind 和 css-in-js 允许在 JS 里直接写样式。

angrylid

3 天前

仿佛争论生化垃圾和核废料哪种危害性更大，令人忍俊不禁。就这些完蛋玩意儿跟 SwiftUI 之间不知道隔了几个 Flutter

不过就实际开发来说，JSX 是最容易写成三角地狱，幸亏这破烂语言不需要游标卡尺也能跑。

abc0123xyz

3 天前

吃瓜

LaTero

3 天前

个人从开发体验的角度来说，HTML/CSS/JS 分离不过是 CSS 和 JS 出现得比较晚，用组件分离才是正确逻辑。现在有些所谓”separation of concern“就是单纯为了分离而分离，不考虑分离到底有什么益处（因为并没有），比如 Unity 的 UI Toolkit ，2024 年的”声明式“（自称，实际只是用了声明式的 markup 语言描述布局，data-binding 并不声明式，还是"Object Oriented Programming Architecture Design Patterns Model View ViewModel Separation of Concern“那一套巨啰嗦的传统 binding ）框架居然还在搞什么 uxml ，uss ，C#脚本分离，开发体验并不好，甚至还不如 WPF 和 QML ，至少人家编译迭代快得多。

nomagick

3 天前

前端这几个框架，只有 Angular 稍微有那么一点点可读性，其他的都是灾难
只配和 PHP 比

就算和 PHP 比也差了一大截

nomagick

3 天前

比啥不好非要比可读性可维护性

前端根本谈不上可读性可维护性，哪个页面是多人维护持续开发的，哪次不是换新人来新设计就重新写
为零，真的为零

SoyaDokio

3 天前

jsx 这种 js 里面写 html/vdom 的，跟当年 java 里写 html 的 jsp 有什么本质差异？

Dynesshely

3 天前

@angrylid 对的, 说到底这种要把多种语言体系混在一起写的都是垃圾
要么就像 dotnet 生态里 wpf 和 avalonia 那样把后台和前台分开, 一个 C# 一个 xaml / axaml
要么就像 swift / flutter 那样 UI 和语言是一个体系的, 不需要介入什么 html, css 这些挂件

DOLLOR

3 天前

@SoyaDokio
jsp 只是纯纯的 string ，不具备 event 和各种 DOM 方法。

paopjian

3 天前

jsx 要是没有那个小括号,我觉得还算可以, svelte 至少一行一个指令,vue 就当写 html 了, 可 jsx 这又是花括号又是小括号的

darkengine

3 天前

我在 JSX 里会把这坨东西封装个函数，在函数里 if (condition) 短路返回第一坨 html ，再 if (otherCondition)短路返回第二坨 html ，最后返回一个兜底的第三坨 html 。

毕竟是个需要自己长期维护的项目，方便读懂才是王道。

zhengfan2016

3 天前

反正我投 jsx/template/html 一票，flutter 这种括号地狱的语言才是配进垃圾桶的那个。我写过类似的前端框架 mithril ，层层括号，行数上来了可读性就是屎。

m('div',{ class: 'flex flex-row items-center space-x-4' }, [m('img', {class: 'w-12 h-12 rounded-full',src: props.avatar,}),m('div', { class: 'text-lg font-medium text-gray-800 flex-1' }, props.username),])，

zpf124

3 天前

作为一个后端，看着.svelte 最顺眼

wolfie

3 天前

后端，看起来 2 > 3 > 1

X_Del

3 天前

某种意义上，此争论的根源之一是：HTML / CSS / JS 并不适合写 UI 。

HTML + CSS 本来是服务于排版的。HTML 只用来表达信息，而 CSS 赋予信息以样式，JS 则提供简单的交互和动态更新内容的能力。
- HTML 是可以脱离 CSS 存在的：打开一个博客页面，文章内容都在 HTML 里，即使 CSS 完全没加载出来，用户也可以阅读文章内容；
- HTML + CSS 又是可以脱离 JS 存在的：现在还有很多人认为网页就该脱离 JS 也能正常工作，比如这里的讨论： https://news.ycombinator.com/item?id=33212448 。
早期的互联网上，网站以门户网站、博客、论坛等形式为主，这一套可以说非常成功。网站就是一篇文章，文章的内容、文章的样式、文章的交互，就该是解耦的，用三种语言很自然。

但前端开发者面对的问题今非昔比，如今我们要开发的，不再是门户网站、博客和论坛，而是各种富交互的“应用程序”。前端开发与桌面 / 移动端 UI 开发越来越像，这要求我们的工具也越来越像 UI 开发工具。这时的 HTML / CSS / JS ，就有点不太够用了。

UI 开发与网页开发有着根本的不同：数据 / 样式 / 交互的解耦不再有意义。在一个应用程序中，应用被分成一个个 UI component ，而一个 UI component ，就该是 self contained 的。习惯于三件套老前端们也许不会有这样的疑问，但为什么写一个 button 需要切换三种语言？ button 的 label 写在 HTML 里，button 的颜色写在 CSS 里，button 绑定的事件则要写在 JS 里？

新的需求出现了，我们理应有新的工具。我们本可以开发一样新的技术替代 HTML / CSS / JS ，最终产物可能像是属于 Web 的 Swift UI 或者 Flutter 。但阴差阳错，最终的结果是 JS 一桶浆糊：我们有了 JSX 和 CSS-in-JS 。

回到开头，HTML / CSS / JS 并不适合写 UI ，但 Web 开发无法抛弃 HTML / CSS / JS ，最终我们不得不以某种形式在 JS 里写 HTML ，无论是 vue 还是 JSX 。

这种以 JS 强兼 HTML 的方式总是有某种代价（ SEO 、性能等），我们又搞出了各种技术来擦屁股：比如 SSR 和各种 zero-runtime CSS-in-JS 。