How to Share JavaScript Code
Pros and Cons of 4 different tools you can use to share your code with others
We all like to think we know how to share our JS code with others, be it other people across the world or with the guy sitting next to us at the office.
Either way, the usual places where you’d go to do this are a bit limited around what they can do and what you can do with the quality of the code you’re sharing.
In this article I want to show you some other alternatives that you may not know about and that will add more value on top of what you can already get with your current option.
Git/GitHub
One of the most obvious options, yes, but I still wanted to cover it.
Git is a distributed version control system that allows developers to track changes to their code and collaborate with others.
If you’ve been already working as a developer you’ve most likely come across Git or GitHub. After all, unless you’re working at Google or some other company that decided to stay in the past, Git is the defacto version control system of the industry.
On top of that, Github is a web-based platform that provides hosting for Git repositories, making it easy for developers to share their code and collaborate on projects.
Benefits
- Git and GitHub are widely used and familiar tools, making them easy for developers to use. At least at the basic level, I like to think of Git as a dangerously sharp swiss knife. If you stick to the basics or you know exactly what you’re doing, you’re fine. But if you start poking around and trying stuff, you’re likely to lose a finger or two in the process.
- GitHub provides features such as pull requests, issues, and comments, which facilitate collaboration and communication between developers. This is a great addition to the basic features provided by Git, it adds the “community aspect” that makes it easy to connect and get help.
- Git and GitHub are free to use for open-source projects, making them a cost-effective solution for sharing code.
Drawbacks
- Git and GitHub can be challenging to learn for new developers. Remember, extremely sharp swiss knife.
- Git and GitHub do not provide a way to share and reuse code components. They both work with the concepts borrowed from the filesystem. In other words, you can share files, and folders, but there are no abstractions that you can use to group them (other than a repository of course).
npm
And here we have the second most common options, mainly for Nodejs developers, but you can also find front-end libraries here.
NPM is a package manager for Node.js that allows developers to install, manage, and share code packages. With npm, developers can easily share and reuse packages, making it a convenient option for sharing JavaScript code.
Publishing your packages here is trivially simple, there is no review process or waiting time, which makes it really a fantastic place to find a lot of garbage as well. Mind you, while it’s not the only package manager for Node, it’s definitely still the defacto standard. That means everyone who has Node installed will have the npm CLI tool and they can immediately start installing your packages.
Benefits
- npm provides a centralized repository, making it easy to find and use existing code packages. Note, “easy” is relative. You can spend hours looking for what you need and come out empty-handed if you’re not lucky.
- npm provides versioning, allowing developers to track changes to code packages over time. This one is a great feature because it makes sure you don’t overwrite old versions whenever you publish an update. You’re forced to push a new version every time, making it very easy for developers to install the exact version they want.
- npm is integrated with many development tools, making it a convenient option for developers.
Drawbacks
- Their central repository is filled with packages, making it hard, sometimes, to find a library to do what you need that’s actually maintained and working without errors.
- Other than versioning, NPM doesn’t add any other value on top of your package. There are no collaboration tools, integrated automated testing or anything else.
CodePen
If instead of sharing a whole library or package, you’re looking to share snippets to showcase how to do something, then CodePen is your friend.
CodePen is an online platform that allows developers to write, share, and test HTML, CSS, and JavaScript code snippets. CodePen provides a social platform where developers can share their code snippets with others, making it a convenient option for sharing JavaScript code.
Benefits
- CodePen provides a social platform, making it easy to share code snippets with others.
- It also provides an online editor, making it easy to write and test code snippets. You can take the snippet from someone else, change it and make it your own. It’s a great way to tinker and learn from examples.
- CodePen is free to use, making it a cost-effective solution for sharing code.
Drawbacks
- CodePen is limited to code snippets and does not provide a way to share and reuse code components.
- While the collaboration aspects of CodePen are there — at least some of them — it’s very limited in the scope of what you can learn. It’s great for snippets and examples, but you can’t really depend on this platform to download or share your libraries.
Did you like what you read? Consider subscribing to my FREE newsletter where I share my 2 decades’ worth of wisdom in the IT industry with everyone. Join “The Rambling of an old developer”!
Bit
This takes us to, what I think, is the most complete way to share JavaScript code at the moment.
Bit.dev is a modern platform for sharing, collaborating, and reusing modular components. With Bit, developers can easily share and reuse front-end code components, making it a powerful option for sharing code. They can also share back-end components (as long as they’re Node components). Bit provides a centralized repository where developers can publish and download components (similar to Github or NPM but much better), making it easy to find and use existing code. Bit also provides a powerful CLI that makes it easy to publish and consume components.
Let’s take a look at everything we’ve been saying so far:
- Can you distribute your packages with Bit? Yes, you can. In fact, you can distribute portions of your code, package them into something called “components”, isolate them and add documentation, tests and push them into a centralized repo where others can find it, install it and collaborate on them (check out this article showing you how to share your code with Bit).
Learn more about this here:
- Can you collaborate with others through Bit? Yes, you can. Anyone in your team can install your components, change their code and publish them as a new version. Now, this is all done without affecting the way you import those components into your code (you’re still using
requireorimportstatements like with NPM packages). - Can you share code snippets? Yes, you can. In fact, with every Bit component there are “compositions” (you can read more about them here), which are essentially example use cases you can put together and then the platform will showcase them in a live document that developers can read and tinker with (yes, it’s live code that can be edited).
- What else case you do with Bit? In fact, Bit also adds automatic versioning control and tests into the mix. The entire dev workflow is covered with a single CLI tool and you can forget about Git, npm and all others (mind you, they’re used in the background, but you only do it through the Bit CLI tool).
Benefits
- Bit provides a centralized repository, making it easy to find and use existing code components. Much like you would with NPM, but every component has a lot more information and examples than what you’d find out of the README in NPM or Github.
- Bit provides versioning, allowing developers to track changes to components over time. Similar to what NPM does, you’re able to specify versions so developers can install the exact one they need.
- It also provides a powerful CLI, making it easy to publish and consume components and work out the entire development process involved in extracting a piece of code, turning it into a reusable component and sharing it online. All done with a single tool. You can read how to build your own components from scratch in this tutorial.
Drawbacks
- Bit changes the way we’re used to thinking about our development workflow. Bear in mind, it simplifies it, but it still requires a period of adjustment. If you’re new and just starting over, this might not be a bad thing, but if you’ve been doing it for years, suddenly having to depend on a single tool that does everything for you might sound too good to be true.
In the end, the best solution out there is up to you and your particular use case. Some of them might have features you don’t need nor want and others might be missing key features you absolutely require.
My personal recommendation is that if the concept of “component” makes sense for your particular use case, then go with Bit, since it’s the most complete of the options covered here. You can do everything from building reusable components up to managing your monorepo with it. So don’t discard it yet if you haven’t tried it.
What’s your favorite one on the list? And which one haven’t I added that you rely on? Share it in the comments section!
Use, reuse, and share components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
