Headless in the CMS

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

Transcript

1. View Slide

2. Leipzig, 23.05.2017
   Marcel Kempf & Carsten Sandtner
   // mediaman GmbH
   HEADLESS IN THE CMS
   

   View Slide

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
   

   View Slide

4. Copyright © mediaman.com | 4
   24.05.17
   HELLO WE ARE MEDIAMAN
   

   View Slide

5. Copyright © mediaman.com | 5
   24.05.17
   130 digital specialists worldwide
   § Founded in 1996
   § Locations in Mainz, Stuttgart,
   Shanghai, and Boston
   ABOUT US
   

   View Slide

6. Focus: We are specialised in servicing the automotive, finance, insurance
   and manufacturing industries.
   

   View Slide

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
   

   View Slide

8. Copyright © mediaman.com | 8
   24.05.17
   Derivation Architecture
   Lessons
   learned
   

   View Slide

9. Copyright © mediaman.com | 9
   24.05.17
   Derivation Architecture
   Lessons
   learned
   

   View Slide

10. The Beginning
    © Greg Rakozy
    https://unsplash.com/photos/oMpAz-DN-9I
    

    View Slide

11. Our Challenges
    © W. Carter https://commons.wikimedia.org/wiki/File:Red_and_blue_pill.jpg
    

    View Slide

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
    

    View Slide

13. Our preferred solution
    

    View Slide

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
    

    View Slide

15. Excursion: OneWeb
    

    View Slide

16. Why OneWeb?
    

    View Slide

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
    

    View Slide

18. The Challenge
    © Sonny Abesamis: https://flic.kr/p/ed4vHr
    

    View Slide

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
    

    View Slide

20. The Content Management System
    

    View Slide

21. Copyright © mediaman.com | 21
    24.05.17
    Typo3 as CMS
    § Good documentation
    § Active community
    § Known technology
    § Easy migration
    § An API
    ✓
    ✗
    ✓
    ✓
    ✓
    

    View Slide

22. The Shop System
    

    View Slide

23. Magento or Magento 2?
    

    View Slide

24. Copyright © mediaman.com | 24
    24.05.17
    Magento 2 as shop system
    § Good documentation
    § Active community
    § Known technology
    § An API
    § Easy migration
    ✓
    (✓)
    ✓
    ✓
    

    View Slide

25. Possible solution(s)
    © Gerwin Sturm: https://flic.kr/p/7zsLdk
    

    View Slide

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?
    

    View Slide

27. Our Solution
    © Miguel Á. Padriñán
    https://www.pexels.com/photo/mathematics-colorful-game-color-19677/
    

    View Slide

28. Copyright © mediaman.com | 28
    24.05.17
    Derivation Architecture
    Lessons
    learned
    

    View Slide

29. Copyright © mediaman.com | 29
    24.05.17
    Overview
    Hosting
    Backend
    Version 2.x
    OneWeb
    Frontend
    

    View Slide

30. Copyright © mediaman.com | 30
    24.05.17
    Magento
    TYPO3
    Highlevel architecture
    TYPO3 Magento
    Redis
    Browser
    REST
    Cache Magento REST
    Responses using Tags
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. Typo3
    

    View Slide

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
    

    View Slide

36. 11 Extensions
    

    View Slide

37. ~25 Templates
    

    View Slide

38. Magento 2
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. Copyright © mediaman.com | 42
    24.05.17
    Necessary add-ons
    MAGENTO 2 - ARCHITECTURE
    § PayPal Plus
    § Follow-Up E-Mails
    § Multiple coupons
    

    View Slide

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
    

    View Slide

44. Copyright © mediaman.com | 44
    24.05.17
    Tests FTW!
    MAGENTO 2 - ARCHITECTURE
    § TDD approach
    – Think before you code
    – Secure refactoring
    – Better architectures
    – Fun!
    

    View Slide

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
    

    View Slide

46. Copyright © mediaman.com | 46
    24.05.17
    Workflow – Content Management
    MAGENTO 2 - ARCHITECTURE
    Editor Staging Production
    Content Sync
    

    View Slide

47. Copyright © mediaman.com | 47
    24.05.17
    Derivation Architecture
    Lessons
    learned
    

    View Slide

48. Lessons learned
    

    View Slide

49. View Slide

50. Early adopters hard life
    © Lisa Larsen:
    https://pixabay.com/en/staniel-cay-swimming-pig-seagull-171908/
    

    View Slide

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
    

    View Slide

52. Copyright © mediaman.com | 52
    24.05.17
    Extensions
    § Extensions may not exist
    § Extensions may not be ready
    
    EARLY ADOPTERS HARD LIFE
    

    View Slide

53. Being headless
    © Carson Arias:
    https://unsplash.com/photos/7Z03R1wOdmI
    

    View Slide

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
    

    View Slide

55. In summary
    

    View Slide

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!
    

    View Slide

57. Leipzig, 23.05.2017
    Marcel Kempf Carsten Sandtner
    @casarock
    sandtner@mediaman.de
    THANK YOU!
    

    View Slide