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 ทำให้ลูกค้าได้รับประสบการณ์ที่ดีขึ้น
