Headless in the CMS

Headless in the CMS

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

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

May 23, 2017
Tweet

Transcript

  1. None
  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

  49. None
  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!