與 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 的一部分，因為它默認生成靜態站點。

Mike：但我認為，在我看來，或者可以使用更多解釋的一件事是使用它構建軟件即服務應用程序。因為 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. It seems like.

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. Thanks for joining us today. Mike. 你有什麼臨別的話嗎？

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