This Event Tracker application utilizes Single SPA to seamlessly integrate Angular 16, Angular 17, Vue, and React. It enables efficient event tracking with detailed management features and a visually appealing countdown timer for upcoming events. This project was built primarily to demonstrate how Microfrontend (single SPA) can be used when you want to use several frameworks while showing the advantages, disadvantages as well as challenges. This app isn't so complicated.
- Download files by git clone repository-name
- You need to install packages for every folder ( for example "cd countdown-screen" and next "npm i")
- Use npm run start for every project
Homepage - VueJS
Countdown screen (digital clock) - Angular 16
Event List - React
Add Event - Angular 17
Microfrontend is an architectural approach where a user interface is decomposed into smaller, independently developed parts called microfrontends. Each microfrontend is typically developed by a separate team and may utilize different technologies. Single SPA, on the other hand, is a framework that facilitates the integration of these microfrontends into a single application, managing their lifecycle and enabling seamless transitions between them without page reloads.
You can read more about this on single-spa site: https://single-spa.js.org/docs/faq/
Okay! But I also would like tell about this from me and my approach. State managment in Microfrontend Architecture is... HARD! We are dealing with several different technologies! For my application I use Local Storage - this is enough in this case! Why? Because global state is needed mainly when we switches between screens. Hovewer, If we would like communicate between apps when several is in on screen on this same time We can use also JavaScript Event and dispatch Event. I once wrote about it on my profile on Polish linkedin (https://www.linkedin.com/posts/piotr-ko%C5%82odziejczyk_javascript-coding-webdev-activity-7162534812040343552-U4U9?utm_source=share&utm_medium=member_desktop)
We can use anchor and function form singleSPA to navigation
or navigate a little bit better programmatic
Microfrontends increase flexibility and scalability for large frontend applications. They enable independent team work, faster development, and easier maintenance by isolating changes to specific modules without affecting the entire application. Teams can use different technologies for different microfrontends, allowing them to choose the best tools for their needs. Each microfrontend can be developed, tested, and deployed independently, simplifying maintenance and updates.
- Complex Integration Integrating multiple microfrontends can be complex, especially in managing state, navigation, and communication between components.
- UI/UX Consistency Maintaining a consistent user interface and experience can be challenging with different teams developing separate parts of the application.
- Performance Issues Each microfrontend may bring its dependencies and resources, potentially leading to performance issues like longer load times.
- Kuba Kuśmierczyk (https://github.com/bBravee) - creator of homepage (vueJS) from my design in Figma;
- Kuba Wrona (https://github.com/Wronqa) - creator of add event screen (angular 17);
- Bartłomie Wydrzycki (https://github.com/Wydreq) - creator of event list (REACT)