เจาะลึก 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 กำลังค้นหาความช่วยเหลือจากชุมชนการพัฒนาอีคอมเมิร์ซ ด้วยความช่วยเหลือของ 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 ดังนั้น หากคุณมีคำถามใดๆ โปรด ติดต่อเรา เพื่อขอข้อมูลเพิ่มเติม