Myself and another engineer developed a proof of concept "application island" using Yarn workspaces and Next.js. This is now used as a a tribe standard. It was created to solve the following problems found with managing multiple separate React applications:
- Developer overhead of managing dependencies in multiple separate React bundles
- Issues with load times due to each bundle containing its own dependencies with no cross app asset caching, resulting in users downloading the same assets repeatedly.
- React bundle loading issues in showing a white screen until the entire JavaScript bundle has been downloaded and executed
- To solve these issues we combined 8 applications with overlapping areas of purpose into a single application island.
- This combining resulted in 100k lines less of written code (not inc dependencies), and a 65% smaller javascript payload for the end user.
- We also utilized a JAMStack approach using Next.js static export. This solved the white screen performance issues and provided users with a UI immediately, drastically improving the FMP (first meaningful paint) time. It also meant no server hosting or server rendering was needed, leading to faster load times.
- This "application island" approach proved to be hugely successful and is to be used a tribe-wide standard for other squads to emulate.