Challenge Overview
Challenge Overview
We are starting a micro-frontend based architecture for Topcoder frontend apps. Your task in this challenge is to research the available options for inter-app communication and implement a demo to showcase the most appropriate solution.
Background
Micro-frontends are “techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently” and we will be using this approach for developing various Topcoder apps.
Benefits that we expect from the micro-frontends approach are:
-
Stop redeveloping things like menus and headers and footers and other frame components with each app
-
Improve code reuse
-
Improve or at least maintain the ability to develop several apps in parallel
-
Improve standardization
In previous challenges we have built the base architecture that includes the parent frame app, one navigation micro app and two demo apps (one with angular, one with react). Followup challenges will build on this basis to make a solid frontend architecture for Topcoder apps.
Tech Stack
-
Single SPA - https://single-spa.js.org
-
Javascript
Assets
Base code is posted in the forums
Task Detail
All our current micro apps are standalone apps that are just loaded by the main frame app, but inevitably there will be scenarios when we will need to pass data between the micro apps - things like user authentication details, user profile info, etc and the goal of this challenge is to find and demonstrate the most suitable solution for messaging between the micro apps.
Roughly speaking, there are two common options:
-
Global state management - all the state is stored and managed globally and the micro apps will simply react to changes in the global object
-
Message passing - using some kind of publish/subscribe system where each app can send custom messages with predefined event types and other apps can subscribe and listen to events. Variation of this approach is exposing functions or streams (ex observables) from one micro app and subscribing to it from other micro apps.
Your task is to research the pros/cons of these options and any other options you can find, and implement a demo of message passing between our two demo apps (react and angular app). Demo should support the following:
-
Maintain a global counter
-
Demo apps should have increment/decrement buttons to change the value of the counter, and a label to show the current value of the counter
-
Demo apps should also show the current user handle, first and last name (this info is available in the navigation app)
Please keep the current Readme file relevant to the solution you implemented, and document the pros/cons of other solutions in a separate document. Make sure to discuss how the approach you chose will scale to many types of messages/events and how to organize them properly to (1) avoid name conflicts and (2) maintain a clear message content schema.
If you feel a common helper library should be developed to ease the use of cross app events, feel free to suggest so and implement a demo - you’re not limited to the minimum use case demo described above - documenting potential issues or making future development easier is a big plus.
Submission Guidelines
-
Submit the full source code for parent and child app and their documentation