Shared Dependencies (WIP)

This is the results of analyzing the dependencies in the 22 micro-frontends in the Open edX GitHub organization.

Approach

1. Opening the package.json of each of the 22 repos.

2. Copying out the dependencies and dev dependencies into one big text file.

3. Sort the lines alphabetically.

   1. Adjusted for any “@edx” to “@openedx” inconsistencies as we migrate orgs.

4. Scan the list (800 lines or so) for dependencies used by all or nearly all of the MFEs.

5. Write them down.

6. Augment that raw data with domain knowledge about:

   1. Packages that contain/expose others (@edx/frontend-platform provides history, react-intl, @reduxjs/toolkit exposes both redux and reselect, paragon has icons now, etc.)

   2. Packages we want to move away from (i.e., please no more redux-saga, @fortawesome/*, etc.)

   3. Packages we want to move toward (i.e., all MFEs should have @edx/frontend-component-header and @edx/frontend-component-footer dependencies even if they don't for some reason)

7. Use bundlephobia.com to get bundle sizes for the dependencies to add more context.

Findings

Common Dependencies

The following packages are used by all or nearly all Open edX micro-frontends. This is only including dependencies - the assumption is that devDependencies are likely necessary for an MFE to build itself, and therefore less interesting for this exercise since they can’t be meaningfully ‘combined’ in most cases. If they were, they’re generally already part of @edx/frontend-build.

Total: 892.2k