Sharing Code In a Large JavaScript Project

Trials and tribulations sharing code in JavaScript

I built a fairly large app, called DzHaven, using Node and React, and I found myself with the issue that a lot of JavaScript developers find themselves in — difficulty reusing code. I have a fair amount of experience using C#, and it’s pretty easy to create a module through a separate project and then reference that assembly for code reuse. Obviously you can’t do that with JavaScript. Let’s see what is possible.

Attempt 1: Shared Local Project Folder

This seemed like a no brainer. Just create a folder where anything that can be shared among separate projects can live. Then I’ll just use a relative path to that folder from each project and that should do it.

I think you already know this did not work. All projects these days, Node or otherwise, are going to be NPM packages. These packages have a folder structures and configuration files expecting certain paths from within the project itself. It becomes exceedingly difficult and arduous to deal with relative sub-paths from each project. Something like this gets unwieldy very quickly.

{someroot}/../../../{some sub project}

Additionally a larger project can have multiple NPM projects to deal with, where each project has its own set of unique dependency versions that may not be compatible with each other. So whether it’s language differences between JavaScript versions or NPM package versions, things may not play nicely with all projects.

On top of all this, if the folder is moved or renamed, then everything of course stops working.

Attempt 2: Shared NPM Package

Oh I know I’ll just get a subscription to NPM and create private Node packages. The nice thing about this method is that you get a shared location to store your packages and have some control over versioning too.

Unfortunately, this does not work for the same reason as the first attempt. Since this is also an NPM package, the versions of certain NPM packages inside may conflict with other project dependencies. Additionally, there is the added annoyance of having to compile the project after any changes.

Advertisements

Attempt 3: Locally Shared Git Project Folders

Let me try and explain what this is. Most devs place their code into Git as a code repository for their project. Well, it’s also possible to create a shared folder as a repository in Git and clone it anywhere locally.

This means you could clone the shared project into the src folder of any parent project that may need its code. And using the .gitignore file, one could have this folder ignored by the parent project — so that it is not checked in when the parent is. Now if you have two projects you could clone your shared project as a subfolder locally into each project’s src folder. Something like this,

Project A/src/common and Project B/src/common.

Since the folder common is not an NPM package, you are free to use any package versions you like, as long as you’ve not placed any version-specific code into the folder (but that would defeat the purpose of using a shared code location now wouldn’t it). You are also free to use different versions of Typescript, which is what I’m doing. Also, since the folder exists inside of the parent project’s src folder there is no relative path hell to deal with.

Additionally, if a change is required for the common folder, that change can be made, pushed to Git, and then the other project can pull the change down. And vice versa. Or you can wait to pull on one of the projects until it has updated its own dependencies and can accept the changes.

This method is not perfect, as I cannot use projects that depend on NPM packages. But for my project, DzHaven, it’s a small problem that has not caused any major headaches. Hope this helps!

Advertisements

This site runs on wordpress

Published by David Choi

Developer Lead DzHaven.com. Where devs help devs and make money.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: