Microfrontend Architecture

Why & How

Kevin C Chen

image src: http://blog.d3banking.com/blog/how-can-microservices-benefit-your-bank-or-credit-union

New Challenges

Cohesive
UX

Team
Velocity

Era of Microservices

Different Tech Stacks

New Challenges

  • UI for Microservice Backend
    • How should we develop UI in the era of microservices?
       
  • The need for speed and scalability in the organization
    • How to enable the teams with the autonomy they need for velocity and continue to scale?
  • Consistent UX across web applications
    • How to support the development of separate UIs with cohesive user experience?

  • Different Tech Stacks
    • How do we support frontends build with different library or frameworks? Are technologies exist already to implement the solution?

What is Microfrontend?

  • Microfrontend is the architecture and strategy that enable multiple teams to work seamlessly together by fostering end-to-end ownership of independently developed, tested and deployed features to create modern web applications with various technologies.

    The web application becomes a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in.

When speaking of organization, people...and outcome

Why you would consider Microfrontend?

  • Enable and scale independent Frontend development and release workflow with high velocity
     
  • Offers user a cohesive UX with a consistent look-and-feel
     
  • Protect existing frontend investment - Not to break already available legacy server rendered Web App or build with for major JS frameworks
    (e.g. React, Angular, Vue)
     
  • Polyglot development with freedom of tech stack choice

Example Use Case

Example Use Case

DEMO

Made with Slides.com