揭秘 JAMstack：Phil Hawskworth 訪談

你們中的一些人可能聽說過 JAMstack，甚至可能聽說過如何從 WordPress 切換到 Hugo，但是 JAMstack 對於任何類型的項目來說都是一個可行的選擇嗎？

我與前端工程師 Phil Hawksworth 進行了交談，他（在代理機構工作了 9 年後重新開始從事獨立產品的工作）現在專注於為 JAMstack 技術開發策略，以使 Web 構建更簡單、更快、更多。安全的。 Phil 還將於 7 月 9 日至 10 日在倫敦共同主持 JAM_stack ldn，這是一個專門針對靜態站點生成器、無服務器和 JAMstack 的會議。

Vitaly：你好，歡迎來到我們與 Smashing Conf 的演講者和一般友善的人的對話之一。 您可能還記得 FTP 是件大事的時候，實際上您可能仍在部署為什麼 FTP 是一個完全安全的空間，所以您不必擔心這一點。 但是變化很大，您不再使用 FTP，而是轉向基於 Git 的工作流程，並且可能是持續部署。 所有這些花哨的口哨和鍾聲。 所以今天我很高興歡迎 Phil Hawksworth，他實際上在 Netlify 工作，開發者關係 [聽不清 00:10:00]。 你好菲爾。 你今天過得怎麼樣？

菲爾：我很好，你在維塔利怎麼樣？ 見到你很高興。

維塔利：噢，我做得很好。 見到你總是很高興。 你就像一個陽光，流著 Netlify 和 Jump Stack 以及一切。

菲爾：我試試。 我什至沒有被打上烙印，這是多麼錯失的機會。

維塔利：沒關係，沒關係。 但你必須告訴我，gem 或 jen 或 jeet，比如 jem？ 是傑姆嗎？

菲爾：果醬。 是果醬。 這都是關於果醬的。

維塔利：全是果醬。 所以JAMstack。 對於開發人員或設計師來說，實際上從未聽說過這個詞。 如果你想總結一下它是什麼，為什麼它很好，首先它有什麼好處。 您為什麼要從傳統的、良好的舊堆棧轉移到 JAMstack。 或許你可以簡單概括一下。

Phil：讓我看看我是否可以嘗試，因為很容易說，JAMstack，JAM 代表 Javascript、API 和模型。 但這本身並不能很好地解釋，只是知道它代表什麼。 所以真的，JAMstack 是一種部署和服務網站的方式，它不依賴於原始服務器，它們不依賴於一直訪問活動服務器的請求。

Phil：所以你可能更熟悉 LAMP 堆棧之類的堆棧，它是 Linux、Apache、MySQL 和 PHP，這是為你的網站提供服務的那種堆棧。 使用 JAMstack，它變得有點不同，因為我們已經向上移動了一個級別，遠離服務器並更靠近瀏覽器，所以它考慮了很多關於盡可能快地進入瀏覽器，然後使用瀏覽器中的技術以後增強和擴充它。 所以 JAMstack 是關於預渲染站點，將其放入瀏覽器，然後可能會增強它，增強它，在瀏覽器中運行 Javascript 的體驗，可能會向 API 發出請求等等。

Phil：這就是模型，試圖擺脫需要維護的服務器，因為我知道維護服務器很困難。 我不了解你，但我有很多網站在我拒絕它們幾年後就消失了。 我需要升級 PHP，這意味著我需要升級 Linux 的版本，我曾經在一個藍月亮中做過一次。 所以維護服務器很困難，所以 JAMstack 的想法是嘗試盡可能簡單地將站點作為靜態資產提供服務，然後充分利用瀏覽器中的所有 API 和無能來做增強和做更多事情他們在那裡。

Vitaly：是的，有道理。 好吧，事實上，我們在 2 年前左右搬到了 JAMstack。

菲爾：兩年？

Vitaly：是的，這對我們來說是一段旅程。 當然，我們在此過程中學到了一些教訓。 但我想知道，您是否會說基本上每個項目都可以通過將其某些部分移動或移動到 JAMstack 或類似的方式中受益，您認為它的局限性在哪裡？ 它是每個開發人員都可能在項目中使用的東西，還是專門用於特定網站組或一組項目的東西？

菲爾：是的，我的意思是，很容易說，哦，是的，你可以用它來做任何事情，但我認為你應該小心地談論任何技術。 您知道，您確實需要選擇用例並確保其量身定制。 當您想到 JAMstack 站點時，我會說第一直覺，也許會想到作為靜態資產提供的東西，可能直接來自 CDN。 您可能會認為，這僅適用於不經常更改的站點，它們是引用引用，靜態的，它們不會更改。 但實際上，情況並非如此，因為現在存在如此多的工具可以減少部署事物的摩擦。

Phil：你可以每天部署很多次，或者如果你願意的話，可以每小時部署很多次，實際上讓事情比以前更有活力。 因此，您認為其中一些用例不合適； 那些實際上也參與其中。 然而，它變得具有挑戰性的時候，也許是當我們創建具有許多頁面、數十萬或數百萬頁面的站點時，因為當您可以預生成站點時，JAMstack 模型真的很有意義所以您可能正在使用靜態站點生成器。 那些現在真的很流行。 那些真的很受歡迎。

Phil：當然，他們每次部署更新時都必須做一些工作，所以如果你有一個網站，比如報紙網站，它有數百萬頁，重新生成它所需的工作你知道，這可能會花費很長時間，所以當你開始遇到 JAMstack 可以簡單使用的一些限制時。 你可以開始變得有點狡猾並開始解決這個問題，如果你知道，你非常狡猾，但它肯定會帶來一些挑戰。

Phil：我開始從各種不同的靜態站點生成器（例如 Gatsby 或 React Static 以及 Hugo）中看到其中之一。 這些靜態站點生成器背後的團隊開始探索可以逐步生成頁面的方法，換句話說，您不會在每次發生變化時重新部署整個站點或重新生成整個站點，而是嘗試找到方法進行增量構建。 這是一個需要克服的具有挑戰性的問題，但目前正在開展工作，因此這也將有助於嘗試打破這一障礙。 但是，當然，目前，要找到將 JAMstack 站點用於擁有數百萬頁或數十萬頁的網站的方法，這就是現在可能有點挑戰的地方。

維塔利：哦，這很有趣。 所以實際上的想法是為你所擁有的狀態提供一個 div，基本上你必須構建的任何東西，比如一個新的門戶，都必須在其中分頁，所以看到這種情況發生很有趣。 因為你也是，就在最近，我想兩週前，Jason Pamental 發表了一篇文章，其中的想法實際上非常相似，你將實際加載字體，然後加載你需要的第一頁，然後你加載第二個，然後你實際上以一種創建新字體的方式合併它們，就像增量字體加載一樣。

菲爾：有趣。

Vitaly：探索這個真的很有趣。

菲爾：是的，這不僅僅是負載，而是一代-

維塔利：一代，建設。

菲爾：是的，沒錯。

維塔利：我明白。 但是您認為大多數開發人員面臨的共同挑戰是什麼？ 好吧，我的意思是，讓我先回去。 如果您以前從未在 JAMstack 上工作過，並且您對 LAMP 堆棧感到非常滿意和滿意，並且您想探索 JAMstack 的安全性和性能等可能性和優勢。 你將如何真正開始？ 你會移動什麼，對工作流程改變意味著什麼？

Phil：因此，對工作流程的更改實際上可能非常深刻，因為您正在取消許多您通常依賴的基礎架構，並說實際上我們可以取消它並開始將事物直接部署到 CDN。 但就某人如何開始試驗這一點而言，他們可能已經在使用其中的某些方面。 你知道，即使是在為網絡構建東西的傳統方式上也是如此。

Phil：如果你考慮如何在 LAMP 堆棧上構建一些東西，機會就在你的 PHP 中，你正在做一些事情，比如編寫一個從數據源獲取數據的模板，在這種情況下，是 MySQL 數據庫或某種類型數據庫，將這些內容呈現到視圖中，然後提供服務。 這有點類似於靜態站點生成器的工作方式。 他們有模板，他們從某個地方抓取數據，這些數據可能是文件中的結構化數據，或者可能是某種數據庫或內容 API。 無論哪種方式，它都在抓取數據，將數據與模板結合，生成視圖，唯一的區別是它不是按需執行的，而是提前執行的。 因此，對於開發人員而言，這種認知步驟中的一些邏輯步驟實際上可能並沒有那麼大。

Phil：最大的變化在於考慮如何部署事物。 因為您真正要部署的是每次您想要進行部署時構建、渲染的資產。 這開始將諸如內容管理和代碼管理之類的事情都放在同一個地方，這樣視覺之類的事情就可以控制所有這些事情。 因此，對於如何開發和管理網站以及其中的內容，它開始成為一種稍微不同的思考方式。 所以那裡有一些變化。 但好消息是，許多靜態站點生成器可以非常直接地開始試驗，而且好消息是您不需要大量的基礎設施來執行此操作。 所以好的事情是你可以真正開始在你的本地機器上構建東西。 您正在您的機器上運行一個靜態站點生成器，您可以很好地了解結果將是什麼，而無需依賴許多其他基礎設施。

Phil：所以這種第一步，即坡道，對於你來說可能很淺，“好吧，我會嘗試這套特殊的工具。 我可以在本地運行它們。” 而且您將有充分的信心，當您在某處部署該輸出時，您在本地部署它的位置將完全相同。 這是我喜歡渲染靜態事物的原因之一，因為您不需要依賴大量的基礎設施和移動部件來為它們服務。 您可以在自己機器上的靜態服務器上查看它們，然後想，“是的，這就是它在轉到 CDN 時的工作方式。”

Vitaly：嗯-嗯（肯定）；還有基礎設施，例如，當我們研究我們構建單曲的方式時 [聽不清 00:10:07]，你可以做的事情有很多選擇。 對於服務器，對於客戶端，以及介於兩者之間的一切。

菲爾：是的。

Vitaly：所以，我認為，在我們的案例中，因為我們正在構建一個框架，它直接通過 CDI 提供內容和所有內容，並通過 Javascript 進行增強。 這實際上是相當合理和相當的，我不會說容易，但轉向那種設置是有道理的。 因為最終，它只是留在頁面上的內容。 它只是帶有一些評論區和搜索框以及其他一些東西的 HTML。 但是，如果你正在轉向真正獨立的應用程序，甚至可能是金融應用程序、網上銀行等。 如果您有一些需要大量邏輯的東西，您是否仍然認為 JAMstack 會是一個不錯的選擇？ 它是否需要服務器？

菲爾：嗯，我討厭說出那句老話，“這取決於。” 但它確實有點依賴。 話雖如此，有很多應用程序作為 Javascript 應用程序的工作方式與實際上具有服務端組件一樣好。 我這麼說要謹慎，因為我在 Web 開發方面有點老派，我真的很喜歡盡可能多地將內容作為 HTML 放入瀏覽器，然後從那裡逐步增強從。 所以我個人不喜歡用 Javascript 做所有事情，只是發送一個空的 body 標籤，然後通過 Javascript 運行所有東西。

菲爾：話雖如此，有時這是完全可以接受的。 如果您正在考慮某種應用程序，它當然會嚴重依賴 Javascript，並且您了解您的受眾。 這可以是完全合理的。 最近有東西發貨了。 我實際上正在考慮一些交付給 Google IO 的東西，例如，chrome 團隊製作了一個非常大量使用 Javascript 的遊戲，並且在靜態服務時運行良好。 有很多用例可以工作。

菲爾：回到你的財務例子，我曾經工作，實際上我的第一份工作是在屏幕上顯示數字，讓交易者使用網絡技術進行交易，這是在網絡套接字之前，在 Ajax 之前，在任何東西之前這對幫助你做到這一點很有用，而且有點挑戰性，但最近，你會在 Javascript 中做很多這樣的事情，這很有意義。 您可以直接從瀏覽器開始向 API 發出安全請求。 現在有很多模型可以直接從瀏覽器進行身份驗證和授權。 因此，在許多方面，這可以為想要構建其中一些東西的金融機構簡化堆棧，因為他們可以將其中一些東西解耦的方式可以使它們更易於管理。 所以我當然認為 JAMstack 模型也可以在這種情況下完美地工作。

Vitaly：好的，所以也許現在回來探索 JAMstack 和前端的世界。 菲爾，這些天你最興奮的是什麼？ 如果您總體上看一下 JAMstack 和前端，它是否真的讓您在晚上醒來時早上醒來希望是的，我會在某天工作。 總有一天我會完成的。 你有 [串音 00:13:33]

菲爾：是的，這就是你的答案可能每天都不一樣的事情，因為感覺這個世界移動得太快了。 這本身就是讓我非常興奮的事情之一。 現在我們開始看到瀏覽器 API 開始真正進步，並且我們可以直接在瀏覽器中執行的各種操作，而無需自己實現它們。 這對我來說有點令人興奮。 說到 SVG，我仍然是個笨蛋。 我應該解釋一下duffer這個詞，如果有人不是英語並且看到這個，它意味著一個傻瓜。 這意味著我遠遠落後於曲線。

Phil：但我發現自己真的很想用 SVG 做更多的事情，而動畫是我遠遠落後的那種東西，我想用它來玩。 但是諸如瀏覽器 API 之類的東西，無論是用於離線還是用於提高性能，尤其是目前字體加載的方式似乎越來越容易訪問，因此我們可以開始真正創建視覺上非常豐富且更接近的東西我們可能想用排版做什麼。 我對那種東西有點書呆子，我喜歡那種東西，所以我想玩得越來越多。

Vitaly： Phil，在倫敦談論 JAMstack conf。 您能否也用幾句話來解釋一下，例如它將是什麼，重點是什麼，為誰服務以及您在其中的角色是什麼？ 就在幕後，照顧內容和所有。 你在那裡的角色是什麼？

菲爾：所以我享受了這份工作的樂趣。 所以我有機會出去尋找演講者並找到有趣的內容，所以我對這些項目如何組合在一起感到非常興奮。 我們有像 Chris Coia 這樣的人，他們將談論授權前端開發人員以及我們現在可以利用基於此 JAMstack 模型的前端技術做多少事情。 我們有來自 Google Chrome 團隊的 Jake Archibald 和 Surma 等人，他們將討論前端的性能以及我們可以通過靜態託管或基礎架構或直接運行的代碼真正推動性能體驗的方式瀏覽器。

Phil：我們還將讓 Yuna Kravitz 談論與 CSS 和 Houdini 以及所有這些事情有關的事情。 除此之外還有更多。 我們還將討論與 JAMstack 模型可能對您的組織和項目產生的文化變革有關的事情，因此它確實會影響到所有地方。 所以我對此有點興奮。 我也將有機會介紹所有這些人，因為他們讓我變得瘋狂並成為 MC，這意味著我可以與這些人交談並提出一些問題和類似的事情。 所以我認為對於任何對前端開發以及以真正有效的方式在網絡上交付項目的新模型感興趣的人來說，這應該是非常有趣的。

Vitaly：哦，所以你喜歡舞台上的聚光燈，對吧？

菲爾：我是一個尋求關注的人。 你現在應該知道了，維塔利。

Vitaly：哦，其實我一直覺得你是個很謙虛、很好很善良的人，顯然我是——

菲爾：這是一種表演，這是一種表演。

維塔利：好的，沒關係。 菲爾，我們過會兒再見面，哦，實際上，明天。

菲爾：我很快就會在另一個活動中見到你，否則我會在七月、七月九日和十日見到你。

Vitaly： [聽不清 00:16:52] 考慮到這一點，謝謝 Phil 並簽字。 大家再見。

菲爾：很快見。

這是一個包裝！

我們期待著在 2019 年多倫多 SmashingConf 上歡迎 Phil，並在 JAMstack 上進行現場會議。 我們也很想在那裡見到你！

如果您覺得這一系列採訪有用，請告訴我們，您希望我們採訪誰，或者您希望我們涵蓋哪些主題，我們會盡快處理！