Micro Frontends Conference

Can we use multiple JavaScript frameworks in a single-page application? Yes, it is possible with Micro-Frontends. In this talk we are going to explore what are the different ways you can make multiple frameworks like React, Vue and Angular live in harmony in an SPA and also allow you to split the code by functionality. We also discuss on why autonomy matters more for a team to choose their own tech stack for better and faster feature rollout instead of forcing them to use ineffective and older technologies.

Slides: http://framework-freedom.surge.sh

The Freshworks story

• One flagship product to more than 7 products and 100s of platform services
• 50K+ customers
• Ruby on RAILS to Java, Go, Ember.js, React and so on
• Most products are monolithic codebases

The Unified Product Experience

• Our business wanted to integrate different product experiences into an unified experience for the customers.
• Bundled products is the future
• Looking at infinite permutations and combinations for product UI experiences and capabilities
• Engg. vision needs to be aligned with business mission and product roadmaps.

No More Iframes

• Legacy way of integration among different product and platform services
• Security
• Performance
• Accessibility
• Authentication hassles and overhead

Why Microfrontends?

Optimize of Feature development

Make Front-end upgrades easier

Increase customer focus

Why you want to use multiple frameworks?

Autonomy

• Support agility by allowing teams to choose their own technology
• Lot of acquisitions means different tech stacks

Performance

• Major concern with monolithic codebases
• Faster landing pages are crucial for business success
• Rewriting a slower module with a better and faster framework of choice

Diversity in Technology

• Putting all your eggs in one basket
• Don’t build all your products with one framework
• Betting on potential framework alternatives for the future
• Diversification is not only good for money but also for technology

Microfrontends Composition

• Client-side composition
• Server-side composition
• Pros and cons

Client-side composition

• Because our existing product experiences are SPAs

single-spa

• JavaScript router for front-end microservices
• client-side routing
• JavaScript modules for integration at the browser
• Rich eco-system of tooling and libraries
• Helpful and broad community support
• Plugin architecture
• Different type of Micro-frontends for different use-cases

Challenges with MFEs

• Working with a unified url
• CORS
• Deployments - Blue-green
• Reusing components across frameworks
  • Common UI components
  • Common Library Code (Sharing same React version across different MFEs)
• Communication with different MFEs

Key takeaways

Participants will learn

• how to use multiple frameworks in a single-page application
• what are the ways of effective communication between different micro-frontends
• how to promote autonomy among teams to choose the best tool for the job