自己做点小项目，前端怎么选？

就跟人都绕不过生老病死一样，一个软件开发者，只要做一个完整的项目，无论如何都绕不过前端。然而，前端的发展太太太太让人眼花缭乱，稍不留神，一大堆新的前端框架就不知怎么地，仿佛从地底下冒出来一般，让人难以择决。

作为一个后端开发者，我选择前端的原则是简单，容易上手。我自己不是一个专业的 react / vue 开发者（我的 react/vue 水平是 demo 级别，react 略好于 vue）。让我写点简单的 component 还过得去，但如果是复杂的前端界面，我可能就需要画大量的时间，而且 UI 的质量（主要是 CSS）一定不会太高。

一般来说，前端开发有这么几个问题：

• 从零开发一个项目比较痛苦：各种配置太繁杂
• 选择太多：没有标准的工具，组件，甚至目录结构
• 需要处理一些「底层」的东西：SEO / 响应式 / 懒加载
• CSS 写起来太繁琐：没有足够的经验很容易破坏响应式设计

所以，大多数时候，我不会用 react / vue 直接做项目。对于那些不讲究好看与否，仅仅需要做点前端验证些想法时，我会用 svelte。svelte 没有 react / vue 这些框架的繁文缛节，摒弃了 virtual DOM（因此简化了很多因为引入 VDOM 而导致的额外代码），可以让你很快进入到狂暴的开发模式。

svelte 的作者 Rich Harris，是前端的一位开创式人物，他的演讲 Rethinking reactivity[1] 非常值得一看。我是因为两年前看了这个视频而爱上 svelte 的。最近，Rich 新推出了 SvelteKit，是 svelte 下的开发框架（可以认为是 sapper 的下一代）。我体验了一下，感觉非常不错，是我心目中前端开发的样子 —— 简洁，高效，代码容易理解，没有太多 bolerplate。Rich Harris 和 clojure 的作者 Rich Hickey 都是我很喜欢的，很有思想，很有前瞻性的开发者。巧的是，两人都叫 Rich，看来叫 Rich 的男人至少内心世界非常 rich。

多讲两句 SvelteKit。SvelteKit 引入了 snowpack 做构建，效率非常高，开发体验很好。不同于 webpack / parcel 这些 bundler，snowpack 不做任何打包，它仅仅在浏览器请求对应模块的时候进行相应的翻译（比如 svelte → js，typescript → js），所以任何修改，都是即时响应，开发效率很高。我感觉以后越来越多的项目至少会在开发者模式使用 snowpack 来提升体验。

当我需要项目稍微漂亮一些时，我会引入 tailwindcss。svelte + tailwindcss 使用起来非常舒服，构建小项目足矣。tailwind 在刚诞生之际，是令人大开眼界的项目，如今很多框架或多或少都借鉴了它处理 CSS 的方式。它定义好了大量的 utility class，让你只需组合这些 utility class，就可以做出让人叹为观止的效果：

tailwind 的学习曲线略陡，你需要过一遍文档，了解都有哪些 utility class，以及如何在不同的场景下使用它们。有了大体的了解后，配合 vscode 里 tailwindcss 的自动补全，你就可以比较高效地完成样式的工作。

如果需要做一些静态文档，我会使用 pandoc 或者我自己写的基于 remark 做的 markdown 工具来处理文章，使用 marp 来处理 slides。至于更加复杂的静态站点，我会用 next.js。next.js 很强大，整个框架把很多细节都屏蔽了，有种 ruby on rails 的按约定编程（Convention over Configuration）的感觉，让人可以专注于处理如何把数据渲染成页面。我有限的 react 知识用在 next.js 上不会太吃力。

以上所有工具对于做复杂的企业级应用（SAAS）来说，比如 jira / clubhouse（项目管理工具那个 clubhouse），都不太适用。svelte + tailwind 缺一套成熟的 UI 库；next.js 主业是静态网站生成。我曾经尝试过一些 UI framework，如 element UI / material-ui，不知是文档的问题，还是我们八字不合，总之，我都是浅尝辄止，无法深入下去。

直到，我遇见了 quasar。

quasar 的安装，配置，以及组件库的使用都还算容易。我跟着一个 youtube 视频一小时做了个简单的 twitter，最大的感受是 quasar 的文档太给力了！每个组件的代码，都可以通过 copy & paste 加上小量的调整就可以完成。

比如要设定整个 app 的 layout，可以用 layout builder 所见即所得生成，然后拷贝代码即可：

再比如加载数据时，根据数据是否加载完成而显示的 skeleton 动画（这玩意让我手写，我是不太愿意写的）：

Quasar 的文档，所见即所得的示例代码，让整个开发过程变得非常轻松。至于 CSS，和 tailwind 类似，Quasar 也提供了相当丰富的 utility class，大部分时候你都不用写 CSS，只要使用定义好的类即可。比如 margin / padding：

非常方便。

因为 quasar 使用了 material UI 且提供了非常丰富的组件，所以，你几乎不需要考虑 UX 的问题，需要什么界面，找现成的组件，稍稍改变其参数即可。很多 SAAS UI 需要高性能的 data table，quasar 不仅提供，还提供各种各样的加载方式和动画效果，供你选择：

最后，quasar 还支持各个端的打包：桌面端内置了 electron 的打包（未来会支持 tauri），移动端内置了 cordova，虽然意义不大，但聊胜于无。

下图是我一个小时简单做出来的 Twitter clone 的成果图：

真心简单实用，是后端工程师不错的用于快速开发的前端解决方案。如果非要说不足的话，就是它基于 vue，react 原教旨主义者可能会看不上。

参考资料

[1] Rethinking reactivity: https://www.youtube.com/watch?v=AdNJ3fydeao