订阅以接收新文章的通知:

开发人员聚焦:Chris Coyier,CodePen

2021-11-17

2 分钟阅读时间
这篇博文也有 English日本語版本。
Developer Spotlight: Chris Coyier, CodePen

Chris Coyier 在 Web 上构建已超过 15 年。2007 年,Chris 通过 CSS-Tricks 在 Web 开发世界一举成名,这是 Web 的主要出版物,适用于前端和全栈开发人员。

2012 年,Chris 协同创立了 CodePen,这是一个活跃于浏览器中的在线代码编辑器,允许开发人员合作并分享以 HTML、CSS 和 JavaScript 编写的代理示例。

CodePen 的本质是,托管代码和一个非常流行的嵌入功能,允许开发人员在世界各地共享他们的 CodePen “笔”,因此任何类型的优化都可能对 CodePen 的业务产生巨大的影响。作为这些优化的第一站,CodePen 越来越依赖于在 Cloudflare 网络中执行代码和存储资料的功能。正如 Chris 所说,CodePen 使用 Cloudflare Workers 来完成“那么多事情”:

“我们从外部 CMS 抽取内容,使用 Workers 处理 HTML,再将它送达用户的浏览器。例如,我们提取原始页面,提取内容,然后将其整合在一起以获取完整响应。”

Workers 让您能够使用原生 Request/Response 类直接处理响应,加上我们的流式处理 HTMLRewriter 引擎,您可以修改、组合和解析 HTML,而不会损失任何性能。由于 Workers 功能部署到 Cloudflare 的网络,CodePen 能够在其原始服务器和客户端之间即时部署高智能中间件,无需启动任何额外基础结构。

在 Chris Coyier 的 YouTube 频道的一个热门 YouTube 视频中,他和 CodePen 的一个前端工程师一起,介绍了他们如何使用 Cloudflare Workers 来构建关键的 CodePen 功能。下面转述 Chris 原话:

“Cloudflare Workers 就像始终在边缘运行的无服务器功能,因此它们速度极快。除此之外,它们周围的工具也非常棒。它们可以在您的自有网站上以特定路由运行,解决任何难以应付的 CORS 麻烦,并帮助您制作干净的 API。它们还拥有一些特殊的超能力,如访问 KV 存储(也是在边缘)、图像处理和优化以及 HTML 重写。”

CodePen 还利用 Workers KV 来存储数据。这让他们能够缓存结果,并将其放置在 Cloudflare 网络中地理上靠近用户的位置以供访问,从而避免大量重复处理工作:

“我们结合使用 Workers 和 KV Store 来运行昂贵的作业。例如,我们查看 KV Store,来了解我们是需要进行一些处理工作,还是这些工作已经完成。如果需要进行工作,那么我们就将工作完成,然后更新 KV,告知工作已经完成以及工作结果在何处。”

在 Chris 的 YouTube 频道的后续视频中,他深入剖析了 Workers KV,并展示您可以如何构建带存储的简单无服务器功能,并将其部署到 Cloudflare。加上 Workers KV,您可以同时拥有复杂的数据结构和 Workers 功能,而不会影响性能或可扩展性。

Chris 和 CodePen 团队投资了 Workers,更重要的是,他们_享受_使用 Cloudflare 的开发人员工具进行开发的过程。“它们周围的 DX 棒极了。这些工具来自其他云功能服务,工具的数量似乎是刚刚好的,正好足够让我们做要做的事情。”

当您将 Cloudflare Workers 开发人员环境集成到您的堆栈中会产生什么结果?CodePen 就是一个很好的示例。在企业的各个部分中,利用 Worker 以及 Workers KV 和 HTMLRewriter 等工具,CodePen 能够构建面向未来的高性能应用程序。

如果您想要了解有关 Cloudflare Workers 的更多信息以及将您自己的无服务器功能部署到 Cloudflare 的网络,请访问 workers.cloudflare.com

我们保护整个企业网络,帮助客户高效构建互联网规模的应用程序,加速任何网站或互联网应用程序抵御 DDoS 攻击,防止黑客入侵,并能协助您实现 Zero Trust 的过程

从任何设备访问 1.1.1.1,以开始使用我们的免费应用程序,帮助您更快、更安全地访问互联网。要进一步了解我们帮助构建更美好互联网的使命,请从这里开始。如果您正在寻找新的职业方向,请查看我们的空缺职位
Full Stack Week开发人员Developer Spotlight

在 X 上关注

Kristian Freeman|@kristianf_
Cloudflare|@cloudflare

相关帖子

2024年10月24日 13:00

Durable Objects aren't just durable, they're fast: a 10x speedup for Cloudflare Queues

Learn how we built Cloudflare Queues using our own Developer Platform and how it evolved to a geographically-distributed, horizontally-scalable architecture built on Durable Objects. Our new architecture supports over 10x more throughput and over 3x lower latency compared to the previous version....