Headless in the CMS

Slides of our talk at Meet Magento 2017 in Leipzig about getting Magento 2 headless into Typo3.

2. Leipzig, 23.05.2017 Marcel Kempf & Carsten Sandtner // mediaman GmbH HEADLESS IN THE CMS
3. Copyright © mediaman.com | 3 24.05.17 about:us HEADLESS IN THE CMS Marcel Kempf Software Developer at mediaman GmbH // Carsten Sandtner Technical Director at mediaman GmbH // @casarock
4. Copyright © mediaman.com | 4 24.05.17 HELLO WE ARE MEDIAMAN
5. Copyright © mediaman.com | 5 24.05.17 130 digital specialists worldwide § Founded in 1996 § Locations in Mainz, Stuttgart, Shanghai, and Boston ABOUT US
6. Focus: We are specialised in servicing the automotive, finance, insurance and manufacturing industries.
7. Copyright © mediaman.com | 7 24.05.17 We are proud of the trustworthy and dependable relationships with our numerous longstanding customers. ÜBER UNS Automotive Finance Industrial Consumer
8. Copyright © mediaman.com | 8 24.05.17 Derivation Architecture Lessons learned
9. Copyright © mediaman.com | 9 24.05.17 Derivation Architecture Lessons learned
10. The Beginning © Greg Rakozy https://unsplash.com/photos/oMpAz-DN-9I
11. Our Challenges © W. Carter https://commons.wikimedia.org/wiki/File:Red_and_blue_pill.jpg
12. Copyright © mediaman.com | 12 24.05.17 Challenges § Several multilanguage CMS instances – Mass of corporate content § Overtake existing shop § Existing independant systems (CMS, Shop) § Connect PIM
13. Our preferred solution
14. Copyright © mediaman.com | 14 24.05.17 Preferred solution SOLUTION § One user interface to the customer § One system is responsible for content delivery § Everything else is being used with an API
15. Excursion: OneWeb
16. Why OneWeb?
17. Copyright © mediaman.com | 17 24.05.17 Website and shop melt into OneWeb ONEWEB OneWeb Website Shop Content • Product experience • Productfinder • Campaign • Passion though inspiring content • Excellent UX • Dealer Locator • Company presentation Shop • Buy products or save on wish list • Conversion • Lead generation • Cross- and upselling • Payment • Personal account Overall • Multilanguage, responsive, SEO optimized
18. The Challenge © Sonny Abesamis: https://flic.kr/p/ed4vHr
19. Copyright © mediaman.com | 19 24.05.17 Requirements THE CONTENDERS § Good documentation § Active community § Known technology § An API § Migration of existing contents should be easy
20. The Content Management System
21. Copyright © mediaman.com | 21 24.05.17 Typo3 as CMS § Good documentation § Active community § Known technology § Easy migration § An API ✓ ✗ ✓ ✓ ✓
22. The Shop System
23. Magento or Magento 2?
24. Copyright © mediaman.com | 24 24.05.17 Magento 2 as shop system § Good documentation § Active community § Known technology § An API § Easy migration ✓ (✓) ✓ ✓
25. Possible solution(s) © Gerwin Sturm: https://flic.kr/p/7zsLdk
26. Copyright © mediaman.com | 26 24.05.17 More considerations § Shop Extension for Typo3 – We need a real shop! ;) § CMS Plugin for Magento 2 – Migration of existing content pages isn‘t easy – Workflows?
27. Our Solution © Miguel Á. Padriñán https://www.pexels.com/photo/mathematics-colorful-game-color-19677/
28. Copyright © mediaman.com | 28 24.05.17 Derivation Architecture Lessons learned
29. Copyright © mediaman.com | 29 24.05.17 Overview Hosting Backend Version 2.x OneWeb Frontend
30. Copyright © mediaman.com | 30 24.05.17 Magento TYPO3 Highlevel architecture TYPO3 Magento Redis Browser REST Cache Magento REST Responses using Tags
31. Logitics Backend systems OneWeb External systems Warehouse Shipping ERP (SAP) Webshop (Magento) Website (Typo3) Product data Customer data Orders Prices Stock Product data NL Permission Orders Stock Customer data Prices Analytics Paypal+ Tracking Tracking Data Warehouse, DMS, PIM/CRM
32. Copyright © mediaman.com | 32 24.05.17 Planned Infrastucture Typo3 (4x EC2) auto scaling group Magento (4x EC2) Auto scaling group Amazon Aurora Amazon ElastiCache Amazon CloudFront Amazon S3 ELB ELB
33. Copyright © mediaman.com | 33 24.05.17 Current Infrastructure § Typo3: nginx, Redis, MySQL § Magento 2: nginx, MySQL Production Magento 2 Typo3 Firewall Staging Magento 2 Typo3 Firewall
34. Typo3
35. Copyright © mediaman.com | 35 24.05.17 Extensions TYPO3 Template Custom extensions by mediaman Third Party Extensions Custom content elements CSS, JS, Constants etc. Shared Shop Code Own Extensions
36. 11 Extensions
37. ~25 Templates
38. Magento 2
39. Copyright © mediaman.com | 39 24.05.17 Using Magento API MAGENTO 2 - ARCHITECTURE § Requests are proxied through Typo3 – no direct access to the Magento APIs § User is authenticated via a user token – Stored and appended by Typo3
40. Copyright © mediaman.com | 40 24.05.17 Which APIs where not included in the Magento core? MAGENTO 2 - ARCHITECTURE § Fetching/Creating reviews § Fetching rendered blocks § Fetching (full) related products by relation type – Related Products/Up- and Cross-Sells § Newsletter interactions § Password reset § Wishlist interactions
41. Copyright © mediaman.com | 41 24.05.17 Which APIs where not included in the Magento core? MAGENTO 2 - ARCHITECTURE § No filter for only in-stock products § No filter for configurable products
42. Copyright © mediaman.com | 42 24.05.17 Necessary add-ons MAGENTO 2 - ARCHITECTURE § PayPal Plus § Follow-Up E-Mails § Multiple coupons
43. Copyright © mediaman.com | 43 24.05.17 API-Only and 3rd Party add-ons MAGENTO 2 - ARCHITECTURE § Templates cannot be used – Have to be written again in Typo3 § APIs often don’t offer enough functionality § Session based authentication has to be changed to token based – Many plugin and preference classes
44. Copyright © mediaman.com | 44 24.05.17 Tests FTW! MAGENTO 2 - ARCHITECTURE § TDD approach – Think before you code – Secure refactoring – Better architectures – Fun!
45. Copyright © mediaman.com | 45 24.05.17 Communication with ERP (SAP) MAGENTO 2 - ARCHITECTURE Magento SAP Synchronized Customer has own SAP ID User data and orders Master for stock and prices
46. Copyright © mediaman.com | 46 24.05.17 Workflow – Content Management MAGENTO 2 - ARCHITECTURE Editor Staging Production Content Sync
47. Copyright © mediaman.com | 47 24.05.17 Derivation Architecture Lessons learned
48. Lessons learned
50. Early adopters hard life © Lisa Larsen: https://pixabay.com/en/staniel-cay-swimming-pig-seagull-171908/
51. Copyright © mediaman.com | 51 24.05.17 Magento 2 Core System § Some features may not be ready yet § Community is not that big § There may be bugs… ! EARLY ADOPTERS HARD LIFE
52. Copyright © mediaman.com | 52 24.05.17 Extensions § Extensions may not exist § Extensions may not be ready EARLY ADOPTERS HARD LIFE
53. Being headless © Carson Arias: https://unsplash.com/photos/7Z03R1wOdmI
54. Copyright © mediaman.com | 54 24.05.17 Going API only § Where are my templates? § Extensions may not have an API § What does it mean “You can not use the Extensions Template”? BEING HEADLESS
55. In summary
56. Copyright © mediaman.com | 56 24.05.17 In summary § Being early adaptor is hard § Headless means: – You have to rebuild many existing processes in the CMS – Extensions and add-ons are not meant to be used headless! – Shop templates have to be rebuilt (every single one…) § But headless means, too – You are able to build content rich pages within your shop – Marketing will love you ;) § It was a tough but interesting ride!
57. Leipzig, 23.05.2017 Marcel Kempf Carsten Sandtner @casarock sandtner@mediaman.de THANK YOU!