There are so many amazing JavaScript packages out there that make a developers life so much easier. I have built my own basic packages to meet many different needs. Most of my JavaScript experience and use cases for building packages comes on the back-end (Node.js) and not as much client/browser side. I have also recently been coming across a lot of examples where I reuse a ton of code that are almost like "helper" or "utility" functions or tasks in JavaScript. Things like getting a random element from an array, generating random numbers, inserting items into an array at a specific index, etc. So I decided to build a package that will handle these tasks for me in an easier way so I don't have to reuse code between projects as much.
I had a few goals with this latest open source project. First I really wanted to create a cross platform package. This is a perfect package to enable support on both Node.js applications as well as client side/browser applications. For this I chose to use unpkg which is a CDN that packages NPM projects into a normal JavaScript script that anyone can use. I also really wanted to take advantage of amazing unit tests and code coverage metrics. For this I use Travis CI and Coveralls both of which provide free use for open source projects. Automated testing is something I believe all developers can strive to do better at. So I'm taking this opportunity to really focus on it and gain experience in this area. The last main focus I had which integrates really well into Travis CI is I really wanted to have great support for Node.js and browser compatibility. Although I'm not sure exactly what my browser compatibility score is I believe it is very high due to using Babel to transpile the code from newer JavaScript syntax into more compatible versions. I would love to find a system that would let me track browser compatibility to get better metrics about that but haven't found a system that allows me to do that yet.
In this project I use a lot of different technologies that I haven't used very much before. I use Gulp to handle transpiling with Babel, using Browserify to handle Node.js require
's, and using UglifyJS to minify the JavaScript.
One of the most interesting problems I had to solve is handling code coverage with Babel. Because Babel might change your code and add elements that you aren't writing tests on your code coverage stats can be incorrect. To solve this I used NYC following this guide. The babel-plugin-istanbul makes this really easy.
Also converting an Node.js package to a browser based package inherently has it's problems. For example require
is only support in Node.js and not in web browsers. So I had to use Browserify in Gulp to convert this to code that would work in a browser environment. That also requires creating a standalone version (--standalone) in Browserify.
Although this project is still really small and doesn't have a lot of features yet I believe it has a great foundation that can now be built upon to make a truly amazing open source library that is supported on both web browsers and Node.js.
Check it out on GitHub. As always feedback, pull requests are totally welcome.