ประตูตาข่าย

สรุป

Net-A-Porter ประหยัดเวลาในการพัฒนาด้วย ไลบรารี Polymer Library ของ Google

NET-A-PORTER ใช้การออกแบบตามคอมโพเนนต์ในพร็อพเพอร์ตี้ออนไลน์โดยใช้ไลบรารี Polymer ของ Google ผลที่ได้คือประหยัดเวลาในการพัฒนาได้อย่างมาก ใช้โค้ดแบบสแตนด์อะโลนในเว็บไซต์ต่างๆ และปรับปรุงประสิทธิภาพของ SEO ผ่านการใช้ข้อมูลที่มีโครงสร้าง

ผลลัพธ์

• ประหยัดเวลาในการพัฒนา
• โค้ดที่ได้มาตรฐานในพร็อพเพอร์ตี้ออนไลน์ของ NET-A-PORTER
• ปรับปรุงประสิทธิภาพ SEO ผ่านการใช้ข้อมูลที่มีโครงสร้าง

ดาวน์โหลดกรณีศึกษาในรูปแบบ PDF

เกี่ยวกับ NET-A-portER

NET-A-portER ซึ่งเปิดตัวในเดือนมิถุนายนปี 2000 โดยเป็นผู้นำระดับโลกในด้านแฟชั่นหรูออนไลน์ โดยนำเสนอคอลเล็กชันของดีไซเนอร์กว่า 350 รายที่เป็นที่ต้องการมากที่สุดของโลก

เบื้องหลังหน้าร้านออนไลน์ของบริษัท ทีมวิศวกรของบริษัททำงานอย่างหนักเพื่อส่งมอบและดูแล net-a-porter.com และเครือข่ายเว็บไซต์และแอปของบริษัท ซึ่งประกอบไปด้วยนิตยสารแฟชั่น 2 ฉบับและโซเชียลเน็ตเวิร์ก

เมื่อนึกถึงผลิตภัณฑ์และบริการบนอินเทอร์เน็ต วิศวกร NET-A-portER จะเห็นแต่ละหน้าในเว็บไซต์ ไม่ใช่หน้า แต่เป็นคอลเล็กชันของคอมโพเนนต์

ตัวอย่างเช่น หน้าผลิตภัณฑ์อาจมีองค์ประกอบการกำหนดราคาที่บ่งบอกถึงการประหยัดเงินระหว่างการขาย คอมโพเนนต์ภาพหมุนที่มีลิงก์ไปยังผลิตภัณฑ์ที่เกี่ยวข้อง คอมโพเนนต์แบบอินเทอร์แอกทีฟที่แสดงเครื่องแต่งกายทั้งหมดที่นำเสนอผลิตภัณฑ์ คอมโพเนนต์แบบเลื่อนลงสำหรับเพิ่มผลิตภัณฑ์ลงในสิ่งที่อยากได้ และอื่นๆ

วิธีการที่อิงตามองค์ประกอบ

ในช่วงต้นปี 2016 ทีมวิศวกรของ NET-A-portER ได้ตัดสินใจประเมินว่าบริษัทจะนำคอมโพเนนต์ต่างๆ ไปใช้อย่างไรกับวิธีเขียนโค้ดสำหรับเว็บพร็อพเพอร์ตี้ เนื่องจากหน้าเว็บและพร็อพเพอร์ตี้ย่อยจำนวนมากอยู่ภายใต้ NET-A-PORTER รวมถึงทีมต่างๆ ที่จัดการหน้าเหล่านั้น วิศวกรจึงรู้ว่าการเริ่มใหม่ตั้งแต่ต้นด้วยเทคโนโลยีใหม่ที่จำเป็นต้องกำจัดสแต็กที่มีอยู่ทิ้งก็ไม่จำเป็น โซลูชันที่เหมาะสมจะทําให้ทีมวางเลเยอร์บนคอมโพเนนต์ใหม่และเพิ่มไปยังหน้าเมื่อมีการสร้างคอมโพเนนต์เพิ่มเติมแล้ว คอมโพเนนต์จะต้องสามารถสื่อสารกับบริการแบ็กเอนด์ที่แตกต่างกันได้อย่างอิสระ และยังจะต้องแสดงข้อมูลที่มีโครงสร้างเกี่ยวกับผลิตภัณฑ์ไปยังโปรแกรมรวบรวมข้อมูลเว็บด้วย

การทดสอบและประสบความสำเร็จด้วย Polymer

หลังจากประเมินโซลูชันจำนวนหนึ่ง NET-A-portER จึงเลือกทดสอบไลบรารี Polymer ของ Google การทดสอบแรกเริ่มกับ Polymer เสร็จสมบูรณ์อย่างรวดเร็วและประสบความสำเร็จ วิศวกร NET-A-PORTER จึงตัดสินใจเดินหน้าและนำ Polymer มาใช้ในการวางแผนการพัฒนาเว็บไซต์โดยรวมขององค์กรแทบจะในทันที

Robin Glen และ Matthew Green วิศวกรในทีม กล่าวว่า

Polymer ผสานรวมเข้ากับระบบของเราได้อย่างง่ายดาย และเริ่มทำงานได้ทันที การที่เรามีเว็บไซต์ขนาดใหญ่แต่มีมุมมองที่แตกต่างหลากหลาย ทำให้เราไม่สามารถสร้างข้อมูลที่ไม่ตรงกันได้ Polymer ช่วยให้เราสามารถสร้างเว็บแอปพลิเคชันที่สมบูรณ์และซับซ้อน ซึ่งสามารถรองรับการปรับขนาดและบำรุงรักษาได้

ส่วนการกำหนดมาตรฐานโค้ดก็ทำได้ง่ายเช่นกันเพราะ Polymer อิงตามมาตรฐานเบราว์เซอร์ที่เป็นส่วนประกอบของเว็บเบราว์เซอร์ Glen ยังต่อ:

การสร้างโดยใช้มาตรฐานเว็บทำให้โค้ดของเราใกล้เคียงกับแพลตฟอร์ม วิธีนี้จะช่วยให้เรียนรู้วิธีใช้และสร้างคอมโพเนนต์ใหม่ๆ ได้ง่ายขึ้น ทำให้มั่นใจได้ว่าประสิทธิภาพจะดีขึ้นอย่างต่อเนื่องเมื่อเบราว์เซอร์มีการปรับปรุง และช่วยให้เราวางแผนได้ในระยะยาว และเนื่องจากเป็นไปตามมาตรฐาน W3C เราจึงมั่นใจ ในการสร้างเนื้อหาบนแพลตฟอร์ม ในเร็วๆ นี้ความจำเป็นในการใช้โพลีฟิลก็จะหมดไปในวงกว้าง

และ SEO ก็มีประโยชน์เช่นกัน เกลนกล่าวว่า

คอมโพเนนต์แสดงข้อมูลที่มีโครงสร้างโดยละเอียดเกี่ยวกับผลิตภัณฑ์แก่เครื่องมือค้นหาอย่างมีประสิทธิภาพ การทดสอบข้อมูลที่มีโครงสร้างนี้เป็นส่วนหนึ่งของแผนการผสานรวมอย่างต่อเนื่องของทีมของเราโดยตรงแล้ว

การลงทุนโดยตรงในการออกแบบและสร้างส่วนประกอบทำให้ทีม NET-A-portER เห็นถึงประสิทธิภาพในระยะยาว หน้าและฟีเจอร์ใหม่ๆ สร้างและเปิดตัวได้ง่ายและรวดเร็วยิ่งขึ้น รวมถึงรวมความคิดเห็นและการปรับเปลี่ยนการออกแบบไว้ในกระบวนการทางวิศวกรรมได้ง่ายกว่าเดิม

อนาคตของ Polymer

ทีมงานรู้สึกตื่นเต้นกับวิธีที่ Polymer เข้ามาพัฒนาเว็บ เกลนพูดว่า

ทันทีที่ได้เห็นว่าเราสามารถนำคอมโพเนนต์กลับมาใช้ใหม่ได้ โดยนำคอมโพเนนต์เหล่านั้นมารวมกันในแบบต่างๆ ได้อย่างไร เราตื่นเต้นมาก เราเริ่มสงสัยว่าจะมีวิธีอื่นๆ อีกหรือไม่ที่เราสามารถใช้ประโยชน์จากองค์ประกอบภายในธุรกิจ

Glen รู้สึกว่ายังมีอะไรอีกมากมายให้สำรวจด้วย Polymer เขาพูดว่า

นี่เป็นเพียงจุดเริ่มต้นของเส้นทางการใช้ Polymer เท่านั้น ขณะนี้เรากำลังปรับปรุงการแสดงและการบำรุงรักษาคอมโพเนนต์ที่มีอยู่ พร้อมกับขยายการใช้งาน Polymer ไปยังหน้า NET-A-portER มากขึ้น เรากำลังพยายามจัดทำเอกสารเกี่ยวกับแนวทางของเราไว้ในคู่มือสไตล์คอมโพเนนต์ NET-A-PORTER ที่เผยแพร่ต่อสาธารณะ พอลิเมอร์ยังมีประโยชน์มาก สำหรับเครื่องมือภายในอีกด้วย เมื่อเร็วๆ นี้เราได้สร้างชุดอุปกรณ์กราฟและ เปลี่ยนแพลตฟอร์มบริการตรวจสอบทั้งหมดของเราไปใช้ Polymer