Magento 2 PWA Studio
ภาพรวมของ Magento PWA Studio
เป็นที่ชัดเจนแล้วว่าแนวคิด PWA จะเปลี่ยนวิธีการดำเนินการใช้งานส่วนหน้าร้านค้าอีคอมเมิร์ซอย่างสิ้นเชิง ในขณะที่คุณยังคงสามารถใช้แนวทางเดิมในการพัฒนาและบำรุงรักษาหน้าร้านได้ (คุณสามารถใช้ Magento 1 ได้หากคุณต้องการ แต่มันไม่ใช่เครื่องมือ E-Commerce) ที่ทรงพลังที่สุดอีกต่อไป) PWA Studio ได้กลายเป็นส่วนหนึ่งของ Magento 2 อย่างเป็นทางการ แล้วมันพร้อมสำหรับการใช้งานหรือไม่ พบคำตอบที่บทความนี้ PWA Studio นำเสนอวิธีการปฏิวัติในการสร้างร้านอีคอมเมิร์ซ มี repo บน GitHub ที่มีส่วนประกอบของ Magento PWA Studio ปัจจุบัน, pwa-module, pwa-buildpack, peregrine และ venia-concept ลองมาดูกันทีละอันกัน
pwa-module
แพ็คเกจนี้ประกอบด้วยโมดูลที่มีตัวช่วยโมดูลและฟังก์ชันการทำงานด้านเซิร์ฟเวอร์ เป็นพื้นฐานสำหรับชุดรูปแบบ PWA ทั้งหมด (ชุดรูปแบบที่สร้างขึ้นใน PWA Studio) โมดูลนี้มีสิ่งสำคัญดังนี้
- การแปลง App shell
- จัดการการกำหนด RootComponent
- ฝัง GraphQL ลงในการแสดงผลเซิร์ฟเวอร์
การโต้ตอบของคุณกับโมดูล PWA เป็นการโต้ตอบแบบตรงไปตรงมา คุณต้อง install มันเสียก่อน จากนั้นไปที่หลังบ้านและเปิดใช้งานโมดูล PWA สุดท้ายคุณสามารถใช้มันเป็นธีมหลักของชุดรูปแบบทั้งหมดที่พัฒนาผ่าน Magento PWA Studio
pwa-buildpack
pwa-buildpack มีปลั๊กอินและเครื่องมือ Webpack หลายชุดสำหรับการพัฒนาธีม Magento PWA คุณสามารถใช้สิ่งเหล่านี้เพื่อตั้งค่าและกำหนดค่าการพัฒนาต่างๆ ลองดูว่ามีเครื่องมือใดที่คุณใช้งานอยู่บ้าง
- PWADevServer ถูกออกแบบมาเพื่อตั้งค่าเซิร์ฟเวอร์ในการพัฒนาสำหรับธีม Magento PWA Studio ใช้เครื่องมือนี้เพื่อกำหนด localhost ,ใบรับรอง SSL ,service workers, ฯลฯ
- MagentoResolver เครื่องมือนี้มีข้อสำคัญข้อนึงคือต้องปรับ Webpack ให้เข้ากับระบบไฟล์ Magento นอกจากนี้มันยังจัดการการกำหนดค่าสำหรับการแก้ไข Webpack
- MagentoRootComponentsPlugin เครื่องมือสำหรับแยกรหัส มันถูกออกแบบมาให้คุณสามารถสร้างกลุ่มที่ไม่ซ้ำกันได้อย่างง่ายดาย
- magento-layout-loader เครื่องมือสำหรับเปลี่ยนเลเอาท์ ขณะการพัฒนาธีม Magento PWA ใหม่ เครื่องมือนี้จะช่วยให้คุณสามารถเพิ่มและลบเลเอาท์ได้ง่ายขึ้น
- ServiceWorkerPlugin เครื่องมือนี้ครอบคลุม Google Workbox Webpack มันถูกออกแบบมาเพื่อใช้สำหรับการกำหนดค่าสำหรับ service worker
Peregrine
ทีนี้มาดูกันว่าแพ็คเกจที่สามมีอะไรบ้าง ยังคงเป็นชุดของส่วนประกอบ React มันบรรจุทุกสิ่งที่คุณต้องการสำหรับการจัดการฟังก์ชันการทำงานเฉพาะของ Magento ส่วนประกอบของรากฐาน,การกำหนดเส้นทาง,รายการผลิตภัณฑ์,ตัวจัดการเลย์เอาต์และสิ่งอื่น ๆ สามารถจัดการได้ด้วย Peregrine
สิ่งหนึ่งคือแพคเกจนี้รวม Storybook JS – สภาพแวดล้อมที่คุณต้องการในการจัดการเอกสารและการแสดงองค์ประกอบ UI อย่างถูกต้อง ตามข้อมูล คุณจะสามารถเข้าถึงเอกสารที่เข้าถึงได้อย่างรวดเร็ว
venia-concept
แพ็คเกจนี้เป็นเดโมธีมที่พัฒนาโดย Magento ผ่านทาง PWA Studio มันเป็นตัวอย่างง่ายๆที่ออกแบบมาเพื่อแสดงคุณสมบัติพื้นฐานบางอย่างที่เกี่ยวข้องกับการทำงานมาตรฐานเวิร์กโฟลว์และหน้าเพจต่างๆ สำหรับธีมนั้นอยู่ในระหว่างการพัฒนา
Magento PWA Studio Repo
ประโยชน์หลักของ Magento PWA Studio คือความยืดหยุ่นที่ยอดเยี่ยมเพื่อให้นักพัฒนา frontend สามารถใช้ npm แพ็คเกจและเครื่องมือใด ๆ ก็ได้ โดยไม่มีข้อจำกัด เพราะการใช้ขั้นตอนการทำงาน CSS และ การออกแบบ ในฐานะนักพัฒนาคุณสามารถใช้ส่วนประกอบ React ที่คุณเลือกได้อย่างอิสระและไม่มีการเพิ่ม GraphQL middleware ลงในแพ็คเกจ! ดังนั้นคุณจะได้รับส่วนประกอบและเครื่องมือที่จำเป็นสำหรับการพัฒนาชุดรูปแบบ Magento 2 PWA – ไม่ใช่เครื่องมือมากมายที่ใช้เวลาและความพยายามเป็นอย่างของคุณแทน แต่ถึงอย่างนั้นมันก็ยังมีปัญหาที่ซ่อนอยู่
Two Frontends
2017 เป็นปีที่ มีการประกาศการปรับปรุงครั้งใหญ่ ในการพัฒนา frontend ที่ Firebear เราได้ติดตามว่าพวกเขาจะพัฒนาสิ่งใหม่ใด แทน frontend เดิมที่ซับซ้อนเกินไป ซึ่งเป็นก้าวต่อไปที่ชัดเจน แต่ภายในระยะเวลาที่ จำกัด ที่ต้องยอมรับว่าผู้คนยังเคยชินกับ Magento 1 และพวกเขายังไม่พร้อมจะเปลี่ยนแปลงอะไรในตอนนี้ แม้ว่า Magento 1 จะซับซ้อนกว่าโซลูชั่นใหม่ แต่ผู้ใช้ก็ยังไม่อยากเผชิญกับความไม่แน่นอนและการขาดผู้เชี่ยวชาญของเทคโนโลยีใหม่
ความแตกต่างระหว่าง PWA & KO Frontends
การเปลี่ยน storefront ที่ทำงานได้ดีอยู่แล้วเป็นเรื่องยาก แต่การจะดูแลหรือพัฒนาทั้งสองอย่างควบคู่กันไปก็ดูเหมือนจะยากเช่นเดียวกัน แต่เดิมมีการแทนที่การบล็อกด้วย XML และ PHTML ส่งข้อมูลด้วย GraphQL API นอกจากนี้ PWA ถูกสร้างขึ้นใน JavaScript เท่านั้นแทนที่จะผสมผสานกับ PHP เป็นผลให้ส่วนหน้าสองส่วนเชื่อมโยงกับเวิร์กโฟลว์ที่แตกต่างกัน (เช่น 1.x และ 2.x) ดังนั้นการบำรุงรักษาทั้งคู่จึงไม่น่าเป็นไปได้ และแน่นอนว่าเมื่อเวลาผ่านไป คุณย่อมต้องการหน้าร้านที่ทันสมัย นักการตลาดและนักพัฒนาหลายคนตั้งตารอ Magento 2 แต่ก็มีผู้ใช้บางส่วนที่ไม่พอใจว่า Magento1 จะต้องสิ้นสุดการใช้งานในไม่ช้า เพราะพ่อค้าหรือผู้ใช้งานหลายคนก็พอใจที่จะใช้ Magento 1 อย่างสงบ เพราะการเปลี่ยนแปลงอาจนำมาซึ่งความยุ่งยากและค่าใช้จ่าย (มีเหตุผลมากมายที่จะอยู่บน 1.x แต่มีอีกมากมายที่ต้องอัพเกรดเป็น 2.x)
