#MM17RO

Headless Magento

Sander Mangel

#MM17RO

• Magento developer• Lead @ FitForMe• Co-organiser MMNL,

Unconf, MageStackDay, Meetups

• Avid community member

twitter.com/sandermangellinkedin.com/in/sandermangelgithub.com/sandermangel

#MM17RO

#MM17RO

What is headless architecture

"Headless architecture means an application offering APIs that abstract away business logic

for a multitude of clients to consistently and repeatedly execute the same tasks."

#MM17RO

Read more

http://bit.ly/2qo6XBchttp://bit.ly/1Wku9c0http://bit.ly/2rtVIashttp://bit.ly/2qrkQKPhttp://bit.ly/2hyM6Dy

#MM17RO

Putting it into practice

#MM17RO

#MM17RO

#MM17RO

?

#MM17RO

Common integrations

● ERP

● Fulfillment

● Logs

● Email server

● ….

#MM17RO

Clients

● Magento backend

● Magento frontend

● Legacy system

● Dashboards

● Magento 2?

#MM17RO

So we take a different approach

• Magento will be a client & provide data

• Implement a basic data warehouse

• Which is fed by, and queried by various services separated by domains

• Isolate data & business logic per domain

That allows for a smooth integration

#MM17RO

#MM17RO

generators

Leverage middleware for a stable environment

storage

generators consumer

● Normalize & combine data

● Offer stable APIs for clients

● Insulate from future changes

consumer

exposing

#MM17RO

#MM17RO

Incoming data

#MM17RO

Build on standardised libraries

● There is a solution for everything

already out there

● Use popular libraries, preferably

adhering to a PSR protocol

● Don't overcomplicate dependency

injection

● Think carefully about what you need

and spend time finding the best

option

#MM17RO

Build on standardised libraries● slimphp - Routing, DI

● monolog - gives insight in what the service does

for monitoring and debugging

● cache/… - stores certain API calls, temporary data

● guzzle - offers a way to consume APIs over http

● illuminate/database - Laravel ORM (personal

preference)

● Insert-on-duplicate.... - not a default option in

illuminate/database but a must for me

● symfony/console - for cronjobs and commandline

tasks

● league/oauth1-client - offers built in Magento 1

REST integration

[...] "require": { "php": ">=7.0", "slim/slim": "^3.1", "monolog/monolog": "^1.17", "cache/filesystem-adapter": "^0.4.0", "guzzlehttp/guzzle": "^6.2", "cache/array-adapter": "^0.5.0", "illuminate/database": "^5.4", "yadakhov/insert-on-duplicate-key": "^1.1", "symfony/console": "^3.3", "league/oauth1-client": "^1.7" } [...]

#MM17RO

Build on standardised libraries

● SlimPHP project as basis

● One module in src some basic

setup files needed by SlimPHP

● Keep it simple and self-contained

#MM17RO

Some learnings

● Single purpose

● Keep it simple

● Separate tasks

● Async data transformation

● Stateless

● Document, document, document

● Integration tests

● Log everything

#MM17RO

Storing data

#MM17RO

Database

● Percona

○ Relational

○ Easy to work with

○ Offers good performance up to 1TB

data

● Elastic

○ REST output

○ Plug and play

○ Advanced search

#MM17RO

Moving to AWS

● Multiple RDS database

● With redundancy

● Leveraging PostGres benefits like

JSON-B

#MM17RO

Exposing data

#MM17RO

Exposing data

● Easy to integrate

● Offer sorting, filtering, and a host of

other query options

● Completely decoupled from write

● Standardized & easily scalable

#MM17RO

Standardizing?

● Output format and syntax

● Filtering and sorting

● Caching

#MM17RO

Standardizing?

● Output format and syntax

● Filtering and sorting

● Caching

?

#MM17RO

Enabling various integrations

protected function _prepareCollection(){[...] try { $client = new Client(); $res = $client->request('GET', $helper->getBaseUrl(0) . 'quarantine?'. http_build_query([ 'limit' => $limit, 'page' => $page, 'sort' => $columnId, 'sortdir' => $dir, 'filters' => (array)$filter, '', '&')); } catch (\Exception $error) { Mage::logException($error); $this->setCollection($collection); // set a dummy empty collection return $this; }

$data = json_decode($res->getBody(), true); $lastPage = $data['to'];

array_walk($data['data'], function($order) use (&$collection) { $collection->addItem( new Varien_Object( [ 'shipping_date' => $order['shipping_date'], 'order_reference' => $order['order_reference'], 'customer_reference' => $order['customer_reference'], 'updated_at' => $order['updated_at'], 'shipping_fullname' => "{$order['shipping_firstname']} {$order['shipping_middlename']} {$order['shipping_lastname']}", ] ) ); }); $collection->setCurPage($page); $collection->setLastPageNumber($lastPage); $collection->setSize($lastPage * $limit); $this->setCollection($collection);

● Magento 1 grids

● Ajax calls for smaller values

● Data imports

● Communication between services

● ...

#MM17RO

Caching

● How dynamic is dynamic content

● Cache is all about control

● Think of a strategy upfront

● Don't leave it up to the client

#MM17RO

Caching

● How dynamic is dynamic content

● Cache is all about control

● Think of a strategy upfront

● Don't leave it up to the client

https://github.com/magespecialist/m2-M

SP_APIEnhancer

Magento 2 API enhancer

#MM17RO

Hosting

#MM17RO

Monolithic

● Dedicated / VPS server

○ Offered by all hosting

companies

○ Easy to maintain

○ Does not scale easily

○ If one goes down...

Distributed

● Instances on a cloud

○ Scales easily

○ Environments are isolated

○ Requires more knowledge

○ Can be harder to

administrate

#MM17RO

Distribution requires a gateway

#MM17RO

API gateway● Allow for easy service discovery

● Handle authentication, call rate limiting

● Routing

- http://microservices.io/patterns/apigateway.html

- https://www.nginx.com/blog/building-microservic

es-using-an-api-gateway/

#MM17RO

API gateway● Allow for easy service discovery

● Handle authentication, call rate limiting

● Routing

- http://microservices.io/patterns/apigateway.html

- https://www.nginx.com/blog/building-microservic

es-using-an-api-gateway/

#MM17RO

Summary● By offloading tasks from Magento we keep

it fast and lightweight

● Storing data in a central place and making

it available via REST apis makes for easy

integration

● Headless can start by adding some of

those APIs to the existing back- or frontend

● Using lightweight php frameworks with

limited features makes for easy to develop

and fast applications

Example repohttps://github.com/sandermangel/headless-middleware

Talk code to metwitter.com/sandermangel

github.com/sandermangel

Other talks on Magento and HeadlessIntegrating a ReactJS frontend in Magento 2

- Riccardo Tempesta (http://bit.ly/2yn3bL0)

Deity ReactJS & NodeJS frontend

- Jamie Scholten, Hatimeria (http://bit.ly/2giriUr)