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

开发人员聚焦: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....

2024年10月09日 13:00

Improving platform resilience at Cloudflare through automation

We realized that we need a way to automatically heal our platform from an operations perspective, and designed and built a workflow orchestration platform to provide these self-healing capabilities across our global network. We explore how this has helped us to reduce the impact on our customers due to operational issues, and the rich variety of similar problems it has empowered us to solve....