Tractor Store 2.0 - TodoMVC for Micro Frontends

Presentation at the Micro Frontends Conference 2024
https://conference.microfrontends.cloud/2024

Learn more about the Tractor Store
https://micro-frontends.org/tractor-store/

Transcript

1. a non-trivial micro frontends example 2.0 Michael Geers, neuland Büro für Informatik Micro Frontends Conference 2024
2. Work neuland Büro für Informatik, Bremen E-Commerce & Verticalized Architectures Who am I? Michael Geers 👨💻 Software Engineer 📐 Frontend Architect 💚 Web Technology Fanboy Author 📕 Micro Frontends in Action, Manning 📝 micro-frontends.org
3. tractor store 2.0 new community project
4. 🏫 learning
5. 🔬 by looking at stu f
6. micro-frontends.org original tractor store
7. micro-frontends.org original tractor store
8. 📕🚜🧑💻 sample code
9. 1 concept ≙ 1 code sample 👓 focus is important for understanding
10. the-tractor.store book examples
11. 🧩 big picture 🧩 🧩
12. 💫 new project new architecture new tech-stack new platform micro frontends *
13. 🤷 lots of decisions make or buy app shell Which framework? Design system _____ federation? csr, ssr, mpa, sspa? deployment documentation shared code? discovery Communication testing Migration
14. 🧫 proof of concepts
15. 🧫 proof of concepts ugly, but functional
16. good UX & DX? 👩💻 🛍
17. 📝 architecture rules guidelines docs Abstract Theoretical Hard to understand
18. June 3, 2011 fi rst commit Addy Osmani
21. https:/ /tastejs.com/movies/
23. same data TMDB :D different look :/ similar features
24. I’ve been researching
25. github.com/gioboa/qwik-microfrontends youtube.com/watch?v=nMrTOVy6OOE micro frontends with qwik
26. I’d love to see more larger micro frontends examples.
27. The Tractor Store 2.0
28. blueprint.the-tractor.store
29. blueprint.the-tractor.store
30. 23 models 48 color variants
31. 23 models 48 color variants
32. 23 models 48 color variants SmartFarm Titan Sunset Copper
33. classic & autonomous
34. 3 teams Team Explore Mission Help users explore the tractor portfolio and stores locations. Responsibility home, product lists, stores, recommendations Team Decide Mission Help users decide what model tractor they should choose. Responsibility product page Team Checkout Mission Guide users through the checkout process. Responsibility cart, checkout, thanks
35. new features & shiny
36. ☑ toggle team boundaries
37. ☑ toggle team boundaries
38. 🗺 navigation inside & across team boundaries
39. 🗺 navigation inside & across team boundaries
40. 🤼 interaction between teams color change reco updates add to cart mini cart store picker
41. 🤼 interaction between teams color change reco updates add to cart mini cart store picker
42. 🎊 confetti on success
43. 🎊 confetti on success
44. lighthouse score 💯
45. about the project build your own
46. 🎎 two implementations
47. github.com/neuland/tractor-store-blueprint blueprint.the-tractor.store Blueprint modular monolith
48. github.com/neuland/tractor-store-blueprint blueprint.the-tractor.store Blueprint modular monolith
49. github.com/neuland/tractor-store-preact no live demo yet Preact SPA + SSR Declarative Shadow DOM
50. 💾 database per team .json
51. 🎨 css, html and components
52. server client-side OR And
53. README template Specs
54. 🍬 🛍 bonus tasks
55. 🍬 shared design system Redundant fancy button code
56. 🛍 introduce fourth team
57. 🛍 introduce fourth team owns reco Inspire
58. micro-frontends.org/tractor Learn more
59. micro-frontends.org/tractor Learn more
60. Get in contact! need help? Thanks for Listening Michael Geers @naltatis
61. thanks Fabricius @briziel
62. tractor examples manufactum.com why?