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/

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