$30 off During Our Annual Pro Sale. View Details »

Transforming a PHP Team into PWA Superheroes

Transforming a PHP Team into PWA Superheroes

I share our ongoing journey, as a Magento focussed agency, from a team of mostly PHP developers to a team capable of delivering PWA frontends: What we did, how we learned, what worked so far and what not.

Original HTML version (looks a bit better): https://schmengler-se.de/slides/pwa-superheroes/

Fabian Schmengler

April 04, 2019
Tweet

More Decks by Fabian Schmengler

Other Decks in Technology

Transcript

  1. Transforming a PHP Team into
    PWA Superheroes
    (Stories & Fairytales)

    View Slide

  2. @fschmengler
    Fabian Schmengler
    Software Architect
    E-Commerce made in Aachen

    View Slide

  3. PWA?
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  4. Addy Osmani, Google
    Progressive Web App
    “ Progressive Web Apps use modern web capabilities to deliver an
    app-like user experience. They evolve from pages in browser tabs to
    immersive, top-level apps, maintaining the web's low friction at every
    moment.
    -
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  5. Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  6. Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  7. integer_net 2015:
    Magento 1
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  8. integer_net 2017:
    Magento 2
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  9. Summer 2017
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  10. The Rise of The PWAs
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  11. The Rise of The PWAs
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  12. February 2018
    Our Journey Begins
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  13. Foundation & New Tools
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  14. Deity Partner Days
    First contact with the code
    Architecture discussions
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  15. Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  16. Hands on!
    Internal tools
    Product designer
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  17. Summer 2018: New
    project!
    Sold as PWA
    New Deity not yet ready for open source
    Using previous version unattractive
    Limited time until Go Live
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  18. Compromise
    Start with legacy Magento 2 frontend
    Replace parts with React.js apps, decouple
    Migration of frontend in mind for later phase
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  19. Preparation
    React.js Workshop
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  20. React Product
    Configurator
    Embedded in Magento Layout
    JSON data from backend
    State management
    Component hierarchy
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  21. API-driven React Checkout
    Customized checkout flow
    Using native Magento REST API
    Routing
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  22. Let's Hire An Expert to
    Help
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  23. React order history
    Fetch data from external API
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  24. Another Expert
    Greenfield development against API
    Small self-contained app
    Code reviews to understand and oversee
    Frictionless takeover
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  25. XP gathered
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  26. 2018: JS Conferences
    Reacticon
    enterJS
    dotJS
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  27. 2019: The real PWA
    project
    Migration from Magento 1
    Delayed since last year, no fixed deadline
    Client open for innovation
    Collaboration with experienced frontend freelancers
    Experiment: Deity Falcon vs. Vue Storefront

    View Slide

  28. The Future?
    Headless Magento
    Attractive for frontend developers
    PWA is here to stay
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  29. Summary:
    Learn
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  30. Summary:
    Try out
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  31. Summary:
    (Re)-Evaluate
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  32. Summary:
    Get help
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  33. Learn
    Try out
    (Re-)Evaluate
    Get Help
    Summary:
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  34. Thank you!
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide

  35. Image sources
    PWA Overview: Google (CC BY 3.0)
    Magento Superheroes: atwix.com
    Dilbert: dilbert.com
    Photos: pixaby.com (Pixaby Licence, free for commercial usage)
    Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler

    View Slide