揭秘 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 上进行现场会议。 我们也很想在那里见到你！

如果您觉得这一系列采访有用，请告诉我们，您希望我们采访谁，或者您希望我们涵盖哪些主题，我们会尽快处理！