后端程序员漫谈前端框架一个后端程序员记录尝试过的各种前端框架以及对他们的感受，避免重复踩坑。以及一个大表格追踪这些技术的

我是一个后端程序员，但是在日常工作和个人项目中总是避免不了要写前端代码。我一直想找一个满足自己需求的前端技术（生态），所以尝试了很多前端技术和 UI 框架，有时使用了一个框架一段时间，觉得不甚满意，过了一段时间后，又觉得这个框架也有可取之处。

这篇文章的目的就是简单记录一下对这些前端技术的感受，避免自己失忆后重复踩坑。

首先，每个人的需求是不同的，我这篇文章带有严重的个人倾向，如果你和我的需求相似，我很开心多一个同道中人。如果你和我的喜好不同，我也希望你能在这篇文章里有所收获。无论如何，大家的留言都是欢迎的，我们互相学习，互相促进。

接下来开始盘点我对一些前端库的看法。

React

种草的点
- 生态环境非常完善。
- jsx 的写法。
- 一个文件可以定义多个组件。
拔草的点
- 各种为了优化性能而发明的语法。
- 近期侧重点是 Server API，我完全用不到。
- 官网的项目创建方案使用 Next.js，Next.js 最近切 app folder 搞得生态比较乱。
- 官网有政治倾向（拉横幅支持乌克兰，但没拉横幅支持以色列或巴勒斯坦 😸）。
总结
- 公司项目上还是一个比较靠谱且稳妥的选择，个人项目上我不太想用，但不绝对。

Vue

种草的点
- 相对 React 较为简单。
- 可能是第二大的生态。
- HTML 代码和 JS 代码分离。
拔草的点
- 需要编译（不编译享受不了一些方便的写法，以及浏览器需要加载的文件体积会比较大）。
总结
- 公司项目上可以放心使用，个人项目上如果没有更好的选择时我会使用。

Angular

使用的时间不长而且不是主动使用，所以忽略种草点。
拔草的点
- 有种“老框架”的感觉。
- 有种老大老二相争，老三没了的感觉。
总结
- 无论是公司项目还是个人项目，我都不会主动去使用的一个框架。

Svelte

种草的点
- 写法比 Vue 还简单。
- 需要记忆的魔法语法比较少。
- 官网的教程很棒。
拔草的点
- 赋予了 $ 符号额外的含义。
- 生态不完善，UI 框架很少。
总结
- 公司项目不太建议使用，个人项目值得尝试。

以上这些都是在有构建工具介入时才能发挥特长的库。接下来我会盘点一些不需要编译的库。

jQuery

种草的点
- 老牌实力框架。
- 生态比较完善。
拔草的点
- 廉颇老矣，尚能饭否？
- 没有双向数据绑定。
- 体积比较大。
- 很多功能已经可以用同样简单的原生 JS 语法实现。
总结
- 在公司接受老项目的情况下还是要学，新项目已经不再使用。

VanJS

种草的点
- 体积非常小（不到2kb）。
- 双向数据绑定。
- 不需要编译。
拔草的点
- 非常小众。
- 生态圈。
- 非 HTML 标签的写法，让 JS 代码和 HTML 代码混在一起很难分辨。

总结

非 HTML 标签的写法痛点太大了。

  if (text) {
    let requiredMask = attributes.required ? span({ class: 'text-primary ms-1' }, '*') : null
    return [div(
      label({ for: id, class: 'form-label' }, text, requiredMask),
      FormControl({ id, ...attributes }),
      ...(node.messages.map(({ id, text, type }) =>
        span({
          id,
          class: classes('form-text', { 'text-success': type === 'success', 'text-danger': type === 'error' })
        }, text)
      ))
    )]
  }
  return [input({ ...attributes })]

ofa.js

种草的点
- 原生支持微前端。
- 不依赖构建工具也能封装自定义的组件。
- 双向数据绑定。
拔草的点
- 语法不够成熟。
- 性能和安全性没有得到验证。
总结
- 花了半个多月研究的一个库，想法很好，几乎满足我所有需求（无编译，双向数据绑定，微前端，可以自定义组件，HTML 写法），但是封装的 API 方法利用了 jQuery 的 $ 符号，却又和 jQuery 用法不同，很割裂。一些方法用起来像 JS 原生语法（没有用了能省力气的感觉）。
- 现阶段不会用，但希望这个库能越来越好。

盘点完了 JS 库，接下来盘点一些 UI 框架。

Ant Design

框架：React
种草的点
- 大而全。
拔草的点
- 在国内属于烂大街的存在，像 Bootstrap 一样，别人很容易看出来你用了这个 UI。
- 结合 UmiJS 很香，但是 UmiJS 的文档太少。
- 我不喜欢 React。
总结
- 国内项目推荐使用的 UI 框架。

MUI

框架：React
种草的点
- 设计感很强。
- sx 属性的写法一开始不习惯，后来觉得很方便。
拔草的点
- 组件和属性名不符合中国人的直觉。
- 有政治立场（截止到 2024年3月12日，还挂着支持乌克兰的横幅呢）。
总结
- 公司和个人项目都值得使用也可以放心使用的 UI 框架。

ElementPlus

框架：Vue
种草的点
- 国内非常流行。
拔草的点
- 组件的 API 比较乱，命名和用法在整个框架中感觉不够统一。（因为近期没有用过了，只是一个笼统的印象）
总结
- 我不想用。但是不拦着别人用。

PrimeVue

框架：Vue
种草的点
- 组件很多。
- 官方主题很多。
- 同时还有 PrimeReact、PrimeNG（Angular），公司内使用不同的技术栈，又想要有统一的 UI 风格时可以考虑。
拔草的点
- 用的人不多。
- PrimeVue 来源于 Java JSF UI 框架 Primeface，个人觉得 PrimeVue 难免有迁就 Primeface 写法的地方。
总结
- 公司项目不建议用，个人项目可以试试。