Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA...
Transcript of Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA...
![Page 1: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/1.jpg)
![Page 2: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/2.jpg)
Christopher DanielZilker Technology
Magento and APIs
![Page 3: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/3.jpg)
❖ Associate Consultant Zilker Technology
❖ Magento Certified Full Stack Developer
❖ PWA Studio contributor
![Page 4: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/4.jpg)
Web API Development in Magento
AGENDA
● Why APIs
● REST - GraphQL - REST vs GraphQL
● Async and Bulk APIs
● The new Storefront API
![Page 5: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/5.jpg)
Web API Development in Magento
Why APIs?
• Headless storefronts (PWA studio, Vue Storefront, AEM
and other frontend implementations)
• The evolving Magento Architecture (Monolith to Service
Isolated Architecture)
• Better Developer Experience (Focus on business logic,
better documentation, decoupled backend and frontend)
![Page 6: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/6.jpg)
Web API Development in Magento
• SOAP, REST, GraphQL
• SOAP (Not widely used)
• REST (widely used now)
• GraphQL (gaining popularity)
What Magento Offers
![Page 7: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/7.jpg)
Web API Development in Magento
AGENDA
● Why APIs
● REST - GraphQL - REST vs GraphQL
● Async and Bulk APIs
● The new Storefront API
![Page 8: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/8.jpg)
REST
REST is not outdated,
It will drive the FUTURE with GraphQL
![Page 9: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/9.jpg)
REST
• Authentication with ACL
• Can be created in minutes from service
contracts
• CRUD Applications - Magento Admin
Panel
![Page 10: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/10.jpg)
GraphQL
![Page 11: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/11.jpg)
GraphQL
• GraphQl Adoption has improved mobile centric web.
• Stability of GraphQL in Magento
• Server side Caching, Support for Mutations, cacheable
Queries - Latest Improvements
• Magento 2.4 has core changes in GraphQL engine
Should I use GraphQL?
![Page 12: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/12.jpg)
GraphQL
• GraphQL can be used in Legacy Magento
frontend
• POC - Infinite Scroll from Mage2Tv
• Apollo Boost as magento module -
https://github.com/mage2tv/module-apollo-boo
st-amd
Is it only for PWA?
![Page 13: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/13.jpg)
REST VS GraphQL
REST GraphQL
Caching is handled by the browser Caching of Data should be done by the Client (Apollo Client)
Multiple Endpoints Single Endpoint, better Developer Experience
Over-fetching and Under-fetching of data (N+1 Problem), Works well in Magento Admin Panel
Optimised Fetching of Data through SQL styled Queries
API contracts can be shared via swagger GraphQL contract is shared with built in Introspection Schema
![Page 14: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/14.jpg)
REST VS GraphQL
REST GraphQL
Not strict Typed contract Strictly typed Contract, queries can be validated easily
No server side caching Server side caching can be done with Varnish / Fastly CDN
Asynchronous APIs are supported from 2.3
Asynchronous API support is not available as of now (Subscription)
Tools - Postman, Swagger Tools - ChromeIQL, GraphQL Playground, Altair GraphQL Client
![Page 15: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/15.jpg)
Web API Development in Magento
AGENDA
● Why APIs
● REST - GraphQL - REST vs GraphQL
● Async and Bulk APIs
● The new Storefront API
![Page 16: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/16.jpg)
Async and Bulk API
• REST API that runs async with the help of Message
Queues
• Async API accepts a single entity, Bulk accepts multiple
entities in payload
• Prevents database deadlocks, improved performance,
reduced CPU load and memory usage
![Page 17: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/17.jpg)
Async API Architecture 1A
Async and Bulk API
![Page 18: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/18.jpg)
Async API Architecture 1B
Async and Bulk API
![Page 19: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/19.jpg)
Async and Bulk API
• Fault Tolerance with ERP Systems
• Better Error Reporting
• Async Import
![Page 20: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/20.jpg)
Async and Bulk API Performance Chart
![Page 21: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/21.jpg)
Web API Development in Magento
AGENDA
● Why APIs
● REST - GraphQL - REST vs GraphQL
● Async and Bulk APIs
● The new Storefront API
![Page 22: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/22.jpg)
The Future of GraphQL
• Current Implementation has performance
issues, Complete rewrite of engine comes
in 2.4 (The storefront API)
• Complete Separation of frontend and
backend
The Storefront API
![Page 23: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/23.jpg)
Magento 2.4 proposed architecture 1A
The Storefront API
![Page 24: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/24.jpg)
Magento 2.4 proposed architecture 1B
The Storefront API
![Page 25: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/25.jpg)
Questions
![Page 26: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento](https://reader033.fdocuments.in/reader033/viewer/2022051915/60073cad9ecf8047a761352c/html5/thumbnails/26.jpg)
Thank You