headless magentoro.meet-magento.com/wp-content/uploads/2017/10/sander-mangel-headless...magento...
TRANSCRIPT
#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)