Zusammenfassung
Net-A-Porter spart mit der Polymer-Bibliothek von Google Entwicklungszeit
NET-A-PORTER implementierte mithilfe der Polymer-Bibliothek von Google ein komponentenbasiertes Design für seine Online-Properties. Das Ergebnis war eine erhebliche Einsparungen bei der Entwicklungszeit, standardisierten Code auf den Websites und eine verbesserte SEO-Leistung durch die Verwendung strukturierter Daten.
Ergebnisse
- Entwicklungszeit wurde eingespart.
- Standardisierter Code für die Online-Properties von NET-A-PORTER.
- Verbesserte SEO-Leistung durch die Verwendung strukturierter Daten
Fallstudie als PDF herunterladen
Über NET-A-PORTER
NET-A-PORTER wurde im Juni 2000 gegründet und ist ein weltweit führender Anbieter von Luxusmode im Internet mit Kollektionen von über 350 der weltweit gefragtesten Designer.
Hinter dem Onlineschaufenster des Unternehmens arbeitet das Entwicklerteam des Unternehmens intensiv daran, net-a-porter.com und sein Netzwerk aus Websites und Apps, das zwei Modemagazine und ein soziales Netzwerk umfasst, bereitzustellen und zu pflegen.
In Bezug auf ihre Web-Properties sehen die Entwickler von NET-A-PORTER jede Seite einer Website nicht als Seite, sondern als Sammlung von Komponenten.
Eine Produktseite kann beispielsweise eine Preiskomponente, die auf Sparangebote während eines Ausverkaufs verweist, eine Karussell-Komponente mit Links zu ähnlichen Produkten, eine interaktive Komponente, die komplette Outfits mit Produkten präsentiert, eine Drop-down-Komponente zum Hinzufügen eines Produkts zu einer Wunschliste und vieles mehr enthalten.
Komponentenbasierter Ansatz
Anfang 2016 beschloss das Entwicklerteam von NET-A-PORTER, zu bewerten, wie das Unternehmen Komponenten auf die Art und Weise anwenden könnte, wie Code für seine Web-Properties geschrieben wird. Aufgrund der vielen Seiten und untergeordneten Properties, die unter NET-A-PORTER fallen – und den verschiedenen Teams, die diese Seiten verwalten – wussten die Entwickler, dass es keinen Sinn machte, von vorn mit einer neuen Technologie zu beginnen, die ihren vorhandenen Stack entsorgen würde. In einer idealen Lösung könnten sie neue Komponenten überlagern und Seiten hinzufügen, wenn zusätzliche Komponenten erstellt wurden. Komponenten müssen unabhängig mit verschiedenen Back-End-Diensten kommunizieren können und Web-Crawlern strukturierte Daten zum Produkt zur Verfügung stellen.
Tests und Erfolge mit Polymer
Nach der Auswertung mehrerer Lösungen entschied sich NET-A-PORTER, die Polymer-Bibliothek von Google zu testen. Ein erster Versuch mit Polymer wurde so schnell und erfolgreich abgeschlossen, dass die Entwickler von NET-A-PORTER beschlossen, Polymer unmittelbar in die Gesamtplanung der Websiteentwicklung einzuführen.
Robin Glen und Matthew Green, die Entwickler des Teams, teilten Folgendes:
Polymer ließ sich leicht in unser System einbinden und im Handumdrehen einsatzbereit machen. Da wir eine so große Website mit so vielen verschiedenen Aspekten haben, kann es leicht zu Uneinheitlichkeiten kommen. Mit Polymer können wir vollständige und komplexe Webanwendungen erstellen, die skalierbar und wartbar sind.
Die Codestandardisierung war ebenfalls einfach, da Polymer auf den Browserstandards von Webkomponenten basiert. Glen fährt fort:
Bei der Entwicklung mit Webstandards bleibt unser Code plattformnah. Dadurch wird es einfacher, neue Komponenten zu verwenden und zu erstellen. So können wir die Leistung kontinuierlich verbessern, wenn sich die Browser verbessern, und wir können langfristig planen. Da sie auf dem W3C-Standard basiert, sind wir zuversichtlich, auf der Plattform zu entwickeln. Selbst Polyfills werden bald nicht mehr benötigt.
Außerdem gab es SEO-Vorteile. Glen sagt, dass:
Komponenten stellen detaillierte strukturierte Daten zu Produkten für Suchmaschinen effektiv zur Verfügung. Das Testen dieser strukturierten Daten ist jetzt direkt Teil des Continuous-Integration-Schemas unseres Teams.
Durch die Vorabinvestitionen in die Entwicklung und Erstellung von Komponenten verzeichnet das NET-A-PORTER-Team erhebliche langfristige Effizienzsteigerungen: Neue Seiten und Funktionen lassen sich einfacher und schneller erstellen und starten. Außerdem lassen sich Stakeholder-Feedback und Designoptimierungen einfacher in den Engineering-Prozess einbinden.
Die Zukunft von Polymer
Das Team ist begeistert, wie Polymer seine Webentwicklung ermöglicht hat. Glen sagt:
Wir waren begeistert, wie wir Komponenten wiederverwenden, indem wir sie auf unterschiedliche Weise zusammensetzen können. Wir fragten uns, ob es weitere Möglichkeiten gäbe, Komponenten innerhalb des Unternehmens auszunutzen.
Glen hat das Gefühl, dass es mit Polymer noch viel mehr zu entdecken gibt. Er sagt:
Dies ist erst der Anfang unserer Reise zu Polymer. Wir verbessern derzeit die Bereitstellung und Verwaltbarkeit bestehender Komponenten und arbeiten daran, die Verwendung von Polymer auf mehr NET-A-PORTER-Seiten auszuweiten. Wir arbeiten daran, unseren Ansatz in einem öffentlich verfügbaren Styleguide für NET-A-PORTER-Komponenten zu dokumentieren. Polymer ist auch sehr nützlich für interne Tools. Wir haben vor Kurzem eine Reihe von Grafikkomponenten erstellt und unseren gesamten Monitoringdienst auf Polymer umgestellt.