概要
Net-A-Porter: Google の Polymer Library を使用して開発時間を短縮
NET-A-PORTER は、Google の Polymer ライブラリを使用して、オンライン プロパティにコンポーネント ベースの設計を実装しています。その結果、開発時間が大幅に短縮され、サイト全体でコードが標準化され、構造化データの使用により SEO のパフォーマンスが向上しました。
結果
- 開発時間を短縮。
- NET-A-PORTER のオンライン プロパティでコードを標準化
- 構造化データの使用による SEO パフォーマンスの向上。
NET-A-PORTER について
2000 年 6 月に創業した NET-A-PORTER は、オンライン ラグジュアリー ファッションのグローバル リーダーであり、世界で最も人気の高い 350 を超えるデザイナーによるコレクションを提供しています。
同社のオンライン ショップでは、net-a-porter.com とそのウェブサイトやアプリのネットワークを運営し、維持するために、エンジニアリング チームが力を入れています。このネットワークには 2 つのファッション雑誌と 1 つのソーシャル ネットワークがあります。
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 を使用すると、スケーラブルでメンテナンス可能な、完全で複雑なウェブ アプリケーションを作成できます。
Polymer はウェブ コンポーネントのブラウザの標準に基づいているため、コードの標準化も簡単でした。さらに、次のようにも述べています。
ウェブ標準を使用してビルドすることで、コードをプラットフォームの近くに配置できます。これにより、新しいコンポーネントの使用方法と作成方法を把握しやすくなり、ブラウザの改良とともにパフォーマンスを継続的に向上させ、長期的な計画を立てることができます。W3C 標準に基づいているため、このプラットフォームで安心して開発できます。やがてポリフィルの必要性も大幅になくなります。
SEO にもメリットがありました。Glen さんは次のように述べています。
コンポーネントは、商品に関する詳細な構造化データを効果的に検索エンジンに提供します。この構造化データのテストは、現在 Google チームの継続的インテグレーション スキームに直接組み込まれており、
コンポーネントの設計と構築に先行投資することで、NET-A-PORTER チームは長期的な効率を大幅に向上させています。新しいページや機能をより簡単かつ迅速に作成、リリースでき、関係者からのフィードバックや設計の微調整をエンジニアリング プロセスに簡単に統合できます。
Polymer の今後
Polymer がウェブ開発をどのように可能にしたかについて、チームは大きな期待を寄せています。 Glen さんは次のように述べています。
さまざまな形でコンポーネントを組み合わせて 再利用できることがわかってすぐにワクワクしました私たちは、社内のコンポーネントを悪用する方法が他にもあるのではないかと考え始めました。
Polymer では、できることが他にもたくさんあると感じています。次のように話しています。
これは、Google の Polymer の取り組みの始まりにすぎません。Google では現在、既存のコンポーネントの配信と保守性を向上させると同時に、Polymer の使用をより多くの NET-A-PORTER ページにも拡大できるよう取り組んでいます。Google は、一般公開されている NET-A-PORTER コンポーネント スタイルガイドを使用してアプローチを文書化する作業を進めています。Polymer は社内ツールにも 非常に役立っています最近、グラフ作成コンポーネントのセットを構築し、Polymer を使用するようにモニタリング サービス全体のプラットフォーム再構築を行いました。