微前端：从片段到渲染器（第一部分）

In 2015, we wanted to improve how we delivered features to customers and move away from a monolithic shop system. Project Mosaic and its microservices approach for the frontend were vital to support this transition. Mosaic enabled a relatively large number of teams to work on the main Zalando website independently and without performance compromises. At its core, Mosaic architecture relies on page Fragments, which are owned by different teams.

2015年，我们希望改进向客户交付功能的方式，并摆脱单体化的商店系统。项目Mosaic及其前端微服务方法对于支持这一转变至关重要。Mosaic使得相对较多的团队能够独立地、无性能妥协地在主要的Zalando网站上工作。在其核心，Mosaic架构依赖于由不同团队拥有的页面片段。

Mosaic helped us deliver features quickly and experiment at scale, contributing to Zalando’s growth, but we identified limitations to the Fragments approach. The main pain points for Zalando at that time were:

Mosaic帮助我们快速交付功能并进行规模化实验，为Zalando的增长做出了贡献，但我们发现了Fragments方法的一些限制。当时Zalando的主要痛点包括：

• Differences in tech stacks, bundling, and deployment practices across fragments led to inconsistent user experience and cross-team collaboration difficulties
• 技术栈、打包和部署实践的差异导致了不一致的用户体验和跨团队协作困难
• A high entry barrier for teams contributing to the customer experience. To be able to add new features to the website, engineers had to
  • build and operate their fragments (usually frontend and backend services)
  • discover and integrate with all the data sources
  • re-implement or adapt the UI
  • re-implement or adjust tracking & A/B testing
• 对于为客户体验做出贡献的团队来说，进入门槛很高。为了能够向网站添加新功能，工程师们必须
  • 构建和操作它们的片段（通常是前端和后端服务）
  • 发现并与所有数据源集成
  • 重新实现或调整UI
  • 重新实现或调整跟踪和A/B测试

In 2018, we started designing Interface Framework (IF) to overcome these issues. The new transition’s key goal was to build a platform that unified the tech stack and centralized the deployment and operation process for various parts of the Zalando website. It would enable a fully personalized customer experience, and guarantee overall UX consistency based on a new design language.

2018年，我们开始设计接口框架（IF）来解决这些问题。新的转变的主要目标是构建一个统一技术栈、集中部署和操作过程的平台，用于Zalando网站的各个部分。它将实现完全个性化的客户体验，并基于新的设计语言保证整体用户体验的一致性。

Now, we'd like to give you an ...