The document discusses the interoperability of components built with different frameworks like React, Angular, and Vue, emphasizing the challenges of managing component trees and state sharing. It suggests using custom elements and messaging techniques for better separation and performance in cross-framework setups. Additionally, it advocates for a micro frontends approach to promote technology agnosticism and team isolation in development.

1. Interoperability of
Components built with
different frameworks
React Vancouver, May 22, 2019

2. Souvik Basu
@souvikbasu

3. Why?
• Isn’t React good enough by itself?

4. An example of Using React in Angular App

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

7. iframe
• Better separation
• Duplication of framework payload

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/

12. Thanks (Q&A)
@souvikbasu