Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA...

26

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
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

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

❖ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 25: Christopher Daniel · Web API Development in Magento Why APIs? • Headless storefronts (PWA studio, Vue Storefront, AEM and other frontend implementations) • The evolving Magento

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

Thank You