How Do You Share Code Across Big JavaScript Projects?

TL;DR

Share code across large JavaScript projects by creating a reusable NPM library that exports common business logic and TypeScript interfaces for each app to install as a dependency. The example coordinates three apps, an Angular customer app, a Vue admin app, and a Node.js Cloud Functions backend, within one Firebase project while retaining a multi-repository structure. Read on for the setup steps and the tradeoffs between mono repos and multiple repos.

Transcript

code reusability is one of the most important concepts in all of software development but what often happens is you write some code in one app and then you want to reuse it in a different app down the road maybe you're back at cloud functions or a different front-end app but it's not very easy to reuse that code because it's tightly coupled to one ... Read More

Key Insights

• 👨‍💻 Code reusability is essential for efficient software development.
• 📽️ Strategies for orchestrating multiple projects with Firebase.
• 🧐 Considerations for choosing between mono repo and multi repo structures.
• 👨‍💻 Creating a shared library for sharing code and TypeScript interfaces.
• 📚 Utilizing NPM to install and manage shared libraries.
• 🎮 Version control considerations for project directories.
• 🪹 Impact of submodules in nested Git repositories.

Questions & Answers

Q: How do you share code across large JavaScript projects?

Create a shared library as an NPM package and install it as a dependency in every app that needs the common code. The package can export reusable business logic and TypeScript interfaces that would otherwise be tightly coupled to one application.

Q: How do you create the shared JavaScript library?

Create a separate directory, such as “shared stuff,” enter that directory, and run npm init to start a package from scratch. Then create an index.js file as the package’s main entry point.

Q: How can a shared NPM package expose TypeScript types?

Set the package’s types property to point to index.d.ts. TypeScript can generate these declaration files automatically when the shared code is built.

Q: What code can be placed in the shared library?

The library can contain interfaces needed by multiple projects, such as a user interface shared by the Angular app, admin app, and Cloud Functions. It can also export business logic, such as a createID function that returns a random string.

Q: How are the Angular, Vue, and Node.js projects organized with Firebase?

The example contains a customer-facing Angular app, a Vue admin app, and a Node.js Cloud Functions backend. Firebase is initialized in their parent directory with Functions and Hosting so deployments can be orchestrated from that level.

Q: How can two front-end apps share one Firebase project?

Configure multiple hosting targets in firebase.json. This allows the Angular app and Vue app to deploy to different URLs while sharing the same Firebase project.

Q: When is a mono repo a good choice for JavaScript projects?

A mono repo is recommended when many developers contribute or many subprojects are nested together. It provides one centralized place for pull requests and issues, synchronizes committed code across the apps, and can keep packages on shared versioning.

Q: Why might a small team choose multiple repositories instead of a mono repo?

Individual repositories are easier to test and deploy separately, and each focused project can use its own tooling and established practices. The speaker chooses the multi-repo approach because he is an independent developer with only a few projects in the workspace.

Summary & Key Takeaways

• Code reusability is crucial in software development.

• Strategies for sharing common business logic and TypeScript interfaces.

• Detailed guide on creating and using a shared JavaScript library.