React and Microfrontends

Harish Paishwari is a lead AI ML engineer at Optum, focusing on building full stack AI ML applications and has been working with React since its launch in 2013.

The main topic of Harish Paishwari's talk at the React Summit is about React and Microfrontends.

Microfrontends are a way to structure frontend applications into smaller, manageable pieces that can be developed, deployed, and integrated independently, similar to microservices in backend architecture.

An NPM module is typically integrated at build time and reused across projects, while a microfrontend is integrated at runtime and is more suitable for larger, complex applications requiring independent development and deployment.

Module federation in Webpack 5 allows sharing of dependencies between different components at runtime, making it easier to integrate microfrontends without duplicating dependencies.

Some challenges include managing large codebases as team sizes grow, ensuring consistency in design and user experience, and handling communication and data sharing between microfrontends.

CSS encapsulation prevents style conflicts between the parent application and microfrontends, ensuring that styles are applied consistently and do not interfere with each other.

Best practices include versioning microfrontends to manage updates and deprecation, documenting components clearly for developers, and using tools like Emotion for CSS encapsulation.

Communication between microfrontends should follow React's data down, action up principle to ensure consistent data flow, avoiding complex event-driven architectures unless necessary for specific use cases.

Tools like Webpack's module federation and libraries like Emotion for CSS encapsulation facilitate microfrontend development with React.