Net-A-Porter

Net-a-porter 详细信息

摘要

Net-A-Porter 借助 Google 的 Polymer 库节省了开发时间

NET-A-PORTER 使用 Google 的 Polymer 库根据其在线资源实现了基于组件的设计。其结果是,通过使用结构化数据,不仅节省了开发时间,公司还在网站上提供了标准化代码,还提升了 SEO 效果。

成果

  • 节省了开发时间。
  • 在 NET-A-PORTER 的在线媒体资源上提供的标准化代码。
  • 通过使用结构化数据提升了 SEO 效果。

下载 PDF 案例研究

NET-A-PORTER 简介

NET-A-PORTER 成立于 2000 年 6 月,是在线奢侈时尚领域的全球领军者,汇集了来自全球 350 多位最受追捧的设计师的系列作品。

在公司的在线店面背后,该公司的工程团队努力提供并维护 net-a-porter.com 及其网站和应用网络,其中包括两本时尚杂志和一个社交网络。

在考虑网站媒体资源时,NET-A-PORTER 工程师将网站上的每个网页视为一个组件的集合,而不是一个网页。

例如,产品页面可能包含指示促销期间节省的金额的价格组件、包含相关产品链接的轮播组件、展示推介商品全套服装的交互式组件、用于将产品添加到心愿单的下拉菜单组件等。

基于组件的方法

2016 年初,NET-A-PORTER 工程团队决定评估该公司如何将组件应用到为网站媒体资源编写代码的方式中。由于 NET-A-PORTER 下的许多网页和子媒体资源以及管理这些网页的不同团队,工程师们深知,采用一种需要摆脱现有堆栈的新技术从头开始不合理。理想的解决方案是,让其叠加在新组件之上,并在创建其他组件时添加到页面中。这些组件需要能够独立与不同的后端服务进行通信,并且还需要向网页抓取工具呈现产品的结构化数据。

使用 Polymer 进行测试并取得成功

在评估了一系列解决方案后,NET-A-PORTER 选择测试 Google 的 Polymer 库。使用 Polymer 的初步实验完成得太快而成功,以至于 NET-A-PORTER 工程师决定继续推进,几乎立即将 Polymer 纳入组织的整体网站开发规划中。

团队工程师 Robin Glen 和 Matthew Green 分享了以下信息:

Polymer 可以轻松集成到我们的系统中,而且迅速启动并运行。我们这样一个网站很大,包含许多不同的方面 这就很容易造成不一致的情况。利用 Polymer,我们能够创建完备且复杂且可扩缩且可维护的 Web 应用。

代码标准化也很简单,因为 Polymer 基于 Web 组件浏览器标准。Glen 继续说:

使用 Web 标准进行构建可确保我们的代码靠近平台。这样,我们就能更轻松地了解如何使用和构建新组件,确保性能随着浏览器的改进不断改进,并为我们制定长期规划。由于它基于 W3C 标准,因此我们有信心在此平台上进行构建。不久之后,甚至对 polyfill 的需求也会广泛地消失。

搜索引擎优化 (SEO) 还能带来好处。Glen 表示:

组件可有效地向搜索引擎呈现有关商品的详细结构化数据。现在,测试此类结构化数据已直接纳入到我们团队的持续集成方案中。

通过在设计和构建组件方面进行前期投资,NET-A-PORTER 团队取得了显著的长期效率提升:新页面和功能构建和发布变得更加简单快捷,并且可以更轻松地将利益相关方反馈和设计调整集成到工程流程中。

Polymer 的未来

Polymer 实现 Web 开发的方式令其团队感到非常兴奋。 Glen 说:

看到如何以不同方式将组件组合在一起后,我们一开始就兴奋不已。我们开始思考是否可以通过更多方式利用企业内的组件。

Glen 觉得 Polymer 还有很多有待探索的方面。他说:

我们的 Polymer 之旅才刚刚开始。我们目前正在改进现有组件的交付和可维护性,同时努力将 Polymer 的应用范围扩展到更多 NET-A-PORTER 页面。我们正在努力通过公开发布的 NET-A-PORTER 组件样式指南记录我们的方法。Polymer 对于内部工具也非常有用我们最近构建了一组图表组件,并为整个监控服务更换了平台,以便使用 Polymer。