Kevin C.
I love sharing my learning journey in the technology land and hopefully you can also takeaway some interesting tidbits from mine for your own learning and inspire many others to pass on these knowledges. Enjoy and happy learning & sharing!
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?
- 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?
- 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?
- 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
Microfrontend - Why & How
By Kevin C.
Microfrontend - Why & How
This is the presentation about my approach on microfrontend, by explaining the suitable use case, the evolution of architectures, the technicalities of different approaches with demos. I started to consider the new frontend architecture in 2018 that could recombine the one or more single page web applications (SPA) (sometimes as products, sometimes as pages, components, etc) with data coming from backend microservices into a cohesive user experience. Hence the microfrontend architecture, and got a chance to implement a prototype about half year ago. While this is still a new frontier in the frontend world, but it has got a lot more traction in 2019. Love to see how such architecture changes would shape the future.
