Spas are dead Long Live Microfrontends
Download as PPTX, PDF0 likes400 views
Microfrontends are an approach to building frontend applications that aims to address some of the challenges of single page applications (SPAs) by splitting the application into independently deliverable components. Some benefits of the microfrontends approach include abstracting complexity away from developers, allowing faster deployment of modules, grouping teams by domain contexts, and allowing teams to choose their own technology stacks. Microfrontends break down a large application into smaller sub-applications or "microfrontends" that can be developed and deployed independently similar to a microservices architecture for backends.
Spas are dead Long Live Microfrontends
- 1. SPAs are dead…. Long live Microfrontends Vinci Rufus @areai51
- 2. 2 Prashant Nisheed Jessy Anand Anirvann Hari Kiran Imran Saurabh
- 4. 4
- 5. 5
- 6. 6
- 7. 7 A/B Testing Analytics Upgrading Regression Testing Continuous Deployment ..some other problems with SPAs
- 8. 8 Monoliths on top of Microservices Microservices API Gateway Single Page Apps (SPA)
- 10. 10 Customers don’t care about your SPA, They want a Single Page Experience
- 11. So what are Microfrontends? aka Frontend Microservices
- 12. 12 The term "Microservice Architecture" has sprung up over the last few years to describe a particular way of designing software applications as suites of independently deployable services. M A R T I N F O W L E R – M A R C H 2 0 1 4
- 13. 13 Abstract Complexity away from developers. Deploy modules quickly. Group Teams by domain contexts. Allow teams to choose their tech stack. Principles of Microservices
- 14. 14 Architecting Software is more like Constructing a Building Town Planning
- 15. 15 SinglePageApp STATE MANAGEMENT Actions Store Reducers Middleware ROUTING Routing Components Stateful Components Stateless Functional Components Templates Styling Browser Bundles bundle.js chunk01.js vendor.js chunk02.js Anatomy of a SPA
- 17. 17 Breaking Down your App
- 18. 18
- 19. 19 Routing • Custom APIs • Skipper (Mosaic 9) Assembler • Node JS • Tailor JS • Amalgam Parser Layouts HTML (CMS driven) MicroApps • Angular Elements • React • Vue JS • Web Components Package Manager • Monorepos • Lerna Styles • Encapsulated Styles • CSS Modules, • Emotion JS • Styled Components
- 20. 20 Building Great Software… It’s not just about Technology!
- 22. 22 Frontend Teams API teams Backend Teams Most Traditional Teams
- 23. 23 Micro Service Based Teams #FullStack Teams Homepage Team Search Team Products Team Cart Team
- 24. 24 Demo
- 25. 25 /header /products /featured Server Side Rendering (Options) Kubernetes /products /header /featured
- 26. 26
- 28. 28 CSR SSR
- 31. 31 App too big for a single person to have full knowhow. Teams have different sprints / deployment cycles. Stay Future Ready! Have strongly opinionated team members. ¯_(ツ)_/¯ Think about Microfrontends when?
- 32. 32 Who are building MicroFrontends
- 33. 33
- 34. 34 Thanks!!! @areai51 • Github.com/xt/nitro2 • Mosaic9.org/ • Opencomponents.github.io/
Editor's Notes
- #2: For WNIN
- #4: We love SPAs don’t we. A new framework launches very month showing how its better at building an SPA than the other frameworks We like to geek out on things like dynamic imports, webpack configs, code splitting / chunking.. Until about a year back I too loved SPAs.. Co-incidently my very first talk at a conference was demoing an SPA commerce storefront built on top of Magento. Lets take a moment to step back and see why SPAs have become popular…. Speed Better UX
- #9: ---Teleprompter notes---- ---Narration --- Building monolith SPA on top of a microservices, completely nullifies the agility of the microservice architecture. From experience, the frontend undergoes far more frequent changes and the very thought of having to deploy the entire app bundle for even a small change in any one of the components, would trigger a full set of regression tests.
- #13: ---Teleprompter notes---- ---Narration --- One of the most important features and often the first one to miss is the ability to independently deploy your service or feature to production. Netflix is known to have just 1 developer working on a microservice who have root access to the server and build and deploy their service to production atleast once a day.
- #22: Getting Software Development Right It‘s all about the team – this is was matters! Mature teams need to be enabled to make their own decisions.