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)
2. @fschmengler Fabian Schmengler Software Architect E-Commerce made in Aachen
3. PWA? Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
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
5. Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
6. Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
7. integer_net 2015: Magento 1 Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
8. integer_net 2017: Magento 2 Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
9. Summer 2017 Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
10. The Rise of The PWAs Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
11. The Rise of The PWAs Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
12. February 2018 Our Journey Begins Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
13. Foundation & New Tools Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
14. Deity Partner Days First contact with the code Architecture discussions Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
15. Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
16. Hands on! Internal tools Product designer Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
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
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
19. Preparation React.js Workshop Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
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
21. API-driven React Checkout Customized checkout flow Using native Magento REST API Routing Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
22. Let's Hire An Expert to Help Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
23. React order history Fetch data from external API Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
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
25. XP gathered Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
26. 2018: JS Conferences Reacticon enterJS dotJS Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
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
28. The Future? Headless Magento Attractive for frontend developers PWA is here to stay Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
29. Summary: Learn Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
30. Summary: Try out Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
31. Summary: (Re)-Evaluate Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
32. Summary: Get help Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
33. Learn Try out (Re-)Evaluate Get Help Summary: Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
34. Thank you! Fabian Schmengler /> Transforming a PHP Team into PWA Superheroes @fschmengler
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