“过渡的动画样式比较丰富的” 这点其实满难搞的，首先就是 CSS 的过渡（ transition ）和动画（ animation ）的 API 就有一大堆，然后也不太好学；再就是用得太多的话，网站也比较容易卡顿；还有就是，良好设计和规划的过渡和动画是 UX 的事情，程序员自己想出来的往往都是有问题的……这个是蛮专业的领域，大规模的团队是有专门的职位搞过渡和动画的。

建议只有框架内提供的基本的一些过渡和动画，不建议自己搞太多。

我了解到的一个比较好的应用过渡和动画的网站： https://www.relume.io/ 。看一下就知道，没有专业的 UX 团队，靠程序员自己是很难搞出这种效果的了。

总体上讲，react 的 UI 库选择还是比 vue 要丰富多了，不过学习成本是比较高的，如果只是做个静态的 landing page 或者交互性不多的网站，传统的 jQuery 方案，以及基于 jQuery 的各种 UI 库（ Bootstrap 之类）就是成本最低的选择，简单+容易上手+海量的模板选择。

Tailwind CSS 写起来比较快，不过项目规模大的话，几十个 class 写在一起，很难维护的。

程序员自己搞网站，没有设计师的话，注意 font/spacing/grid/color pattern 这几个基本点，保证全站的统一，然后不要引入太花哨的东西，再参考已有的一些设计，基本上是可以搞出一个及格的设计的。Tailwind 作者有本叫 refactoring UI 的书，写得蛮好的，可以参考下。

我自己用 react UI 库（ https://mantine.dev/）写的 SaaS： https://ppresume.com/ ，一个基于 LaTeX 的简历生成器。自认为还是做到了“简单”、“好看”的标准的。

https://i.imgur.com/wdj7haG.png

[讨论]( https://v2ex.com/t/1030970)

仅供参考哈。

@kile 啊，PrimeReact 和 Chakra UI 我都没用过呢，不过我粗略看了下，觉得 mantine 有几点还是很有优势的

1. 组件更丰富，比较常用的 DatePicker, MonthPicker ，Chakra UI 没有： https://mantine.dev/dates/month-picker/，PrimeReact 有个 Calendar 组件，但是不如 mantine 的 DataPicker/MonthPicker/YearPicker 强大，再比如 Rich Text Editor： https://mantine.dev/x/tiptap/，这两个重量级组件在我的产品 PPResume 中都是重度使用的。Mantine v7 还加入了对 Charts 的支持： https://mantine.dev/charts/getting-started/
2. hooks 更多，参见： https://mantine.dev/hooks/use-click-outside/，对比 PrimeReact： https://primereact.org/hooks/usemounteffect/ 和 Chakra UI： https://v2.chakra-ui.com/docs/hooks/use-boolean 。
3. style 定制，mantine 提供特别丰富的 style 定制方式，最重要的是和一般 UI 库不同，mantine 可以定制选择 internal child components ，而不像大多数 UI 库只能通过传 className 的方式定制最外层的 component ，参见： https://mantine.dev/styles/styles-overview/ 和 https://mantine.dev/styles/styles-api/，当然 Chakra UI 和 PrimeReact 也是提供了 component style 定制的 API ，比如 Chakra UI： https://v2.chakra-ui.com/docs/components/slider/theming ，但是好像用的是自己的 DSL ，不知清楚是否可以用全部的 CSS ，mantine v7 用的是 CSS module ，可以利用全部的 CSS 属性的，Prime React 的 styling： https://primereact.org/calendar 。我总体感觉 mantine 的 CSS module 还是更舒服一些 ，性能也更好一些（ mantine v6 -> v7 是升级到了 CSS module ）

说的不一定对哈，供参考。

---

背景：我最开始写 PPResume 是用 tailwind ，后来花了点时间全部迁移到了 mantine ，经历了从 v5 -> v6 -> v7 的升级，总体对这个库还是非常满意的。

@kile Mantine: https://mantine.dev/ ，个人用过的最强大的 react UI 库，强烈推荐。最开始也是用的 tailwind ，后来迁移到了 mantine： https://github.com/orgs/mantinedev/discussions/6111

TS 一把梭写了个自己的 SaaS 产品： https://ppresume.com （一个基于 LaTeX 的简历生成器），13 KLOC 代码左右，感觉还是非常有帮助的，引入的成本不大，也没必要去生硬去抠类型体操，但是对开发流程和体验的优化还是很有帮助的。当然，如果只是临时写写一些几十几百行的脚本，TS 提升有限。

@demonps 嗯，章节顺序重排，还有自定义章节其实很多人提过，我也有列过计划： https://github.com/ppresume/community/issues/5 ，https://github.com/ppresume/community/issues/12 ，最近刚刚有点时间来着手做这些，不过在做章节重排之前还要先把后端底层的数据结构再重构一下，快的话估计一个月左右可以上线了

前后端都用 JS/TS 还有一个好处，就是利用 npm/yarn workspace 这种功能，可以将部分前后端共享的代码抽出来共享，比如一些数据类型定义，一些 utility 等等（楼上也有人提到了 trpc 这种方案，我没有用过）。

@raw0xff 并不是的，next.js 的代码有一部分会在前端浏览器里运行，另一部分是在后端运行的，后端的就不用说了，前端的代码也是经过编译和混淆的，基本上也是不可读的状态。

用 Next.js 写了自己的 SaaS 产品： https://ppresume.com ，大概 13k 代码左右。

Go + Next.js 肯定是没有问题的。不过根据场景，也需要具体的技术选型。

- 纯 SPA 程序？用 react 就行
- 有搜索 SEO 需求？最好 next.js ，加上单独的后端
- 后端和 next.js 通信又有几种方式，可以采用 next.js 前端和 Go 直接通信，也可以 next.js 的前端 -> next.js server -> go server 通信

如果有比如重的 content management 需求，或者需求一个 admin dashboard ，可以考虑采用一些 headless CMS ，如 strapi 这种直接生成后端，这就是非 Go 的后端方案了。

@demonps Hello ，生僻字的问题已经暂时修复了呢，切换了下后端模板对中文的字体，issue: https://github.com/ppresume/community/issues/33

@demonps 这个可能是 pdf viewer 的 character map 的问题，回头我看一下。

自定义位置，指的是不同的 section （比如 工作，教育 ）这些可以调整位置对吧？如果是这个需求的话，我最近在开发了。

@lstz 没用过哈，不过我感觉 PPResume 其实并不算 data intensive application 哈

@lovestudykid 嗯，会做的

@qmzhna 仔细对比的话，两边文字的对齐方式，以及一些字体的细节，其实都还是有一些的，标注了一些注解，再看一下：

word：

https://i.imgur.com/3xg5Zbb.jpeg

latex:

https://i.imgur.com/QCvzwpx.jpeg

如前所述，我做的其实是一个小众的市场，也并不打算去满足所有人的需求，如果有人对排版质量方面有需求也有追求，那他自然会去寻找相应的解决方案，普通的 HTML/CSS 或者 Word 其实如果不是通过特别的调教，针对简历或者普通的文案排版，其实都达不到顶尖的排版效果的。

排版细节方案，可以看一下 PPResume docs 哈： https://v2ex.com/t/1023693

@qmzhna 观感上还是有很大区别的，不过也需要看你是不是在意这方面。

给一份 word 的 sample：

https://i.imgur.com/BVYrlGl.jpeg

同样类似的 latex 的 sample:

https://i.imgur.com/oSTjPLP.jpeg

@lovestudykid 任何一款产品其实都无法满足所有人的需求的，不过你这点提的很对，固定的栏目和模板确实是产品的一大痛点和不足，这个月我会开发“章节重排”这个功能，可以调整下章节的顺序，后序会有章节标题重命名。再高级一些的，比如完全自定义的章节，我还没想好怎么做。

@7gugu 这个仁者见仁智者见智啦，市面上的 resume builder 很多的，我没有必要再去造一个没有特色和侧重点的轮子，因此我把竞争点放在了排版质量上。

另就是，我确实有一些朋友很看重简历的排版，原来淘宝店上有个客户，七八年了，每次更新简历都找我帮他排版，手工排，这也是我觉得这块可能有市场的一个原因之一。

@kongxiao00532 哇，“简单易用好看”，在我的认知体系这是相当高的产品评价了，谢谢谢谢！

@7gugu 是这样的呢，resume builder 这个市场不算大，但是也不算小，市面上有很多竞品，开源的实现有一个非常优秀的： https://rxresu.me/ 。不过市面上大多数的 resume builder 底层排版引擎是基于 HTML/CSS 实现的，而 HTML/CSS 的精细排版能力比 LaTeX 还是要差一些。PPResume 的核心卖点就是顶级的排版，以及高质量的 PDF 输出，要实现这点，除了了解 LaTeX ，还要了解排版领域的特定知识，比如我写的排版指南： https://docs.ppresume.com/guide/font ，还有很久之前写的一些关于排版工具的一些对比： https://www.douban.com/note/575242910/ 。

除了排版方面，我自认为 PPResume 在 UI/UX 方面也有些独道之处的，基础的比如实时的表单输入验证，可以让你避免一些初级的文本错误，丰富的输入控件，以及直观的结构化编辑等等。后面会进一步打磨，把整个过程体验做到极致。

不过最核心的还是排版输出的效果，我在这篇 [blog]( https://blog.ppresume.com/posts/introducing-ppresume) 里提供了两个样章，第一份是 rxresume 排版，基于 HTML/CSS ，第二份是基于 LaTeX ，排版效果好坏相信你能很直观的感受得到。

![RXResume sample)( https://i.imgur.com/ZDJ4Aig.jpeg)

![PPResume sample)( https://i.imgur.com/OCfqu7e.jpeg)