{i>Net-A-Porter
Detail {i>net-a-porter<i}

Ringkasan

Net-A-Porter menghemat waktu pengembangan dengan Library Polymer Google

NET-A-PORTER menerapkan desain berbasis komponen pada properti online mereka menggunakan library Polymer Google. Hasilnya adalah penghematan waktu pengembangan yang besar, kode yang distandarisasi di seluruh situs mereka, dan peningkatan performa SEO melalui penggunaan data terstruktur.

Hasil

  • Hemat waktu pengembangan.
  • Kode standar di properti online NET-A-PORTER.
  • Peningkatan performa SEO melalui penggunaan data terstruktur.

Download Studi Kasus PDF

Tentang NET-A-PORTER

Diluncurkan pada bulan Juni 2000, NET-A-PORTER adalah pemimpin global dalam mode mewah online, yang menampilkan koleksi dari 350 lebih desainer yang paling dicari di dunia.

Di balik etalase online perusahaan, tim engineering perusahaan bekerja keras untuk mengirimkan dan memelihara net-a-porter.com serta jaringan situs dan aplikasinya, yang mencakup dua majalah mode dan jaringan sosial.

Saat memikirkan properti web mereka, engineer NET-A-PORTER melihat setiap halaman di situs bukan sebagai halaman, melainkan sebagai kumpulan komponen.

Halaman produk, misalnya, dapat mencakup komponen harga yang menunjukkan penghematan selama promo, komponen carousel dengan link ke produk terkait, komponen interaktif yang menampilkan pakaian lengkap yang menampilkan produk, komponen dropdown untuk menambahkan produk ke wishlist, dan lainnya.

Pendekatan berbasis komponen

Pada awal tahun 2016, tim teknik NET-A-PORTER memutuskan untuk mengevaluasi cara perusahaan mengambil komponen dan menerapkannya pada cara mereka menulis kode untuk properti web mereka. Karena banyaknya halaman dan sub-properti yang berada di bawah NET-A-PORTER - dan berbagai tim yang mengelola halaman tersebut - para engineer memahami bahwa tidak masuk akal untuk memulai dari awal dengan teknologi baru yang mengharuskan mereka menghapus stack yang ada. Solusi ideal yang memungkinkan mereka melapisi komponen baru dan menambahkan ke halaman saat komponen tambahan dibuat. Komponen harus dapat berkomunikasi dengan layanan backend yang berbeda secara independen, dan juga perlu menampilkan data terstruktur tentang produk ke web crawler.

Pengujian dan kesuksesan dengan Polymer

Setelah mengevaluasi sejumlah solusi, NET-A-PORTER memilih untuk menguji library Polymer Google. Eksperimen awal dengan Polymer dapat diselesaikan dengan cepat dan sukses, sehingga engineer NET-A-PORTER memutuskan untuk melanjutkan dan memperkenalkan Polymer ke seluruh perencanaan pengembangan situs organisasi dengan segera.

Robin Glen dan Matthew Green, engineer dalam tim, berbagi:

Polymer mudah diintegrasikan ke sistem kami dan dapat langsung digunakan. Fakta bahwa kita memiliki situs web yang besar dengan begitu banyak aspek yang berbeda berarti mudah bagi kita untuk memiliki inkonsistensi. Polymer memungkinkan kita membuat aplikasi web yang lengkap dan kompleks yang skalabel dan dapat dipelihara.

Standardisasi kode juga mudah, karena Polymer didasarkan pada standar browser komponen web. Glen melanjutkan:

Membangun menggunakan standar web membuat kode kami tetap dekat dengan platform. Hal ini memudahkan Anda mempelajari cara menggunakan dan membuat komponen baru, memastikan performa akan terus menjadi lebih baik seiring peningkatan browser, dan memungkinkan kami merencanakan untuk jangka panjang. Karena didasarkan pada standar W3C, kami yakin untuk membangun di platform ini. Bahkan kebutuhan akan polyfill akan akan hilang secara luas dalam waktu dekat.

Selain itu, ada juga manfaat dari SEO. Glen mengatakan bahwa:

Komponen secara efektif menampilkan data terstruktur mendetail tentang produk ke mesin telusur. Pengujian data terstruktur ini kini langsung menjadi bagian dari skema continuous integration tim kami.

Dengan melakukan investasi awal dalam merancang dan membangun komponen, tim NET-A-PORTER melihat peningkatan efisiensi jangka panjang yang dramatis: halaman dan fitur baru lebih sederhana dan lebih cepat untuk dibuat dan diluncurkan, serta lebih mudah untuk mengintegrasikan masukan pemangku kepentingan dan perubahan desain ke dalam proses rekayasa.

Masa depan Polymer

Tim senang dengan cara Polymer memungkinkan pengembangan webnya. Glen berkata,

Begitu melihat bagaimana kita bisa menggunakan kembali komponen dengan menyatukannya dalam berbagai cara, kita bersemangat. Kami mulai bertanya-tanya apakah ada cara lebih lanjut untuk mengeksploitasi komponen dalam bisnis.

Glen merasa ada lebih banyak hal yang dapat dijelajahi dengan Polymer. Dia berkata,

Ini hanyalah awal dari perjalanan Polymer kita. Saat ini, kami sedang meningkatkan pengiriman dan pemeliharaan komponen yang ada, sekaligus berupaya memperluas penggunaan Polymer ke lebih banyak halaman NET-A-PORTER. Kami sedang berupaya mendokumentasikan pendekatan kami dengan panduan gaya komponen NET-A-PORTER yang tersedia untuk publik. Polymer juga sangat berguna untuk alat internal. Baru-baru ini kami membuat sekumpulan komponen grafik dan menempatkan ulang seluruh layanan pemantauan untuk menggunakan Polymer.