與 Marcy Sutton 一起粉碎播客第 20 集:什麼是蓋茨比?

已發表: 2022-03-10
快速總結↬我們正在談論蓋茨比。 它是什麼以及它如何適合您的 Web 開發堆棧? 德魯麥克萊倫與專家馬西薩頓交談以找出答案。

今天,我們談論的是蓋茨比。 它是什麼以及它如何適合您的 Web 開發堆棧? 德魯麥克萊倫與專家馬西薩頓交談以找出答案。

顯示註釋

  • 蓋茨比
  • 馬西在推特上
  • 馬西的個人網站

每週更新

  • “在 Google 的幫助下讓您的網站快速、可訪問且安全”
    迪翁·阿爾馬爾
  • “了解 Gatsby 中的插件開發”
    由 Aleem Isiaka
  • “使用 Tauri 和 Vue.js 創建微型桌面應用程序”
    開爾文·奧默雷肖內
  • “消除電子商務運輸和庫存警報的恐慌”
    蘇珊娜·斯卡卡
  • “Vuejs 和 Nuxtjs 中的 CSS 轉換”
    蒂米·奧莫耶尼

成績單

馬西·薩頓的照片 Drew McLellan:她是 Gatsby 開發者關係團隊的首席工程師。 此前,她從事開源 axe-core 可訪問性測試庫的工作,還曾在 Adob​​e 擔任可訪問性工程師。 她熱衷於為殘障人士改進網絡,並經常在會議上談論它。 2016 年,O'Reilly 因其在可訪問性方面的工作而授予她的網絡平台獎。

德魯:她還共同領導了當地的無障礙西雅圖和西北科技女性聚會。 因此,我們知道她是一位熟練的工程師和無障礙專家。 但你知道她想把天使瀑布裝在桶裡嗎? 我的好朋友請歡迎 Marcy Sutton。

馬西·薩頓:你好。

德魯:你好。 馬西。 你好嗎?

龍美詩:我要崩潰了。 你好嗎?

德魯:我很好。 謝謝你。 我今天想和你談談蓋茨比。 因為它出現在我上一集關於與 Mina Markham 學習 React 的對話中。 我意識到我有危險在互聯網上做一個典型的人,對我沒有直接經驗的事情發表意見。 所以這不是我們在 Smashing 做事的方式。

德魯:我想確保我們正確地報導了蓋茨比。 有什麼比和一個從內到外都知道的人交談更好的方法呢。 所以,假設我可能聽說過蓋茨比這個名字。 但是我不知道在構建網站時它適合堆棧的位置。 蓋茨比到底是什麼。

龍美詩: Gatsby 是一個網站生成器,它目前使用 React。 但它會為你創建一個靜態網站,然後再合成一個完整的 React Web 應用程序。 因此,您確實可以通過快速構建獲得兩全其美的效果,您正在編譯的 HTML 文件將為用戶快速加載。 然後,您可以使用 JavaScript 獲得所有這些增強功能,從而製作真正交互式的動態 Web 應用程序。

龍美詩:所以,進入這個領域真的很令人興奮。我一直在學習文檔方面的工作,現在在 Devrel 團隊工作,我專注於讓它盡可能好,了解 JavaScript 的可訪問性挑戰並試圖從內到外修復它。

Drew:我想我們中的許多人都會熟悉靜態站點生成器的概念。 蓋茨比似乎很適合這個角色。 但對我來說,它似乎比大多數 SSG 做得更進一步。 大多數站點生成器都與前端代碼無關。 似乎在使用 Gatsby 時,您最終會將 Gatsby 代碼作為您網站的一部分運行。 這是一個公平的評價嗎? 如果是這樣,Gatsby 在你的前端實際上​​做了什麼樣的事情?

龍美詩:是的,我想說其中最大的部分是客戶端路由。 所以,蓋茨比現在正在使用引擎蓋下的到達路由器。 它有自己的實現方式。 但這就是當您第一次加載靜態站點時,那裡有 HTML 文件。 因此,如果用戶出於某種原因關閉了 JavaScript,您的網站應該仍然存在,仍然有內容。

龍美詩:但是如果啟用了 JavaScript,那麼當你在 Gatsby 網站中使用鏈接時,就會發生這種水合步驟,它會從該頁面預取資源,因此加載速度會更快。 所以,這一切都是通過 Gatsby 提供的 JavaScript 層實現的。 因此,除此之外,它實際上取決於您在網站中使用的內容最終會出現在那個 JavaScript 包中。

龍美詩:但對於那些需要大量交互性的東西,比如可訪問的界面,那是個不錯的地方。 對我來說,我真的很喜歡隨時使用 JavaScript,並且讓我的標記處於一個好位置。 我知道這是一個偏好問題,無論您是否希望您的 HTML、JavaScript 和 CSS 都整齊地耦合,並且在構建 Gatsby 中存在變化的空間

龍美詩:你不必總是使用 CSS 和 JS 之類的東西。 但這實際上是關於獲得動態 JavaScript 層的強大功能,在您編寫網站時可供您使用。 它不像這個添加在單獨的文件中。

Drew:當我想到靜態站點生成器通常如何工作時,我想到的可能是 Markdown 文件中的內容。 生成器會運行該內容並將其與模板合併,並創建數十個、數百個、數千個 HTML 文件,這些文件是您網站的頁面。 當我想到一個 React 站點或應用程序時,我更多地考慮的是單頁體驗,其中界面由 React 動態創建。 所以,你是說蓋茨比兩者都做? 它正在創建所有頁面並使用 JavaScript 對其進行增強?

龍美詩:是的,是的。 Gatsby 將在構建時使用 Node.js,它會檢查你的 React 組件並將它們編譯成 HTML 文件。 老實說,當我第一次看 Gatsby 時,我並沒有關閉 JavaScript,而是說,“好吧,這裡還有其他頁面嗎,這是什麼?” 我很高興 Gatsby 默認就是這樣工作的。 它將從你的 react 組件創建構建文件,這很棒。

龍美詩:我已經探索了更多的漸進式增強方法,因為它是在 JavaScript 中的。 就像你想為用戶輸出一些逐漸增強的東西,如果他們確實關閉了 JavaScript,你不希望所有這些假設 JavaScript 存在的損壞代碼。 所以它有一些怪癖。 但是您至少可以針對您希望某人仍然能夠購買東西的核心用戶流解決這種問題,您可能需要添加一些支持並針對這些用例。

龍美詩:但我對蓋茨比默認推出的方式感到驚喜。 因此,他們以這種方式構建網站是他們做出的選擇,我們一直在評估它。 它仍然是最好的方法嗎? 我們需要做些什麼來為我們的用戶提供他們所要求的東西? 因此,我們在內部進行了一些探索,繼續進行只是為了確保 Gatsby 在構建網站方面做得最好。

龍美詩:所以保持包的大小很小,並確保為了權衡我們所說的具有預取功能的高性能代碼。 比如,我們有數據支持嗎? 作為開發人員倡導者,我對這種事情非常感興趣,確保我們在網站上打包和捆綁的東西確實是需要的,並且真的會成為它可以製作的最好的 Gatsby 網站。

德魯:你在那裡提到了性能,並且非常關注性能。 從蓋茨比呈現自己的方式看來,這當然是肯定的。 這是 Gatsby 的真正特徵還是只是 JAMstack 網站的本質?

龍美詩我認為這可能是 JAMstack 網站的特性。 最終,這將取決於您在網站上捆綁的內容。 因此,無論您使用什麼框架或工具,我們仍然必須考慮為最終用戶在這些捆綁包中添加的內容。 但蓋茨比真的旨在為您提供良好的默認值。 不僅是為了性能,也是為了可訪問性。

龍美詩:但這總是需要評估,我們總是必須確保如果我們添加了一些東西,它仍然是高性能的。 但是,是的,獲取靜態文件的初始有效負載,它們加載速度很快。 比我以前擁有的經典 WordPress 網站快得多。 但隨後使用 JavaScript 對其進行了增強。 肯定有一些權衡。

龍美詩:但它真的很有效,很多人,他們真的很喜歡他們的 Gatsby 網站。 因此,全職工作並了解像 Gatsby 這樣的 JavaScript 框架的來龍去脈是很有趣的。

德魯: Gatsby 實際採用了哪些性能特性來加速您的網站?

龍美詩:嗯,對於鏈接的預取,這個客戶說路由的東西,我會說這可能是最大的一個。 使生成漸進式 Web 應用程序變得非常容易。 因此,擁有一些離線功能,您可以根據離線和 PWA 類型的內容來挑選您想要的內容。 但他們確實使這部分成為最初體驗的一部分,就像您可能開始的許多入門示例網站都有使用清單的示例,以及製作您網站的現代版本。

龍美詩:真的,這就像不發送你不需要的代碼一樣。 這是其中很大一部分。 緩存,這實際上是鏈接的預取。 這就是我要說的最大的一部分。

德魯:所以這就是網站實際預測用戶要去哪裡的地方。 它是否像那樣智能,還是預先獲取頁面上的所有內容?

龍美詩:不,它基於用戶交互。 因此,如果用戶向下滾動查看端口,則會發生預取。 如果您將鼠標懸停在鏈接上,它會估計您很有可能會轉到該頁面。 我們一直在內部討論,好吧,我猜,關於預取是否也應該發生在鍵盤焦點上的開源,所以可訪問性和性能的交叉點非常有趣。

龍美詩:這裡有一些取捨,比如鍵盤用戶不能使用鼠標並在每個鏈接中按標籤進行導航,是否真的要為每個鏈接獲取內容,因為鼠標用戶可能更有選擇性關於他們將鼠標光標放在哪裡。 所以,我覺得這些對話非常有趣。

龍美詩:並嘗試考慮我們還需要哪些數據來驗證這些假設。 所以,是的,查看這些默認值以及我們可以進行哪些改進並真正檢查獲取的數據量是非常有趣的? 這真的是一件好事嗎? 只是為了加快速度? 或者沒有它是否足夠快? 是否有替代解決方案可以作為框架工作樂趣的一部分,因為能夠評估所有這些權衡。

Drew:這是預先獲取用戶在他們的網站上免費獲得的東西。 那麼他們是否必須做任何工作來實施它?

龍美詩:你確實可以通過 Gatsby 鏈接免費獲得它。 所以它是 Gatsby 附帶的一個組件,當你使用它時,它會輸出錨標籤。 因此,您的 HTML 是真正的 HTML,並且您已經以這種方式利用了 Web 平台。 但是在您的 React 組件中,您直接使用 Gatsby 鏈接組件。 這具有所有這些機制......它會查看您未來的 HREF 將是什麼,對於您想要訪問的那個鏈接,它會從那個鏈接獲取資源並預加載它們。

龍美詩:而且它只在您的網站內部。 因此,它不會嘗試在其他網站上獲取內容。 但它似乎工作得很好。 我知道有些用戶正在積極尋找方法,就像您實際上必須選擇退出其中一些事情一樣。 至少路由,不使用預取。 您只需使用常規錨標籤。 然後你並沒有真正得到那個功能。 使用其他東西非常容易。 但是我們正在進行的一些討論是圍繞客戶端路由,以及如何使它成為最好的。 所以,這也是一個非常有趣的空間。

Drew:如果我想擁有自己的鏈接組件,你必須在 Gatsby 生態系統中的工作有多密切? 那完全沒問題,我不會為了做那種事情而與蓋茨比抗爭?

龍美詩:不,你可以插入任何你想要的組件,只要它們與 React 運行時一起工作。 這就是它的美妙之處。 任何可以放入 React 應用程序的東西,都可以放入 Gatsby 應用程序。 甚至還有一個 pre-React 插件。 因此,與 Gatsby 合作有一些替代方案。 但我喜歡你可以使用任何你想要使用或編寫自己的現成組件的方式。

龍美詩:我認為人們真正喜歡的是靈活性。 需要注意的是它使用了 React 運行時。 因此,您必須對使用 react 或使用這個 pre-React 插件感到滿意。 但就我個人而言,我真的很喜歡 react 和 JSX 處理可訪問性和模板,尤其是使用 React 鉤子。 所以,能夠在我的 Gatsby 網站上使用小屋真是太酷了。 我很喜歡。

Drew:構建 Gatsby 站點的過程是怎樣的?大概是一個節點模塊,您可以直接安裝它,並且您會像使用任何其他靜態站點生成器一樣進行構建?

龍美詩:是的。 您可以全局安裝一個 CLI。 我想這是您是否要在全球範圍內安裝它。 這就是我們的建議,因為這樣您就可以從計算機上的任何目錄運行它,但它會拉取您構建 Gatsby 站點所需的任何內容。 然後你可以添加,比如你想使用 WordPress 作為無頭 CMS 或其他一些內容源。

龍美詩:您可以安裝軟件包、插件來使其工作,然後將其與您的站點集成。 還有一些啟動器和主題可用於更快地啟動和運行。 如果我想測試某些東西或快速啟動一個站點以進行特定的集成,例如 Drupal 或 prismic 或任何 CMS 或電子商務解決方案或我想使用的東西,我會使用這些。

龍美詩:有很多例子。 因此,您並不總是通過反複試驗來嘗試找出答案,但您可以將這些構建塊拼湊起來並創建……這就是我們所說的內容網格。 因此,您可以使用這些同類最佳的集成來創建網站,而不是,如果我有一個經典的 WordPress 網站,那麼創作體驗和與團隊合作真的很棒。

龍美詩:但是前端有一些缺點,比如它在移動設備上的工作方式。 還有什麼? 如果我想要一個電子商務解決方案? 我認為現在有些事情更容易做,但是能夠選擇任何你想要的最佳身份驗證解決方案,或者任何現代的東西,你就像,“我希望我可以使用它。 ” 使用 Gatsby,您可以將很多這些東西整合在一起,讓這種內容網格化的構建方式非常令人耳目一新。

龍美詩:尤其是當您仍然可以使用像 WordPress 這樣的集成並且仍然與團隊合作時。 因此,我們對這種新的工作方式感到非常興奮,您可以在其中選擇您喜歡的所有技術,或者為您的團隊工作的技術。

Drew: Gatsby 大力吹捧的一大特點是能夠從各種不同來源提取數據或內容。 你提到了 WordPress 和 Drupal 之類的東西,以及你有什麼。 傳統上,如果我使用像 Jekyll 或 Eleventy 之類的東西,或者類似的東西,我需要自己連接它以與 API 交互,也許將內容拉下來並將其寫入 Markdown 文件或 JSON 文件,然後讓生成器工作與那些文件。

德魯:所以這將是一個兩步過程,可以使用類似源位的東西,我們在上一集中提到過這樣的事情? 我是否正確理解 Gatsby 具有以其他靜態站點生成器不具備的方式使用不同來源的本機能力?

龍美詩:我認為讓 Gatsby 在這一領域真正強大的是它的 GraphQL 數據層和插件生態系統。 因此,很可能有人已經為您要構建的任何數據源編寫了一個插件。 如果沒有,可能有一些接近的東西。 但是使用 GraphQL,是它的底層工作。 使所有這些集成成為可能的層是使用 GraphQL。

龍美詩:所以,你可以加入很多可能性,我們也努力讓編寫插件變得容易。 因此,學習如何編寫插件以及它創建的 AST 或抽象語法樹以及了解所有這些如何工作真的很酷。 但是,是的,我想說,有很多現成的東西你可以拿起,而不必自己寫,這非常棒。

龍美詩:很高興能夠靈活地引入降價。 假設您的開發人員想要編寫他們的博客內容降價,但營銷團隊對此並不滿意,您可以組合內容來源,並從多個地方獲取它們。 我見過人們從其他 GitHub 存儲庫中採購東西,他們使用 get 插件以這種方式提取降價內容。 很大的靈活性。

Drew:我猜你可以選擇編寫自己的插件來從自定義數據源中提取數據。 假設您有一些遺留系統,並且您想在它的前面放置一個漂亮、閃亮的新網站。 您可以編寫一個插件,以所需的任何格式獲取數據並將其轉換為比使用更大的東西嗎?

龍美詩:你可以。 因此,插件可以實現這一點。 然後是在此之上的抽象,我們稱之為蓋茨比主題。 這些不僅是用戶界面代碼,還可以是 GraphQL 查詢、設置插件的配置,所以它就像一個插件,使用方式捆綁在一起。 你可以在 NPM 上分發這些主題。

龍美詩:然後,他們的版本,你可以把它們拉進來。對於那些說你有多個 repo 並且你想把數據拉到其中的團隊來說,整個 API 也很有趣,如果有相同的查詢,那將是非常重複的在同一代碼中的所有這些存儲庫中。 所以,把事情弄乾一點,不要重複太多。 您可以使用這些稱為主題的抽象來圍繞啟用該源插件的邏輯或代碼進行分發。 因此,您可以在這些抽象層之上構建這些抽象層,我們聽說團隊現在真的從中得到了很多。

德魯:所以蓋茨比世界中的主題不是像 WordPress 這樣的 CMS 的外觀和感覺。

龍美詩:是的,我的意思是,它可以,但還不止如此。 因此,命名事物是非常困難的。 但是我真的很喜歡學習關於靈活性和能夠的主題,是的,你可以包含一些用戶界面代碼。 但是那裡也可能有一些查詢語言代碼。 但事實上它是捆綁在一起的,因此很容易分發。 是的,這是一個非常簡潔的抽象,看到人們正在構建什麼以及他們正在發布什麼主題以及所有這些都很棒。

德魯:是的,我可以想像它會導致蓋茨比的一些相當創新的用途。 你有沒有看到什麼,特別是讓你注意到客戶正在做這件事特別有創意?

龍美詩:是的。 好吧,就主題而言,我的意思是,我讀到的第一個關於蓋茨比博客的案例研究,我想來自阿波羅。 他們使用 Gatsby 主題編寫了一個文檔站點,並使用了獲取源插件。 因此,它確實可以將您的採購和內容解耦,從而使團隊可以引入一個主題以在多個存儲庫中使用。

龍美詩:我想說這對我來說是最有趣的,因為我可以想像它能夠實現什麼,就像我過去的團隊一樣,我們必須獲取內容,我們非常有限,代碼可以在哪裡存在以及可重複性如何它可能是。 所以,現在看到一個解決方案,團隊就像,“哦,這很好用。” 那甚至是去年夏天,或者就像前一段時間的案例研究一樣。

龍美詩:所以從那時起,API 一直在改進,並且有一整個團隊致力於 Gatsby 主題。 而且我知道他們將在接下來的幾週內推出一些重大改進。 所以,我不想搶走他們的風頭,但主題中有一些巧妙的東西。 他們一直在徹底修改一些博客主題,例如我們從 Gatsby 提供的核心主題。

龍美詩:我知道他們在內部使用它來構建我們自己的一些產品公告,或者將在接下來的幾週內在這裡宣布的產品改進。 所以,很多很酷的東西都與蓋茨比主題有關,人們出售自己的主題和開胃菜。 我覺得這也很有趣。

德魯:蓋茨比周圍出現了一些市場。

龍美詩:有,是的。

Drew:如果有人想要的話,是否有任何形式的在線培訓和類似的東西……如果有人決定他們真的要進入 Gatsby 並且他們需要快速學習它? 有沒有可用的信息讓他們可以去跑步的地方?

龍美詩:很多嗎? 是的。 肯定有 Gatsby Doc 的網站,即 gatsbyjs.org/doc's。 我們有教程,我幾乎每週都在為 Gatsby 的東西做直播。 有很多教育工作者在 YouTube 和各種學習平台上擁有 Gatsby 材料。 蛋頭,我想我在蓋茨比的一些隊友也有蛋頭視頻。

龍美詩:所以,那裡有很多東西。 如果你找到什麼,我會說檢查它的日期。 我們一直在積極更新 Gatsby Doc、一些較舊的第三方視頻和可能會檢查這些日期的內容,因為我們無法監控每個學習資源的更新。 很難跟上我們自己的員工。

龍美詩:因為有多少內容採購選項和用例。 這是一個非常廣闊的空間。 但是那裡有很多學習材料,還有很多入門方法,你可以嘗試找到一些東西,比如取決於你在學習範圍內的位置。 您是否處於起步階段,您是否來自其他技術,您只需要了解 React 是什麼。

龍美詩:你可以根據你所處的位置挑選適合你的材料。 我最近一直在通過名為 Gatsby Web Creators 的直播課程進行課程,我們從初學者 HTML、CSS 和 JavaScript 一直到創建我們的第一個 Gatsby 網站。 我們週五剛剛完成。 所以,從頭到尾真的很好。

龍美詩:而且因為 Gatsby 的很多材料,它使用了 React。 因此,開始使用它是一個很大的飛躍。 所以,我真的很想回去並採取步驟,一路用 React 和 Gatsby 構建東西。 所以那真的很整潔。 我很高興能繼續走這條路,這樣會有更多的初學者材料和更多的東西來幫助人們了解如何使用 Gatsby 構建網站,因為其中很多技能可以移植到其他框架。

Drew:對於任何正在考慮使用 Gatsby 構建某種客戶項目網站的人來說,其中一個大問題將會出現,其中一個大問題是關於管理內容並將東西放在客戶面前。 您已經提到了 Gatsby 如何連接到不同的內容管理系統。 這是您處理該問題的主要方法嗎? 或者蓋茨比在其生態系統中是否有任何東西可以讓人們以任何方式編輯內容?

龍美詩:是的,我會說擁有 CMS 或其他東西可以使這些團隊關係更好地工作。 我遇到過開發團隊喜歡“學習 HTML”的用例。 你從客戶那裡看到了這種釉料,“不,我不敢相信你剛才這麼說。” 因此,擁有一個人們可以以最適合他們的方式完成最佳工作的系統是非常非常重要的。

龍美詩:就像你無法處理營銷商 GitHub,並且可能在某些時候工作,但不是一直工作。 因此,擁有類似的預覽和構建基礎設施會使情況變得更好,這就是 Gatsby 雲產品空間進入競爭的地方。 有一些方法可以進行預覽。 如果沒有付費的雲端,Gatsby 雲確實為個人項目提供免費層,因此並非全部付費。

龍美詩:但是我們有這個,就像開源和產品生態系統一樣,這樣 Gatsby 可以作為一個創始組織,賺到足夠的錢來保持開源框架,保持它的健康,並讓我們的社區隨之滾動. 所以,這就是開源商業方面的結合,真正實現了團隊需要的一些工作流程。

龍美詩:一些事情,比如快速預覽、快速構建和部署。 因此,有專門針對 Gatsby 雲端的解決方案,然後只要有一種開源方式可以讓 Gatsby 像使用預覽服務器或其他東西一樣工作,我們就會嘗試記錄它並確保我們的社區知道什麼是什麼以及如何去做滿足這些團隊的需求。

龍美詩:是的,我想說的是,您需要某種方式來預覽您的 CMS 更改,因為這就像即時滿足。 您不想等待一個小時才能看到一些內容。

德魯:所以這很有趣。 Gatsby 雲服務為您提供了使用無頭 CMS 服務的能力,您只是在其中處理內容,但您無法直觀地看到它在您的網站中的外觀,使您能夠預覽該內容的效果會工作。 那正確嗎?

龍美詩:是的,是的。 因此,它是解耦的一部分,你的無頭 CMS,可能有,像 WordPress,你可以只查找前端,但我們給它一個新的前端,並可能引入其他來源以及 WordPress 不知道的其他事情。 因此,以這種方式將其解耦是有道理的。 但是,作為團隊成員,您仍然必須能夠以您很快習慣的速度完成工作。

龍美詩:所以,這就是 Gatsby 預覽的地方,Gatsby 構建的目的是將前端交還給團隊,以便他們可以協作、做出決策、交付一些東西。 因此,這在去年如雨後春筍般湧現,一直在獲得更多功能和改進,我們從一些團隊那裡聽說,他們真的開始看到速度提高了。

龍美詩:正如我們發現的那樣,“好吧,如果這個構建進展緩慢,那是為什麼呢?” 這通常是因為該網站非常非常大。 因此,我們一直非常關注大型網站的改進,並真正改進這些團隊協作工作流程。 這是團隊現在的一個重點。

Drew:所以 Gatsby 雲是,我猜它的核心是託管服務。 它是用於部署 Gatsby 站點的 CDN,其中包含大量 Gatsby 特定功能和特性嗎?

龍美詩:我認為它更像是一種持續交付產品,因為它不是真正的 CDN。 它與 Fastly、Netlify 等 CDN 集成。 您可以連接許多不同的提供商,其中一些是免費的。 您可以免費做很多事情,這非常棒。 前幾天我剛剛在我們上次的 Gatsby 網絡創建者會議上做了這件事,我們使用 Gatsby 雲和 Netlify 來構建我們的網站。

龍美詩:特別是它可以讓你讓 Gatsby 網站更快,因為它確實有這些改進。 它只需要建立一種類型的網站。 因此,Gatsby 雲可以做出一些其他平台無法做出的改進,因為他們正在努力支持所有這些不同類型的網站,而且他們都做得很好。

龍美詩:但對於蓋茨比來說,如果這就是你正在建設的全部內容,並且有不少機構都在關注蓋茨比,他們希望盡快完成。 所以,這就是 Gatsby 雲可以專門為 Gatsby 做一些性能改進的地方,因為它不必擔心任何其他平台。

Drew:所以,Gatsby 雲會做你的構建,然後它會將它部署到 Netlify 之類的東西,或者可能是一系列不同的地方。

龍美詩:是的。 是的,它會的。 因此,它是 Netlify 的一部分,它將在上傳這些構建的包時使用。 建檔。 它沒有使用他們的構建,所以構建是在 Gatsby 雲基礎設施上進行的,這就是可以發生很多速度提升的地方。 然後仍然有上傳步驟將其發佈到 CDN,無論您選擇哪個。

龍美詩:但是,是的,團隊似乎真的很喜歡這種觀察能力。 我的意思是,這是您可能會錯過的功能。 所以,這是一個必要的補充,是能夠進行這些協作預覽並獲得簽字和所有這些。

Drew:所以,Gatsby 雲是由 Gatsby 公司作為服務提供的,還有 Gatsby 開源項目。 這是否與 WordPress 和自動擁有類似的關係,您有一個商業實體開發開源產品?

龍美詩:我會說是的,比如 Drupal。 這些創始組織在科技領域有先例,這是一種良性循環。 我們現在正在努力發布一些治理文檔,以確保我們的社區非常清楚我們如何做出決策。 但整個目標是保持 Gatsby 的可持續性,這樣它就可以繼續成為一個開源項目,人們甚至可以使用它,甚至可以進入 Gatsby 雲。

龍美詩:如果你願意,你可以使用其他解決方案。 因此,我們需要足夠的業務來維持,就像從事這項工作的人一樣。 所以,我介於兩者之間,就像我在開源和商業方面之間徘徊,並試圖確保我們優先考慮事情。 我的意思是,正如你可以想像的那樣,我們正在處理很多事情與空間的廣泛性,我們都有我們喜歡的利基用例,感覺非常強烈,我們需要為我們的工作做。

龍美詩:加起來就是很多小眾用例。 所以,我們試圖兼顧和優先考慮,並真正傾聽我們的社區關於現在什麼傷害、什麼痛苦、什麼進展順利。 因此,這對我個人來說是一段有趣的旅程,讓我重新回到 devREL 並真正聽取社區的意見,我們如何才能讓我們變得更好?

德魯:蓋茨比周圍有一個很大的社區,有很多人在使用它嗎?

龍美詩:有很多人在使用它,很多貢獻者。 所以對於很多人來說,這可能是他們第一次為開源做出貢獻,比如來到我們的碼頭並加入我們參加 Hacktoberfest 之類的事情。 因此,很高興看到 Gatsby 的大型社區擁有什麼,尤其是在可訪問性和試圖確保框架免費提供開箱即用的所有功能方面。

龍美詩:所以,有這個,我不知道,可訪問性和蓋茨比的子集或交集,那是我快樂的地方。 但是更廣泛的社區,很多人通過 Gatsby 學習 React 或學習 Web 開發。 因此,看到我們的社區取得進展真是太好了,希望我們能讓人們做出貢獻,即使這是一個問題或類似的東西,“嘿,這個鏈接壞了,或者碼頭的這一部分讓我感到困惑或者它已經過時了。”

龍美詩:就像只是告訴您使用的框架或項目一樣,有些東西可以更好是一種很好的貢獻方式,因為您可以幫助我們深入了解可以改進的東西。 所以這是一個很好的貢獻方式。

Drew:您提到了可訪問性,當然,人們會知道您是可訪問性專家。 And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.