漫谈前端技术

我是一个后端程序员，但是在日常工作和个人项目中总是避免不了要写前端代码。我一直想找一个满足自己需求的前端技术（生态），所以尝试了很多前端技术和 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 写法的地方。
总结
- 公司项目不建议用，个人项目可以试试。