เจาะลึก Shopify Hydrogen และ Shopify Oxygen

Shopify ได้รับความนิยมจากธุรกิจมากขึ้นเรื่อยๆ เนื่องจากปรับแต่งได้ง่ายและมีประโยชน์มากมาย บริษัทต่างๆ จึงต้องการกระโดดเข้าสู่ตลาดนี้เพื่อเพิ่มโอกาสและประสบการณ์ของลูกค้า ดังนั้นตลาดออนไลน์จึงมีการแข่งขันกันค่อนข้างมาก จากนั้น ธุรกิจต่างๆ ต้องคิดหาวิธีที่จะทำให้ร้านค้าของตนบน Shopify น่าสนใจยิ่งขึ้นและสะดวกยิ่งขึ้นในการเอาชนะคู่แข่ง โชคดีที่ Shopify ได้เปิดตัว Shopify Hydrogen และ Shopify Oxygen เพื่อให้กระบวนการนี้ง่ายขึ้น ดังนั้น ในบทความนี้ เราจะให้ข้อมูลแนะนำโดยละเอียดเกี่ยวกับ Shopify Hydrogen และ Shopify Oxygen สำหรับคุณ

คุณสมบัติเด่นบางประการที่คุณควรรู้เกี่ยวกับ Shopify Hydrogen และ Shopify Oxygen

ภาพรวมของ Shopify Hydrogen

Shopify Hydrogen ซึ่งประกาศที่ Unite 2021 เป็นเฟรมเวิร์ก React ใหม่ที่ช่วยให้นักพัฒนาสามารถสร้างร้านค้า Shopify ที่ไม่ซ้ำแบบใคร Hydrogen เป็นแพลตฟอร์มที่ใช้ React และ JavaScript ที่ให้เครื่องมือและส่วนประกอบที่มีประสิทธิภาพแก่ผู้ค้า ความสามารถพิเศษนี้ช่วยให้คุณเริ่มต้นจากศูนย์และสร้างร้านค้าเฉพาะตัวและไม่เหมือนใคร

วิธีการทำงานของ Shopify Hydrogen

คุณจะใช้ไฮโดรเจนเพื่อสร้างหน้าร้านตามสั่ง ประกอบด้วยกรอบงานและส่วนประกอบส่วนต่อประสานกับผู้ใช้

กรอบงานสำหรับไฮโดรเจน : Shopify Hydrogen มีปลั๊กอิน Vite ที่มีการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) มิดเดิลแวร์ไฮเดรชั่น และการแปลงโค้ดสำหรับส่วนประกอบไคลเอ็นต์

ส่วนประกอบของอินเทอร์เฟซผู้ใช้ Hydrogen : Hydrogen คือชุดของส่วนประกอบ ตะขอ และยูทิลิตี้ที่รองรับคุณสมบัติและแนวคิดของ Shopify

แหล่งที่มาของข้อมูล: Hydrogen ออกแบบมาเพื่อทำงานกับข้อมูลจาก Storefront API ของ Shopify ข้อมูลที่ให้กับส่วนประกอบ hooks และยูทิลิตี้มีรูปร่างที่ตรงกันและยึดตามประเภท GraphQL ของ Storefront API

Shopify Hydrogen สามารถให้ความช่วยเหลือด้านข้อมูลสำหรับแหล่งข้อมูลบุคคลที่สาม หากคุณต้องการใช้ส่วนประกอบไฮโดรเจนกับแหล่งข้อมูลของบุคคลที่สาม ก่อนอื่นคุณต้องเปลี่ยนข้อมูลจากแหล่งข้อมูลบุคคลที่สามเป็นประเภทที่ส่วนประกอบ Hydrogen, hooks และยูทิลิตี้ต่างๆ คาดหวัง จากนั้นจึงส่งต่อไปยังส่วนประกอบ ตะขอ และสาธารณูปโภค

แนวทางปฏิบัติที่ดีที่สุดบางประการที่คุณควรปฏิบัติตามเพื่อตั้งค่า Hydrogen

เพื่อให้ร้านค้าของผู้ขายของคุณรวดเร็ว เข้าถึงได้ และค้นพบได้ คุณจะต้องพิจารณาปัจจัยต่อไปนี้:

• ประสิทธิภาพ
• การช่วยสำหรับการเข้าถึง
• การทดสอบ

มีแนวทางสำหรับการพัฒนา Shopify Hydrogen

แล้ว Shopify Oxygen คืออะไร?

พูดง่ายๆ ก็คือ Oxygen เป็นบริการโฮสติ้งที่ Shopify เสนอเพื่อให้คุณโฮสต์ร้านค้าที่คุณสร้างด้วย Hydrogen

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

ประโยชน์ที่คุณจะได้รับอย่างแน่นอนเมื่อใช้ Shopify Hydrogen

Shopify Hydrogen มีข้อดีดังต่อไปนี้ หากคุณกำลังคิดที่จะสร้างหน้าร้านแบบกำหนดเอง

แม่แบบร้านสาธิต

Hydrogen มีเทมเพลต Demo Store ที่ช่วยให้สร้างหน้าร้านแบบกำหนดเองของ Shopify ได้อย่างง่ายดาย มาพร้อมกับรหัสต้นแบบ ผสานรวมกับไซต์ Shopify ได้อย่างราบรื่น นอกจากนี้ยังมอบประสบการณ์การซื้อที่สมบูรณ์แบบทันทีที่แกะกล่อง

คุณสามารถจัดรูปแบบเทมเพลต Demo Store ได้ด้วยแพ็คเกจยูทิลิตี้ Tailwind CSS และเฟรมเวิร์ก Shopify Hydrogen คุณจะใช้ไลบรารีของ Tailwind หรือสร้างสไตล์ของคุณเองก็ได้

การเพิ่มประสิทธิภาพการทำงาน

เพื่อความเร็วที่เหมาะสม สถาปัตยกรรมของ Shopify Hydrogen ช่วยให้สามารถดึงข้อมูลแบบสแตติกและไดนามิกได้ทั้งฝั่งไคลเอ็นต์และเซิร์ฟเวอร์ เนื่องจากเทคโนโลยีเว็บที่ทันสมัยและแนวทางการพัฒนาเว็บ จึงมีคุณสมบัติดังต่อไปนี้:

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

การพัฒนาที่รวดเร็ว

Hydrogen ใช้ทักษะด้านเทคโนโลยีและการค้าขั้นพื้นฐานของ Shopify เพื่อเร่งกระบวนการพัฒนา ทำงานร่วมกับ Storefront API เพื่อให้ดึงข้อมูลได้อย่างรวดเร็ว

ไฮโดรเจนประกอบด้วยส่วนประกอบ ตะขอ และเครื่องมือการค้าเฉพาะของ Shopify เข้าถึงได้ง่าย รวดเร็ว และพร้อมใช้งาน พวกเขายังช่วยลดความซับซ้อนเริ่มต้นและต้นแบบที่จำเป็นในการสร้างหน้าร้านที่กำหนดเอง

React.js

Shopify ได้รับรอง React.js ว่าเป็นอนาคตของการค้าขายแบบไดนามิก รวดเร็ว และเป็นส่วนตัว และคุณสามารถเดิมพันได้ว่าการตัดสินใจของ Shopify ในการลงทุนใน React เป็นคำชี้แจงที่สำคัญสำหรับอุตสาหกรรมนี้ มันทำให้ React.js มีความน่าเชื่อถือมากขึ้นในฐานะอนาคตของการค้าหรือสิ่งที่กำลังมุ่งหน้าไป

คุณจะได้รับชุดเริ่มต้นซึ่งรวมถึงรายการต่อไปนี้

ผู้ที่ใช้งาน Hydrogen ก่อนใครจะได้รับเทมเพลตพื้นฐานเพื่อให้ไซต์ของตนใช้งานได้ ต่อไปนี้คือรายการของสิ่งที่รวมอยู่ในแพ็คเกจเริ่มต้น (คิดว่า: ปุ่ม การสลับ การนำทาง) เกือบจะแน่นอนว่าคุณจำเป็นต้องสร้างชิ้นส่วนด้วยตัวคุณเองในฐานะผู้ใช้รายแรกๆ แต่มีส่วนประกอบที่สร้างไว้ล่วงหน้าที่คุณอาจใช้เพื่อเริ่มต้น

ทีมของคุณสามารถช่วยสร้างไฮโดรเจน

Shopify กำลังค้นหาความช่วยเหลือจากชุมชนการพัฒนา ecomm ด้วยความช่วยเหลือของ Shopify คุณอาจออกแบบวิสัยทัศน์ของผลิตภัณฑ์ตั้งแต่เริ่มต้น หากคุณมีทีมพัฒนาภายในที่เข้มแข็ง

ส่วนประกอบที่คุณสร้างสามารถนำมาใช้ซ้ำได้

เมื่อคุณเริ่มต้นใช้งานชุดเริ่มต้น คุณจะสามารถออกแบบชิ้นส่วนแรกเริ่มที่สามารถนำมาใช้ซ้ำได้ตามต้องการทั่วทั้งไซต์งานของคุณ

อย่างไรก็ตาม คุณต้องเผชิญหน้ากับข้อเสียที่อาจเกิดขึ้นของ Shopify Hydrogen

เวิร์กโฟลว์หนักสำหรับนักพัฒนาที่คุณสร้างขึ้นจากพื้นฐาน

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

ขณะนี้ไม่มีการแสดงตัวอย่างร้านค้า

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

ใช้ส่วนประกอบเซิร์ฟเวอร์ React

เอาต์พุตของไฮโดรเจนจะไม่ใช่เว็บแอปโปรเกรสซีฟแบบคงที่เพราะใช้ส่วนประกอบเซิร์ฟเวอร์ React (PWA) โปรแกรมเมอร์ของคุณจะต้องเขียนโค้ดสำหรับเซิร์ฟเวอร์ Shopify ส่วนประกอบ React Server ค่อนข้างร้อนและใหม่ คุณอาจเรียกมันว่าเวอร์ชัน "เบต้า" เป็นความคิดที่ดี แต่นักพัฒนาส่วนใหญ่ยังไม่ยอมรับมันจริงๆ

คุณจะต้องเชื่อมโยงระบบจัดการเนื้อหา (CMS) ของคุณเอง

วันนี้ Shopify และ Sanity กำลังร่วมมือกันเพื่อส่งมอบความสามารถระบบจัดการเนื้อหา (CMS) ให้กับร้าน Hydrogen Sanity คือ CMS ของบุคคลที่สามที่มุ่งเน้นนักพัฒนา ช่วยให้ทีมสามารถสร้างสคีมาข้อมูลเนื้อหา (รูปภาพ ข้อความ วิดีโอ) สำหรับการจัดการเนื้อหาที่มีโค้ดน้อย

การสนับสนุนแอพของวันนี้มีน้อย

แม้ว่า Shopify ได้กำหนดสถานการณ์ในอุดมคติสำหรับการสนับสนุนแอพที่มีศักยภาพ แต่ระบบนิเวศของแอพของบุคคลที่สามนั้นอยู่ในระยะเริ่มต้น ในขณะนี้ API ยังไม่พร้อมใช้งานสำหรับทุกสิ่ง และสิ่งที่คุณสร้างจะใช้งานร่วมกันไม่ได้กับ Shopify app store ในทันที สำหรับแต่ละแอป Shopify ที่คุณใช้ คุณจะต้องออกแบบมิดเดิลแวร์ของคุณเอง

ไฮโดรเจนอยู่ไกลจากการทดแทนของเหลว

ผู้ค้าจำนวนมากได้ลงทุนในธีม Shopify เมื่อเร็วๆ นี้ จากนั้น Shopify ก็เปลี่ยนโฟกัสไปจากธีมของ Shopify Liquid และผู้ชมที่ไม่ใช่ด้านเทคนิคที่ธีมเหล่านี้ให้บริการอยู่ในปัจจุบัน ‍หากคุณกำลังมองหา Hydrogen เป็นตัวเลือกหัวขาดที่เป็นไปได้ โปรดจำไว้ว่าอาจต้องใช้เวลาสักระยะกว่าที่กรอบงานนี้จะตามทัน Liquid

บทสรุป

เราแนะนำคุณตลอดบทความนี้ด้วยความหวังว่า: คุณมีความเข้าใจพื้นฐานเกี่ยวกับ Shopify Hydrogen และ Shopify Oxygen ด้วยคุณสมบัติที่น่าทึ่งมากมาย จึงคุ้มค่าที่จะเข้าร่วมเพื่อเพิ่มเอฟเฟกต์ของร้านค้าออนไลน์ของคุณ ดังนั้นธุรกิจของคุณจึงสามารถตอบสนองความต้องการของลูกค้าและนำโอกาสมาพัฒนาในสภาพแวดล้อมอินเทอร์เน็ตได้มากขึ้น อย่างไรก็ตาม หากคุณยังสับสนเกี่ยวกับเทคโนโลยีนี้ Magesolution ยินดีที่จะเป็นพันธมิตรเพื่อช่วยเหลือธุรกิจของคุณ ด้วยประสบการณ์มากมายในด้านนี้ เราจึงมั่นใจที่จะให้บริการที่ดีที่สุด: Shopify Solutions ดังนั้น หากคุณมีคำถามใดๆ โปรดติดต่อเราเพื่อขอข้อมูลเพิ่มเติม