我是一个后端程序员,但是在日常工作和个人项目中总是避免不了要写前端代码。 我一直想找一个满足自己需求的前端技术(生态),所以尝试了很多前端技术和 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 写法的地方。
- 总结
- 公司项目不建议用,个人项目可以试试。
DaisyUI
- 种草的点
- 很多主流 JS 框架都支持。
- 基于 Tailwind。
- 拔草的点
- UI 设计欣赏不来。
- 组件不全。
- 总结
- 不推荐。
下面是这篇文章中提及的各种框架的 GitHub 数据。
Library | Stars | Last Release | Last Commit | Commit Activities | Issues | Pull Requests |
---|---|---|---|---|---|---|
React | ||||||
Vue | ||||||
Angular | ||||||
Svelte | ||||||
jQuery | ||||||
VanJS | ||||||
ofa.js | ||||||
Ang Design | ||||||
ElementPlus | ||||||
PrimeVue | ||||||
PrimeReact | ||||||
PrimeNG | ||||||
DaisyUI |