Mobius:采用JSX的同时优先考虑用户体验

Keeping up with the latest developments in frontend architecture can be challenging, especially with a codebase the size and age of Etsy’s. It’s difficult to balance the benefits of adopting newer tools with the cost of migrating to them. When a total rewrite isn’t possible, how can you ensure that old patterns can coexist with new ones, without totally sacrificing user and developer experience, or loading so much additional code that it harms frontend performance?

跟上前端架构的最新发展可能是一个挑战，尤其是像Etsy这样规模和年龄的代码库。要平衡采用较新工具的好处和迁移到它们的成本是很困难的。当完全重写是不可能的，你如何确保旧的模式可以与新的模式共存，而不完全牺牲用户和开发人员的体验，或加载如此多的额外代码以损害前端性能？

This frontend architecture dilemma is one we’ve really wrestled with on Etsy’s Frontend Systems team. Our team is responsible for setting frontend best practices for our product engineers and building infrastructure to support them, and our primary focus for the past few years has been developing a new approach to building Javascript-driven user interfaces on Etsy.

这个前端架构的困境是我们在Etsy的前端系统团队中真正纠结的问题。我们的团队负责为我们的产品工程师制定前端的最佳实践，并建立基础设施来支持他们，在过去的几年里，我们的主要重点是开发一种新的方法来构建Etsy上的Javascript驱动的用户界面。

We’ve developed a frontend architecture that we think is an effective, pragmatic compromise. We render static HTML using PHP by default, while giving developers the ability to opt into using “component islands”: self-contained, server-side rendered JSX components used only where complex interactivity is needed.

我们已经开发了一个前端架构，我们认为这是一个有效的、务实的折中方案。我们默认使用PHP渲染静态HTML，同时给予开发者选择使用 "组件岛 "的能力：独立的、服务器端渲染的JSX组件只在需要复杂的互动性时使用。

We named this new architecture Mobius, and the rest of this post will be an overview of what we built (and why!), and how it works.

我们将这个新的架构命名为Mobius，这篇文章的其余部分将概述我们所建立的（以及为什么！），以及它如何工作。

Javascript at Etsy, pre-Mobius

在Etsy的Javascript，在Mobius之前

This work began in 2018, when we saw increasing evidence that the frontend development patterns recommended for buyer-facing website features were no longer meeting product engineers’ needs. This concern was specific to buyer features because, historically, Etsy has used very different fron...