vlambda博客
学习文章列表

[前端大全注]：原文作者 Harry 是 MongoDB 的 Lead Engineer，他在本文分享了一套他在实践中用起来很顺手的技术栈。欢迎在评论中分享你的最佳技术栈。

在空闲的时间，我喜欢做一些业余项目。利用这些小网站和小项目来学习一些新东西或者是创造一些有趣的东西。在过去的一段时间里，我一直想要去创造一些有趣的东西，但是过程往往变得既辛苦又无聊。所以，当这种情况不可避免的发生时，我便无法坚持下去，项目也就从此搁置了。

当我在做一个业余项目的时候，我不想花太多的时间在技术问题上而是想要集中精力在项目本身。不想去重新思考 OAuth 的工作原理，而是直接让用户用 GitHub 账号去登陆。

因此，在过去的几个月中，我一直在整理可以在这些业余项目中用的上的技术栈，这样我就可以专注于手头上的产品，减少技术上的干扰。很自豪地说，我已经找到了一套技术栈，正好满足我的需要。

前端

React.js

毫无疑问，我是 React 的忠实粉丝，它让我的前端开发变得超级高效。

前端大全注：细心的读者也许发现了，本文的英文作者 Harry 就是此前两篇热文《》和《》的作者。

Next.js

尽管 React 很棒，但是仅依靠它本身还不能够发挥太大的作用。React 依赖于大量的工具和设置来提高生产效率。坦白讲，我不愿意浪费太多时间在这个上面。Next.js 可以帮我处理这些繁琐的事情。借助于 Next.js，我可以直接开始用React编程，避免书写大量的样板代码。除了样板代码，Next.js 还提供一些其他真正难以置信的功能：

服务器渲染

我曾尝试创建自己的服务器渲染 React 应用，但实在太难了。也许大多数人会理所当然地认为这是 Next 开箱即用的功能，但是难以置信的是，他们把这件事情做的如此简单。

静态页面生成

鱼和熊掌，皆可兼得——服务端渲染和静态生成页面。

访问API接口

Next.js 内置了服务器，不需要自行安装 Express 即可创建自定义数据接口。

Tailwind CSS

我不是设计师，虽然可以实现设计，但是创建自己的设计方案是我的一大弱项。我也不想使用 Bootstrap，因为无法忍受我的网站看起来像其他的 Bootstrap网站一样。所以，将我的兴趣转向了 Tailwind，它有很多默认的样式可供使用，也足够的灵活，可以让我的项目有自己的风格。

Tailwind也是一种非常有趣的写CSS样式的方式。几年前，我还对CSS库嗤之以鼻，但是现在我真的非常喜欢它，真香。事实上，不需要使用任何自定义CSS，仅仅使用Tailwind，就可以完成整个网站的设计，这太让我感到震惊了。

Chakra UI

Tailwind近解决了CSS样式，然而有些组件，比如（Tooltip或者Modal）需要使用JS代码实现交互能力。同样，因为我想要更关注于我的项目而不是技术，我借助于Chakra来帮我实现这些组件。它也有一些强大的默认样式可以和Tailwind完美融合。

Emotion

如果我真的需要自定义样式，我现在更相信CSS-in-JS。如今，Emotion 是我最喜欢的CSS-in-JS库。它让我写样式的时候变得非常高效和富有表现力。强大的库！

React Context

为了管理数据，我回到了最原始的方法——仅仅依靠React Context。大部分数据管理需求都简单到依靠React Context就能够满足。如果发现我的数据结构确实变得复杂，那会选择Immer帮助更新和管理数据的状态。

React Query

这是我技术栈中的新成员，找到这个工具我非常开心。通过使用React Query， 可以轻松地对我的后端进行REST调用，并将结果缓存在浏览器中。它的API为数据的获取提供了十分好用的结构。设计很好的库！

后端

Next.js API 路由

再次看到Next.js感到惊讶吗?别这样！这就是我如此喜欢它的原因——它有双重功能。使用Next.js的API路由，我可以将任意数据提供给前端。完全取代Express！

MongoDB Atlas

免责声明: 我目前在MongoDB工作

我需要在某些地方存储我的数据，对吧？存储数据最好的地方就是数据库了。在我眼里，如今，MongoBD就是最好的数据库。不仅如此，MongoDB Atlas 是具有免费版的MongoDB 服务。这意味着我可以创建一个免费的Mongo数据库，连接到我的Next.js 应用，并从我的数据库中提供数据。这一切都是免费的，太棒了！

NextAuth.js

身份认证是一件麻烦事。我对重新手写OAuth协议，实现第三方登录认证没有任何兴趣。幸运的是，NExtAuth.js 这个库为我处理这些样板代码。

安装过程非常傻瓜——只需要添加一个Next.js路由设置。总而言之，我能够在五分钟内实现Github登录，太棒了。

Faker.js

在开发的过程中，我需要一些假数据。Fake.js是一个很好的假数据生成库。我能够把更多的时间花费在UI的设计，不需要操心填充空白数据的事情。短小精悍的库。

Faker.js 的详细介绍，推荐看开源前哨的介绍文章《》。

测试

Jest

Jest是JavaScript应用测试的万金油。在我看来，没有其他测试框架能够提供Jest所提供的功能。强大的默认设置，庞大的生态系统以及真正的使用流畅。

React Testing Library

对于测试React应用程序，React Testing Library是最佳选择。它的最大优势是它仅使用React的公共AP去渲染组件。这意味着它可以保证组件在测试时的渲染方式和给用户渲染时是完全一致的。

此外，工具函数和帮助函数协助你实现测试的最佳实践，这样你的测试能够覆盖住所有用户场景。

Cypress.io

Cypress是写端到端测试的最好方式。E2E测试是在浏览器内运行的测试。

Cypress有两大杰出的功能，使用起来十分愉悦：

1. 内置自动等待功能。如果你曾经使用过Selenium或者其他基于浏览器的测试框架，那么你会知道遍写可靠的测试是多么痛苦。例如，当你打开一个带有动画的model，然后点击model内的一个按钮。你需要添加处理逻辑来确保测试等待动画完成，这非常困难且烦人。但是这一且都内置在了Cypress中。

2. 调试和编写测试非常容易。它有GUI，可提供清晰的方式来帮助你了解测试行为。在GUI中，你可以通过截图看到测试是如何操作浏览器。还包括了时间穿越功能，可以回退几步去查看浏览器在前一步的状态。你必须真的自己亲自试试才能知道它的强大之处。

开始 Coding 吧！

这些就是我正在使用的技术栈！虽然花了一段时间才把它们整合在一起，但结果令我非常满意。

我喜欢这一套技术栈的原因是它帮我解决了所有的基础工作。我不再需要担心鉴权、设计或如何存储数据等。全部都帮我处理好了。

更让我喜爱的是，默认情况下，这套技术栈不会花一分钱。这也是在我想要做一些业余项目时所期望的，因为我不想在还没有搞清楚要建造什么东西前支付任何费用。

好了，我的技术栈就分享到这，现在轮到你了，欢迎在评论中留言分享你的技术栈。

1、

2、

3、