# Magento in an Apollo Federation

# Jisse Reitsma - <!-- .element: class="fragment" -->Founder of Yireo - <!-- .element: class="fragment" -->Trainer of developers - <!-- .element: class="fragment" -->Creator of MageTestFest (2017, 2019) - <!-- .element: class="fragment" -->Creator of Reacticon (2018 x2) - <!-- .element: class="fragment" -->Creator of Reacticon v3 (June 2021) - <!-- .element: class="fragment" -->Magento Master 2017/2018/2019 Mover - <!-- .element: class="fragment" -->Member of ExtDN (Magento Extension Developer Network)

# Magento legacy - <!-- .element: class="fragment" -->Monolithic architecture - Magento 1 and Magento 2 were designed as full service applications - Frontend, backend, API, CLI - all part of the same system - Modularity was not always designed properly with heavy coupling as a result - <!-- .element: class="fragment" -->Frontending in Magento 2 is horrible - XML, PHTML, KnockoutJS, RequireJS, jQuery, custom JS - all mixed in a deadly cocktail - Hard to modify, difficult to debug and slow as hell - Frontend is slowly becoming deprecated - <!-- .element: class="fragment" -->Magento 2.4 introduces SOA and many other cool features - SOA: Service Oriented Architecture - Not necessarily microservice, but more like independent services - This will take a long time to implement, even longer to get rid of the legacy - <!-- .element: class="fragment" -->Magento is now owned by Adobe - Adobe is not making money of open source shops - Most effort goes into adding new advanced features, instead of cleaning up old stuff

# Ha ha, those Magento people

# Magento goes headless - <!-- .element: class="fragment" -->Magento 2.3 introduced GraphQL API - Support for catalog, checkout, customer, etc - <!-- .element: class="fragment" -->Magento is working on its own PWA Studio toolbox - React, Redux, Apollo Client, GraphQL - <!-- .element: class="fragment" -->Competitors are busy as well - Vue Storefront, FrontCommerce, DEITY, ScandiPWA

# Kudos to those Magento people

# Direct benefits of headless - Easier frontend development - Better performance - Use a proper CMS for content - Breaking up application is smaller pieces

# Breaking up an e-commerce monolith - Catalog - Inventory - Checkout - Sales Processing - Image management - Content management (CMS) - Marketing rules - SEO - ...

# Potential other microservices - Product Information Management (PIM) - Caching service - Price calculation - Alternative inventory & stock - VAT verification - Email verification - Dealers / retailer information - Complex product options - Promos and advertizing - Image optimization - Product image provider

# The GraphQL story - <!-- .element: class="fragment" -->Make all microservices talk GraphQL - We don't need a Universal Translator - <!-- .element: class="fragment" -->Different languages, different server packages - Node: Apollo, Relay - PHP: Webonyx, GraphQLite - <!-- .element: class="fragment" -->Let a frontend talk GraphQL too - Vue, React, Angular - Apollo, Relay, Axios - <!-- .element: class="fragment" -->Use Apollo Gateway and Apollo Federation

# The federation - Basically Apollo Gateway with multiple microservices - Separation of Concerns - Principled GraphQL - Distributed GraphQL - Unified graph with a schema registry

# Why Apollo Federation? - Easily merge schemas into single federated graph - Schema stitching simplified - Slowly migrate backend sources from one service to another - Modifying requests and responses - Maintain schema registry within Apollo Graph Manager or by yourself

# Scenario with Magento - <!-- .element: class="fragment" -->Build headless shop with Magento 2 - <!-- .element: class="fragment" -->Connect frontend to Apollo Gateway - <!-- .element: class="fragment" -->Apollo Gateway connects to Magento - <!-- .element: class="fragment" -->Slowly migrate responsibility away from Magento 2 - <!-- .element: class="fragment" -->Apply theory of Principled GraphQL

# Maybe not a goal on itself # but at least something to consider

# Thanks ## Contact me via @jissereitsma or @yireo