与 Mike Cavaliere 一起 Smashing Podcast 第 40 集：React 的 Chakra UI 是什么？

已发表: 2022-03-10

快速总结↬在这一集中，我们谈论的是 Chakra UI。它是什么，它对你的 React 项目有什么帮助？ Drew McLellan 与专家 Mike Cavaliere 交谈以找出答案。

在这一集中，我们谈论的是 Chakra UI。它是什么，它对你的 React 项目有什么帮助？ Drew McLellan 与专家 Mike Cavaliere 交谈以找出答案。

显示注释

脉轮用户界面
迈克在推特上
迈克的个人网站
切入 Jamstack 书

每周更新

用代码设计：一种现代设计方法
由 Mikolaj Dobrucki 撰写
使用 Auto VO 在 macOS 上自动化屏幕阅读器测试
由卡梅伦坎迪夫撰写
设计思维作为解决问题策略的兴起
由乔什·辛格撰写
如何为主要的 EdTech 平台运行 UX 审核
由马克·兰克米利尔撰写
使用 Next.js 创建多作者博客
多姆·哈伯萨克 (Dom Habersack) 撰写

成绩单

迈克·卡瓦列尔的照片 Drew McLellan：他是一家名为 Echobind 的机构的高级软件工程师。他已经编写代码 20 年了，并且一直在使用 JavaScript。他喜欢 Jamstack，他的新书 Cut Into The Jamstack 教读者如何从头开始构建软件即服务应用程序。我们知道他知道他在 Jamstack 周围的路，但你知道他曾经在花生酱过道里迷路吗？我的好朋友，请欢迎 Mike Cavaliere。嗨，迈克。你好吗？

Mike Cavaliere：我今天绝对是棒极了。

德鲁：很高兴听到这个消息。今天我想和你谈谈一个我真的没有听说过的项目，直到我在你的 Jamstack 书中看到它。我不知道我是怎么错过它的，因为它似乎正在成熟，有据可查，而且是一个真实的……只是一个伟大的项目。我希望今天我们可以谈论它，我可以赶上来找出我一直应该知道的东西。当然，我说的是 Chakra UI。告诉我，什么是 Chakra UI？它在什么空间，它为我们解决了什么问题？

Mike： Chakra UI 是一个用于 React 或 UI 工具包的 UI 框架，我猜他们将其表述为。现在，在任何应用程序堆栈中，您都不想从头开始发明 UI。您想获取一些工具包。这种情况已经有一段时间了。

Mike： Chakra UI 是 React UI 工具包的一个很好的方法。它有很多好处，但其中之一是它......一方面，它很强大。这意味着它包含您可以想象的每个 UI 元素。它有开关。它在网格周围有包装器。它有所有类型的东西形式元素。

Mike：它被设计得非常可组合，所以一切都使用了风格道具。您的组件，它们开箱即用。您可以删除它们并按原样使用它们。但是如果你想做一个调整，很容易传入一些样式属性。它们完全可以访问。可访问性，每个人都在谈论但总是忘记实施或需要一点努力来实施，它是为您内置的。

Mike：我用 Chakra UI 组合一些东西并获得非常好的 Lighthouse 分数对我来说并不少见。实际上，我今天只是在查看 Cut Into The Jamstack 网站，可访问性得分非常高。它也非常完全可主题化。您可以从头开始设置主题配置。它只有一长串的好处。

Mike：它的开发速度非常快，这也是最初吸引我的地方。 Echobind，我们在内部使用它。但对我来说，我没有设计感。有一点，但无论如何我都不是设计师。我可以从 Chakra 中抓取组件并稍微改变一些东西以使其保持一致，并且开箱即用。你能够快速发展。开发者体验很棒。它在很多层面上都很棒。

迈克：在我继续胡说八道之前，我要说的最后一件事。但它也有很多 React Hooks，它们是非常常见的功能事物的助手，这些事物伴随着你正在使用的这些元素。例如，在黑暗模式下。有用于使用较浅的黑暗模式的内置钩子，它非常突兀地让您在主题中切换颜色。

迈克：还有另一种用于使用过的披露，用于切换模块之类的东西。你总是需要一个开、关状态。但是 Hook 只是进一步简化了这一点，因此您可以专注于框架无法自动推断的事情。我会在那里剪掉它，因为那太多了。

德鲁：那真是太好了。就这样我的理解是正确的，首先是Shakra而不是Chakra？沙克拉？

迈克：我不会是这方面的专家。我一直在说 Shakra 只是因为瑜伽。但我们必须要求创始人仔细检查。

Drew：这是一个现成的设计系统，您可以加入它来为您的项目构建 UI。

迈克：是的。

Drew：它专门用于 React 项目。

迈克：是的。那里有一个 Chakra Vue 项目。我不是一个 Vue 人，但我知道它确实存在。可能还有其他框架，但我非常非常关注 React，所以我一直在使用 Chakra 默认的 React 框架。

德鲁：是的。我过去对 React 很熟悉。我在 Netlify 工作时使用过 React。现在我在 Vue 中做所有事情。那是我首先看到的东西之一。哦，有 Vue 吗？这看起来不错。有 Vue 版本吗？我找到了它的 Vue 版本，它似乎落后了很多。我认为它是在 0.9 或其他版本上，而不是 1.6 或任何当前的 React 版本。我不确定那是多少电流。

Drew：我们有相当过时的框架。诸如 Foundation UI、Bootstrap、Bulma 之类的东西。它们已经存在了很长时间，而且它们似乎是上一代的框架。然后我们有一些更现代的方法。我想很多听众都会熟悉 Tailwind 和 Tailwind UI 项目。 Chakra UI 在那个风景中属于哪里？它更接近于 Tailwind 可能采取的某种方式……一种 Tailwind 可能采取的方法。那是对的吗？

迈克：我想是的。诚然，我一直想深入研究 Tailwind，只是因为它现在很受欢迎。但我不能明智地谈论 Tailwind 本身的来龙去脉以及如何……我的感觉是 Chakra 和 Tailwind 是替代方法。显然，你要抓一个，而不是同时抓一个。

迈克：我还不知道两者的优缺点是什么。我只是非常迷恋 Chakra，所以我只是默认使用它。我想，“好吧，我现在非常了解这一点。我喜欢它。我以后会去学习其他的。” 但 Tailwind 很明显，非常受欢迎。我认为 Tailwind 在 UI 工具包中有他们的基本框架。这公平吗？

德鲁：对。是的。

迈克：好的。这可能更符合 Tailwind 的 UI 工具包。在 Chakra 主页上，他们确实比较了您可能想要达到其中一个或另一个的原因，但我没有将其内化。

德鲁：是的。那挺好的。正如我们所提到的，对于 React 项目和表现自己的方式，而不是一些更传统的设计系统，它们会给你一大堆类名来放在你的 HTML 上，你必须使用一些 HTML 结构，把正确的类放在上面它。这就是您在项目中显示 UI 的方式。使用 Chakra，因为它基于 React，它为每个元素提供了完整的组件负载。您可以只导入到您的项目中。这些组件封装了它们自己的标记和样式，是吗？

迈克：是的。您实际上不必使用 Chakra 编写课程。我没有。我什至不知道这是否可能。整个 React 范式是一个组件的组合和属性。组件的封装意味着您将某些属性传递给组件。在脉轮中，你有一个主题的概念，它是一个全球范式。有一个默认主题，它有颜色和间距的值以及所有常见事物的某些单位。

Mike：你可以自定义那个主题。它在全球范围内对其进行定制。您可以根据需要增加它。当您调用组件本身时，例如，文本输入。一个输入组件。这将具有主题定义的默认颜色和边框半径以及填充和边距。当您想进一步设置样式时，如果您不想在全局范围内进行设置，例如，当我指定底部边距时，我会根据具体情况进行设置。我不会在全球范围内这样做，因为这可能导致灾难。您只需将其作为提示传递即可。

迈克：有快捷提示。如果我有一个输入组件，我只是说 MB 等于，然后是一个值，它将应用边距底部。或者他们有垂直和水平的MX和MY。或者，您可以只指定 M 并传入字符串，就像使用 margin CSS 属性一样。没有类名。它会动态地执行所有类名并将其与用户混淆。

德鲁：是的。我认为这就是必须与 Tailwind 进行比较的地方。因为 Tailwind 的工作方式是它为您提供了大量的类。如果您想增加边距，可以使用一个类来增加边距。听起来您实际上正在采用相同的方法……这是一种不同的实现方式，但其架构方式相同。我们实际上正在使用道具，而您正在传递道具来调整这些东西。

德鲁：定制设计有多容易？是不是只能调整颜色、边距和填充，让它看起来有点不同？或者你真的可以用 Chakra 打造一个主题吗？

迈克：哦，你可以为所欲为。这很棒。您可以在组件级别或主题级别设置样式。这只是取决于你想用它有多有创意。我已经设法使用了一些组件并用它们做了一些疯狂的事情。使其真正具有风格的部分原因是这些组件非常原子。

Mike：再次使用文本框的例子，如果你想要一个文本框，你的组件就是这样。您可以为其周围的所有内容设置样式，也可以设置文本框本身的样式。或者您可以更改主题。设置颜色以在全球范围内重新命名所有内容。

Mike：实际上，我在推特上给 Chakra UI 的创建者 Seg 发了推文，说他们应该在网站上放一个画廊，因为它真的很棒。你可以用它创造一些漂亮的设计。它们种类繁多，表面上你可能不知道。我不知道 Chakra UI 是否有任何迹象表明您正在为您的网站使用 Chakra UI。

迈克：我已经看到了一些很不错的东西。但是你可以用它做任何事情。我做过静态网站。切入 Jamstack 主页就完成了。就像一个例子。我们已经在 Echobind 大量使用它。我不记得我们是否将它用于 echobind.com。但肯定有很多我们的客户网站。然后是我一直在构建的应用程序 JamShots，它是一个应用程序。它还没有营销页面。但这只是 UI，所有 UI 都是使用 Chakra 构建的。

迈克：在我赞美 Chakra 的同时，另一件事是，我最近经常使用另一个网站，我在……我也将在书中介绍。脉轮模板.net。脉轮模板.net。这是一种常见的设计模式，无论谁做出贡献，都在寻找英雄单位或定价单位。他们只需要复制和粘贴脉轮代码。

迈克：我将它完全用于图书主页，因为它为我节省了很多时间来开发它。这就像，哦，你有一个定价模型。让我复制并粘贴它。让我稍微调整一下样式道具，以使我网站上的所有内容都保持一致。而已。这只是与 Chakra 本身不同的另一件事，但它只是这样可以节省时间，因为您在很多网站上都需要这些东西，并且每次都想重新发明轮子。

德鲁：听起来它可以真正节省时间，不仅适用于您想要快速推出某些东西的个人项目，还适用于代理环境。

迈克：哦，是的。绝对地。

Drew：这是否同样适用于应用程序界面和营销网站？它是否偏向一种或另一种方式，或者无论您正在构建什么，它通常都是有用的？

迈克：我会说两者兼而有之。绝对是。我两个都用过。我们公司已将其用于两者。我们构建，我想说我们非常倾向于构建全栈应用程序和移动应用程序。我们肯定比市场营销更需要 UI。尽管我们有时也会构建它。这对双方都有用。

Mike：他们确实提到了网站上的一些内容，比如你什么时候不想使用 Chakra？他们确实说因为它简化了这个界面 CSS 的方式。当屏幕上有大量数据时，可能会遇到挑战。如果您正在创建大量的 DOM 元素并进行大量实时更新，您可能会也可能不会遇到性能挑战。

Mike：我从未见过性能问题。但我还没有构建出实时数据密集型的东西。是担心。如果我要构建一个这样的应用程序，我可能无论如何都想增加两种不同的方法，只是为了看看它们在很多方面的表现如何。但是，是的。它对这两种情况都普遍有用。

德鲁：我想总会有一个权衡，不是有技术选择吗？让它变得非常非常简单的东西。实施起来真的很快。权衡可能是，一旦您在页面上创建 1,000 个数据点或其他任何内容，这种工作方法将不会很好地执行并减慢您的速度。

德鲁：是的。我认为这是公平的。我倾向于在技术选择中发现，最重要的就是知道。只是想知道权衡是什么以及限制是什么。它们都没有好坏之分。你只需要为自己的情况找到一个合适的平衡点。

Drew：正如您期望在这种设计系统中找到的那样，它带有用于排版的组件。对于布局。然后是按钮和表单元素的细节，还有一个图标库。您希望在设计系统的厨房水槽页面上看到几乎所有内容。你已经拥有了一切。对我来说，这一切似乎都很现代。我注意到布局网格组件实际上使用了 CSS 网格，这总是很好看。它不仅仅是提供一些弹性盒子。

迈克：哦，是的。完全。

德鲁：通常使用起来非常灵活吗？您是否发现布局元素能够构建您需要的任何类型的 UI？

迈克：是的。是的。绝对地。最棒的是它们在某些情况下提供了不止一个抽象级别。在 CSS 网格的情况下，它们有一个简单的网格，就像，好的。你想把它放进去，这就是你的网格。您只需将东西放入其中并指定，我认为列数或类似的东西。然后你有一个网格。

Mike：但是如果您需要在网格的行为方面有更多的灵活性，那么您有一个通用的网格组件，它可能是……简单的网格组件可能包装了另一个网格组件。它只是自身之上的另一个立面。

Mike：这种组件组合的方法，因为同样的原因，它在 React 世界中是一个有价值的范例。如果您有一个非常通用的组件并且有很多道具，那么，可能会有一组用例，您希望以一种相当普遍的方式使用该组件。您只需将其与具有静态或预先指定的道具的另一个组件一起包装，以获得更强大的组件。

Mike：他们在 Chakra 中很好地使用了这种方法。我还没有遇到任何我不能用它做的事情。我确定它就在某个地方。或者做一些更麻烦的事情。但它通常还没有发生。至少我想不到。

德鲁：嗯，我很高兴看到的一件事以及你之前提到的一件事，似乎是对可访问性的高度关注。

迈克：是的。

德鲁：当然在促销信息中。这是在代码本身中诞生的吗？他们实践他们所宣扬的吗？它实际上内置了良好的可访问性吗？

迈克：我想是的。我所做的最接近测试的方法是针对它运行 Lighthouse。它始终为可访问性提供高分。我通常会使用 Chakra Next.js。 Next.js 是开箱即用的性能。您经常会看到高分和一切。我今天刚刚在推特上发布了关于这本书的主页如何获得四分之三的灯塔分数。有可访问性、最佳实践、性能和四分之一。我现在不去想。

迈克：除了性能之外，其他一切都接近 100%。性能部分在我身上只是因为我在页面上放了很多东西而且我还没有优化它。它倾向于这样做。每当我使用 Chakra UI 时，Lighthouse 的可访问性分数都非常好。

德鲁：那太好了。你提到他们正在使用服务器端渲染，你有什么。像 Next 和 Gatsby 和我有你的东西，绝对没有问题，是吗？与这些一起使用脉轮没有任何障碍吗？

迈克：哦，不。一点也不。我没用过。我倾向于关注 Next.js。我没有插入 Gatsby 或任何其他 SSR 工具。但是只要框架，它没有任何东西会阻止它这样使用它，那么它应该没问题。

Mike：对于 React，Chakra 提供了一个上下文 API 提供者。一个主题提供程序，这样当您... 例如，在我的 Next.js 应用程序中，您有一个... Next.js 有一个下划线应用程序 JS 或 TS 文件，它只包装应用程序中的每个页面。您只需将主题提供程序插入其中，Chakra 就会完成其余的工作，并且它随处可用。当然，添加到 Next.js 中没有任何障碍。但我想也不是 Chakra。

Drew： Chakra 使用 TypeScript 吗？我相信是的，不是吗？

迈克：它支持它。是的。

德鲁：它支持它。对于已经在项目中使用 TypeScript 的人来说，这是一个很大的优势。如果人们还没有使用 TypeScript，那有什么缺点吗？

迈克：我不这么认为。我在所有项目中默认使用 TypeScript，Echobind 也是如此。但是当我在个人层面上做事时，我会使用……我喜欢说 TypeScript。 Typescript 在通过创建静态类型来减少错误方面非常有价值。虽然它有一个载体，但根据你对它的了解，TypeScript 可能是一个真正的障碍。

Mike：我的最低门槛……我使用的 TypeScript 的严格性相当低，因为你可以通过基本类型从 TypeScript 中获得很多价值。它将防止许多常见的事故。当你进入更高级的打字时，如果你对这些东西不太满意，它真的会让你放慢速度并让你感到沮丧。

Mike：这与 Chakra 和 TypeScript 是一样的。我倾向于使用少量的 TypeScript，至少在开始时，直到我真正充实和稳定一个项目。但无论有没有 TypeScript，它在使用 Chakra 时都没有任何挑战。很好用。我喜欢它，但你当然也可以不使用它。

德鲁：是的。正如您所说，我发现使用 TypeScript，您只需使用几种类型即可获得 80% 的好处。如果你在兔子洞里走得太远，你最终会得到一个主要是 TypeScript 的脚本。然后是底部的一些 JavaScript。

迈克：或者你花了很多时间试图找出正确的打字方式，你的大脑就会爆炸。这就是你如何放置任何或未知的。你快捷方式。在这种情况下，我主张这样做。如果您需要花费太多时间来完成某件事，那么您可以拉动一个杠杆。

Drew：我想，Chakra 文档的内容似乎非常好，而且……它对每个组件都有一个概述。然后，它非常有用地包含了有关在实现该组件时所做的设计考虑的任何技术说明。作为前端工程师，我认为这很棒。他们在说我的语言。我明白。我知道该组件在后台做了什么。

Drew：这只是从我的角度来看，在没有我正在从事的实际项目的情况下浏览文档。当你真正在做一个项目并且深陷其中时，只有文档能坚持吗？它像看起来那么有用吗？

迈克：哦，是的。绝对地。我的观点有点不同。我并不总是需要知道引擎盖下发生了什么，但我觉得我通常可以推断出来。如果我在看一个盒子组件，我现在只是在看文档，而我们正在讨论复习。如果我看一个盒子组件，我会说，“好吧。默认情况下，这可能是一个 div 。我看到它传递了渐变属性，无论如何。”

Mike：在不完全理解他们翻译 CSS 的魔力的情况下，我可以对引擎盖中发生的事情有所了解。将道具翻译成 CSS。但是文档很棒，因为它非常线性。这是非常一致的。它列出了所有的例子。一点点复制和粘贴。

迈克：它只是使用了非常好的空白空间，因此查看页面似乎不会让人感到不知所措。你可以很容易地找到你需要的东西。他们的搜索也很棒。他们的搜索很有帮助。 90％的时间，我认为这就是我要去那里的目的。可能会去那里看看是否存在一个组件来做某事。它通常会。偶然发现了一些我不知道的有用的东西。或者只是在一些原则上刷新自己。我几乎总能在这里找到我需要的东西。

Drew：我唯一不喜欢看文档的地方是上面的广告数量。在他们的 Chakra UI Pro 商业产品的每一页上。

迈克：我没见过他们。有趣的。我已经看到了它。我肯定见过。但我现在没有看到它。哦耶。好的。有 Chakra UI Pro。我想我在精神上过滤掉了它。我听到你了。至少它不是太大而且在你的脸上。

德鲁：它不是太大。它只是在错误的地方。它只是您要查找信息的地方。我想这就是他们这样做的原因。在考虑生态系统和项目周围的一切时，值得一提的是，有一套专业的组件......我想它相当于 Tailwind UI 中的一些东西。营销页面和这里是组件以及更多这些组成的页面部分和整个页面以及布局和事物。您可以从 Chakra 的制造商处获得，但作为商业产品。

迈克：是的。现在只是快速浏览一下。其中一些实际上是可用的。或者它们的版本可以像 Chakra 模板一样免费获得。我猜，Chakra 模板是 Chakra Pro 或开源竞争对手的开源解决方案。我相信你会为此付出很多。如果您对这些有付费专业需求，那么看起来 Chakra Pro 非常强大且价格合理。您的项目有几个选项，看起来像。

德鲁：是的。听起来围绕它建立了一个相当大的生态系统。你知道这个项目进行了多长时间，还有什么后续吗？它在 React 社区中广泛使用吗？

迈克：我想说是的。不知道到什么程度。我很想知道现在 Tailwind 与 Chakra 的市场份额是多少。我确实知道查克拉最近获得了一个奖项。 GitNation React Award 对社区最具影响力的项目。我会说它很大而且很受欢迎。有充分的理由，这很棒。人们肯定很享受它。我不是唯一一个。

Drew：将依赖项引入项目时始终值得考虑的一件事是，当您需要更新该依赖项时会发生什么。

迈克：是的。

Drew：我想，脉轮一直在改进。是不是一旦你导入它并用它构建，你就把它锁定在某个版本上？或者保持更新通常是安全的？就设计和您网站的内容而言，它是否相对稳定，不会随着 Chakra 的更新而改变？

迈克：到目前为止。是的。主要是因为发展的进步。他们现在在版本 1.6.3 上。几个月前，它们从零变为一。那是他们唯一一次发生重大变化。从那时起，他们一直在不断地进行功能发布和错误修复。

迈克：至少在过去的几个月里，一切都只是补充。添加和修复。不涉及重大更改。我不知道路线图是什么样的，但我想它会继续如此。每次我升级它，这些次要版本之一，它都很好。我从来没有见过有什么东西从中脱离出来。但是当他们推出 1.0 时，发生了一些重大变化。不过我不记得那是灾难性的。

德鲁：你知道捆绑大小和摇树查克拉能力的情况吗？它是否会给您的项目增加很多重量，或者只是在您使用它们时才导入东西？

迈克：老实说，我不记得了。我大概应该知道这一点。我没有注意到它增加了很多重量。主要是因为您要单独导入组件。不导入所有脉轮或类似的东西。我会说它支持摇树，但我还没有对其进行测试。不过，到目前为止，我还没有专门从中获得巨大重量的东西。

德鲁：是的。这始终是一个重要的考虑因素，不是吗？

迈克：是的。

Drew：在我们深入研究并在项目中使用 Chakra UI 之前，我们还应该了解其他什么吗？

迈克：不，这很棒。还有相当活跃的社区。我经常看到更新。我现在正在查看文档并查看以前从未见过的组件。我看到有很多功能添加正在进行中。那太棒了。

德鲁：是的。这太棒了。您有一本名为 Cut Into The Jamstack 的书，它是预览版。目前是一个测试版。您正在自行发布。那正确吗？

迈克：是的。是的。我是。这是我第一次尝试技术书籍。我只是想把它拿出来，而不是做一些类似的事情，我猜它是正式的。我也是一个喜欢非正式的人，尤其是在创造事物时。它让我有能力通过这样做来按照我的方式去做。

德鲁：这本书从字面上引导读者构建一个软件即服务应用程序。

迈克：是的。

德鲁：都在 Jamstack 上。为什么你决定现在写这篇文章并在本书中采用这种方法？

迈克：好问题。我已经编码了大约 20 年，我想我不久前曾尝试写一本书，但它还没有完全成形。我正处于职业生涯的某个阶段，我真的想分享更多知识。我已经使用它这么多年了，我很想真正把更多的东西放在那里并帮助别人。

迈克：去年 10 月左右，我有这个……我想在那里推出一些产品。电子书感觉是一个非常好的开始方式。我对 Next.js 和你可以用它做的事情充满热情。我使用术语 Jamstack 并将 Next.js 视为 Jamstack 的一部分，因为它默认生成静态站点。

迈克：但我认为，在我看来，或者可以使用更多解释的一件事，就是用它构建软件即服务应用程序。因为 Jamstack 不仅适用于网站。它非常适合内容驱动的网站，因为它是静态的、活泼的和 SEO 友好的。

Mike：但是那里有很多丰富的功能，尤其是在 Next.js 中，Vercel 昨天在那里举行了 Next.js 大会，他们在那里发布了越来越多令人惊叹的功能。我热衷于将软件构建为服务。软件网站很棒，但软件是用来做事的。

Mike：对我来说，这个堆栈是软件即服务开发的未来。它让我想起了 Ruby on Rails 刚推出时的样子。说起来，这是一种进化。它自动化并简化了许多您过去必须手动完成的事情。加快了发展步伐，提高了发展质量。

Mike： Next.js 和 Jamstack 以及 Vercel 和 Chakra UI，它们都在为你简化很多事情。 Next.js，它简化了很多与速度相关的问题和与可访问性相关的问题。实例化。这些就是全部，路由已为您完成。您不必担心客户端或服务端路由。它是自动的。 Chakra UI 通过可访问性和主题来做到这一点。这些工具放在一起，它们只是...... 开发人员体验变得非常棒，一切都......它让您可以自由地真正创建软件。

迈克：回答你的问题。我现在出版一本书的原因是因为我真的很想把一些东西放在那里，并且随着 Jamstack 生态系统开始结出硕果和成长。它还让我有机会在 Jamstack 中编写更多代码，我就是喜欢它。

Drew：我认为，正如您所说，当您考虑网站和通常是轻量级网站时，很容易接受 Jamstack 的想法。但是，下一步要考虑如何使用这种方法来构建完整的 Web 应用程序，这要困难得多。我认为，如果您习惯于以服务器端思维方式思考，这是一个更大的障碍。

迈克：是的。

德鲁：这是一个更大的跳跃，好吧。我可以将身份验证提供给服务-

迈克：是的。

德鲁： ……我可以……我想对于读者来说，从读者对你的书的角度来看，只要通过和构建这个例子，跟随你，这可能是克服这个障碍的好方法，只是提供帮助轻轻地将你的心态转变为，好吧。这就是我可以做所有这些事情的方式，但在 Jamstack 上。你同意吗？

迈克：是的。这就是我所希望的。我认为确实如此。这确实是它的意图。我最近签署了一个演讲，一个会议演讲...... 一个框架，但以亲身实践的方式向您介绍堆栈感觉更好，因为每个拥有丰富经验的开发人员都擅长查找文档和谷歌搜索以及使用堆栈溢出。我为什么要浪费你的时间教你呢？

Mike：我想让你快速深入地了解堆栈以及我可以用它做什么。您将了解每件作品的优点。 NextOFF 和 Prisma。 Next.js 和脉轮。我会将您链接到文档只是为了节省您的点击次数。但是您将通过一个交互式示例了解这些部分如何连接在一起。您还将了解困难的部分。

Mike：例如，我要深入探讨的一件事是我正在为异步多文件上传构建的此功能。 Next.js 有一个前端和一个后端。尽管在前端的前端和前端的后端，如果你使用这个类比，你就有了 React 层。然后你就得到了节点层。有这些 API 路由。

Mike：如果你想用它进行多文件上传并使用服务，我在书中使用 Cloudinary。但是，如果您使用 API 服务来上传您应该使用的图像和媒体，那么那里有很多可动的部分。有客户端，用户与之交互。有对 Cloudinary 或其他提供者的 API 请求。但是您必须发出多个 API 请求才能使其高效。你必须对 Cloudinary 做一些签名，你需要一个 API 调用。

迈克：你需要拿着那个标志，你需要做上传，它从浏览器绕过你的 API，直接进入 Cloudinary。然后你需要将它保存在你的数据库中，它使用你的前端后端。有很多片段和 Next.js……在 Next.js 社区中，还没有一个开源插件。我现在可以从已经构建它的应用程序中提取它并将其放入其中，因为其他人将拥有它。

迈克：不管怎样，我只是这么说，我认为这对人们来说是非常有价值的。 Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. 是的。 It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

德鲁：太棒了。

Mike: I've got another one coming up in probably a couple of weeks. 是的。是的。 It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

德鲁：太好了。 That's available now at cutintothejamstack.com.

Mike: Yep. 而已。

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. 这好像是。

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. 感谢您今天加入我们。麦克风。你有什么临别的话吗？

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.