As React, Vue, Angular and other Frontend frameworks mature, more and more projects embrace them in production. It has reached a point where a project written in React wants to use Angular or Vue components (and vice versa). We will explore pragmatic ways to use components created using different frameworks in the same app.
I am working on an Angular project for one of our clients. It recently acquired a company which is invested into React for few years. There is a plan to merge our products which has a lot of feature overlap. To use capabilities of existing teams, it was decided to use React components within Angular app. This is when we explored all possibilities of inter operations between frameworks. This talk will be case study of our work and what you can take away from it
5. Anatomy of React, Angular, Vue, WC
http://tiny.cc/intercomp
The framework Apps are mostly hierarchical and manages the
Component tree within
• Not just an encapsulation of DOM but a representation of data
6. Side by Side
• Emitting events is not recommended across framework borders
• Use Windows messaging
8. Custom Elements
• Wrap React, Angular, Vue inside Custom Element
• Convert to Custom Element
9. State Management
• Difficult to share Redux store as there are separate instances
• Can share state if they can access the same js object
10. Performance
• Too early for performance improvements in cross framework setup
• Micro frontends
11. Micro frontends
• Be Technology Agnostic
• Isolate Team Code
• Establish Team Prefixes
• Favor Native Browser Features over Custom APIs
• Build a Resilient Site
https://micro-frontends.org/
