Magento 2 PWA Studio

Table of Contents

Magento 2 PWA Studio

ด้านล่างนี้เราได้รวบรวมข้อเท็จจริงและความคิดที่สำคัญบางอย่างเกี่ยวกับ native Magento 2 PWA และ 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)

Scroll to Top