CB
Christian Battaglia
Developer · Builder · Creator
HomeBlogMusicProdEngProjectsUsesAboutQuotes
DTW: Grand Central

DTW: Grand Central

How we combined React, AngularJS, Redux, and Router5 into a single application with a service registry, dependency injection, and dynamically loaded bundles per route — a pioneering micro-frontend architecture built at Amplify.
Christian Battaglia

Christian Battaglia

October 28, 2019

2 min read

React
AngularJS
Redux
Router5
micro-frontends
dependency injection
webpack
JavaScript
architecture

the bare bones

export default class GrandCentral {
    // options to construct
    options: GCOptions
 
    // router 5 router
    router: Router
 
    /**
     * routes exist outside of the router because we added an optional
     * "component" on the route object that exists as the webpack bundled tree
     * of components for each route that we inject off the root of the app
     * depending on the route change
     */    
    routes: Array<GCRoute>
 
    /**
     * dependency injection for singleton services (not to be confused with
     * functional services that are imported directly in the JSX file)
     * 
     * for example, key press actions event listeners that are global across
     * components
     */
    services: GCServiceRegistry
 
    /**
     * frontend framework shells (i.e. React and AngularJS) which makes sure there is
     * only ever 1 DOM instance of individual frameworks at any one given time
     */
    shells: FrameworkShells
 
    /**
     * Redux store specifically used instead of React context for its ability to exist
     * outside of the React ecosystem
     * 
     * logger and other middleware come as default
     */ 
    store: GCStore
}

service registry and dependency injection

From the comment above:

dependency injection for singleton services (not to be confused with functional services that are imported directly in the JSX file)

for example, key press actions event listeners that are global across components

The long term goal for this project is that we're potentially going to be combining multiple "apps" as separate routes in a large dynamically loaded single page progressive web app.

These apps might use external libraries with some sort of initialization process that would cause issues on any second initialization attempt (in a different route that is really a different app for example).

article links

  • https://reactjs.org/docs/context.html#consuming-multiple-contexts
  • https://reactjs.org/docs/context.html
  • React context and performance
  • AngularJS: Developer Guide: Dependency Injection
  • AngularJS Dependency Injection - Demystified · Anand Mani Sankar