Overview

Micro frontends present a modern approach to developing web applications by breaking them down into smaller, independently deployable units. This demo showcases one way to implement micro frontends using Web Components, allowing for seamless integration of various web applications. Initially presented at Oracle CodeOne 2019, this project demonstrates the orchestration of multiple tech stacks, providing flexibility and specialization in web development.

The application features several sub-projects, each tailored with unique technologies such as Angular and Java, showcasing the diverse capabilities of micro frontends. This flexibility is a game changer for developers looking to create scalable solutions without the constraints of traditional monolithic architectures.

Features

Dynamic Orchestrator: The entry point utilizes the Vaadin Router web component to load different micro frontends dynamically, providing an easy navigation experience.
Web Components Integration: All applications are built as web components, ensuring compatibility and reusability across different frameworks.
Multi-Framework Support: The project illustrates how to integrate apps built with various technologies, including Angular and Java, demonstrating flexibility in tech choices.
Microservice Architecture: Includes a simple Java-based microservice that delivers canned data, establishing a clear separation of concerns between frontend and backend.
Fresh Browser Requirement: Designed for evergreen browsers, the project does not include polyfills for Web Components, ensuring modern web standards are used.
Easy Setup: Comprehensive instructions for setting up and running the applications, with a local development server using Express for streamlined testing.
Sample Applications: Multiple example apps included, such as a basic application using lit-element and an Angular app packaged as a web component, offering practical insights into implementation.

This demo is an excellent resource for developers interested in exploring micro frontends, allowing them to see how best practices can be implemented in real-world scenarios.

Kito99

Micro Frontends Demo