Headless Magento 2 Resources

The App Shell Model  (https://developers.google.com/web/fundamentals/architecture/app-shell) คุณสามารถค้นหาข้อมูลที่สำคัญเกี่ยวกับ application shell เป็นดีไซร์มาตรฐานสำหรับ headless apps

เข้าสู่ Headless (https://github.com/ishakhsuvarov/going-headless)

พื้นที่เก็บข้อมูลที่สร้างในช่วง Imagine 2017 DevExchange มีแนวคิดหลากหลายเกี่ยวกับการใช้งาน Web API ของ Magento กับ custom frontend, Headless Magento 2และ จุดสำคัญรวมถึงจุดผิดพลาดของ Web API และการพัฒนา

Headless Magento และส่วนขยาย (https://alankent.me/2016/12/14/headless-magento-and-extensions/)

หากคุณเป็นผู้พัฒนาส่วนขยายของ Magento 2 คุณจะพบคำตอบของทุกคำถามที่เกี่ยวกับ third-party modules และ Headless Magento ในบทความนี้ นอกจากนี้ Alan Kent ยังได้แบ่งปันความคิดของเขาเกี่ยวกับ Headless Magento 2 ด้วย

CMS API ใน Mage2 (http://davidmanners.de/cms-api-in-mage2) 

การสาธิตวิธีเพิ่มและแก้ไขหน้า CMS ผ่าน REST API ที่สร้างขึ้นใน Magento 2 บทความนี้จะเน้นไปที่วิธีการสร้างและแก้ไขหน้า CMS

MageSDK (https://github.com/KickAssCommerce/magesdk)

wrapper PHP สำหรับ Magento 2 API ที่ให้ความสะดวกในการดึงและตั้งค่าข้อมูล

Mamas & Papas(http://www.mamasandpapas.ae/)  OUNASS (http://www.ounass.com/)

ร้านค้าที่พัฒนาโดยใช้ Headless Magento

คำอธิบายเกี่ยวกับ Magento 2 PWA

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

Magento 2 PWA จะ install และรันโค้ดอย่างรวดเร็วบนอุปกรณ์ของผู้ใช้งาน  และความสามารถที่เพิ่มขึ้นเมื่อเปรียบเทียบกับ “single-page JavaScript apps”ในอดีต ในขณะเดียวกันมันก็ยังเป็นเว็บ Magento 2 PWA เขียนผ่าน HTML, CSS และ JavaScript languages ของเวบ  ไม่มีการใช้ภาษาเฉพาะ หรือ native frameworks ในแพลตฟอร์มเดียว มันยังแสดงผลด้วย lazy-loads เพื่อประสานตัวเองให้สอดคล้องกับผู้ใช้งาน

Magento 2 PWA นั้นดีกว่าเว็บไซต์อื่นที่มีความเร็วในระดับดี  เนื่องจากเหตุผลดังต่อไปนี้

  • The network traffic จะลดลง เนื่องจากมันจะยังทำงานได้ แม้ว่าไม่ได้เชื่อมต่ออินเตอร์เนต และในกรณีที่เกิดการเชื่อมต่ออินเตอร์เนตช้า ผู้ใช้งานก็ยังโต้ตอบกับเวบแอฟพลิเคชั่นได้ อย่างมีประสิทธิภาพ นอกจากนี้การโหลดหน้าแรก ยังเป็น shell document ขนาดเล็ก, มีการรับส่งข้อมูลผ่านเว็บผ่าน HTTPS, ServiceWorker ทำหน้าที่แคชข้อมูล ทำให้โหลดหน้นเพจได้รวดเร็วขึ้น
  • เทคนิค Non-blocking ถูกใช้เพื่อรักษาการตอบสนองของ UI ที่ 60fps และให้ประสบการณ์เช่นเดียวกับแอพที่แท้จริง
  • ServiceWorker ทำหน้าที่เหมือนลูกค้าอัจฉริยะ ที่ไม่ต้องการ network traffic ในการโต้ตอบ
  • ทำหน้าที่เป็นแอพที่สามารถใช้งานได้บนหน้าจอหลักพร้อมกับแอพทั่วไป

สำหรับเครื่องมือ ค่อนข้างเป็นมิตรกับ Developer  แนวคิดการออกแบบขั้นต้นเกือบทั้งหมดใส่ใจเกี่ยวกับประสบการณ์ของ Developer เพื่อความสำเร็จในการพัฒนา ทีมเบื้องหลังของโปรเจคนี้ อาศัยการใช้ประเด็นสำคัญต่างๆ ที่เกิดจากการพูดคุย สนทนา ถกเถียงหัวข้อสำคัญ กับ Magento community ซึ่งมีทั้ง Developer ทั่วโลก, ผู้เชี่ยวชาญ JavaScript, ผู้ที่ชื่นชอบ CSS, ผู้ฝึกสอนที่มีชื่อเสียง, ผู้นำทางธุรกิจที่โดดเด่น, full-stack developers ที่มีประสบการณ์ แนวคิดเบื้องหลัง Studio คือการทำให้การพัฒนา Magento 2 เป็นไปได้สำหรับผู้เชี่ยวชาญทุกคน

Magento 2 PWA & แนวคิดหลัก

  • API Layer คุณอาจจะประทับใจกับ Magento REST API ที่ค่อนข้างจะครอบคลุม แต่เตรียมพร้อมสำหรับการครอบคลุมที่มากกว่ากับ PWA Studio เพราะมันต้องการขั้นตอน API ใหม่ มีการวางแผนจุดหมายของประสิทธิภาพ API ที่มากกว่า จึงมีโอกาสที่จะมีการเพิ่มรูปแบบ  API ใหม่ เพื่อการตอบสนองที่กำหนดเองมากขึ้น
  • Application Shell Application Shell ทำงานกับ CSS และข้อมูลทั่วโลก นอกจากนี้ยังได้รับการออกแบบมาเพื่อจัดการ UI ที่น้อยที่สุดระหว่างการโหลด ต้องกล่าวถึงว่า App Shell รับผิดชอบ  JavaScript file , bootstrap , PWA runtime และ การโหลดข้อมูล
  • Application Framework

Magento PWA Studio แนะนำวิธีที่ดีที่สุดในการใช้ Magento store ใน “headless mode” ดังนั้นคุณจะได้รับ single-page JavaScript applications ที่ทำงานบนเฟรมเวิร์ก JavaScript ใหม่ ซึ่งจะนำไปสู่สิ่งใหม่ๆ

– รูปแบบ “unidirectional data flow” กับ pure components

-ใช้ ReactJS เพื่อทำRender และจัดการเหตุการณ์ทั้งหมด

-ใช้ Redux ในการจัดการสถานะที่ใช้ร่วมกันทั้งหมด และ core library ของฟังก์ชั่น Redux reducer

– เป็นไปได้ที่จะใช้โมดูล CSS  และแยก / กำหนดสไตล์ชีทให้กับส่วนประกอบ

– การทดสอบส่วนประกอบ และการกระทำเกี่ยวข้องกับ Jest และ Storybook

– เมื่อต้องการรวบรวมการกำหนดค่าร้านค้าล่วงหน้าลงใน Fronted เครื่องมือจะสร้าง, bundles  และ minifies ด้วย Webpack ที่ได้รับการปรับปรุงด้วย loaders และ plugins ที่กำหนดเอง

Developer experience

ดังที่ได้กล่าวไปแล้วสิ่งสำคัญอันดับหนึ่งของ Magento 2 PWA คือประสบการณ์ของนักพัฒนา  เครื่องมือที่สมบูรณ์จะช่วยปรับปรุงสิ่งต่างๆ อย่างเหมาะสม

  • React

ใช้สำหรับ JavaScript ดังนั้น  Magento PWA Studioจะทำ “React apps.” ดังนั้นคุณอย่าลืมเตรียมตัวให้พร้อมสำหรับประสบการณ์นี้  ที่จะช่วยให้เข้าถึงชุมชนได้กว้างขึ้น

สุดท้าย

อย่าเพิ่งสรุปว่า Magento 2 PWA และ Headless Magento 2  นั้นคล้ายกับ “applets” เพราะความจริงแล้วมันตรงกันข้ามกันอย่างสิ้นเชิง  Magento 2 PWA และ Headless Magento 2   ไม่เพียงรองรับ SEO  แต่ยังมีพื้นที่สำหรับการเพิ่มประสิทธิภาพอีกด้วย นอกจากนี้ Magento 2 PWA shop สามารถให้การสื่อสารระหว่างหลายแท็บของเวบไซต์และทำให้พวกเขาพูดคุยกับเซิร์ฟเวอร์เป็นแอปพลิเคชันเดียว ในขณะที่ใช้ทรัพยากรน้อยลง แต่  Magento 2 PWA และ Headless Magento 2   ทำให้ลูกค้าได้รับประสบการณ์ที่ดีขึ้น