unpkg: An open source CDN for npm
Let’s learn how unpkg the service and the open source project can improve performance for your company’s apps.
FYI: Before I get into the newsletter today I just want to mention that I’ll be on a family vacation all week and I don’t think I’ll even have access (let alone the inclination) to the internet. 🤠
A few years ago, Michael Jackson had an idea. He needed an easy way to make demos for his open source projects (specifically react-router) and realized that he already hosts all his projects somewhere: npm! So he could just setup a little node server that would act as a proxy to the files that are on npm. And here we are, almost 9 BILLION downloads per month later.
unpkg is an open source fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:
unpkg.com/:package@:version/:file
For example, to get d3 on your page, you could add a script tag like so:
<script src="https://unpkg.com/d3@5.5.0/dist/d3.min.js"></script>
You could also do:
<script src="https://unpkg.com/d3"></script>
Because unpkg redirects those to the above URL (in this case it’s because d3’s package.json has a unpkg field to point to that file specifically). It’s recommended that you specify a version though because otherwise user’s will start downloading the latest version which could break your application if there’s a major version bump:
<script src="https://unpkg.com/d3@^5.5.0"></script>
That’s right, a version range works in there as well. Cool right?
So why is this so cool? Whelp, we use CDNs (content delivery networks) because they allow static assets like images, JavaScript, and videos to be hosted physically close to end users as well as served with as fast as possible technology. unpkg is sponsored by Heroku where it is hosted, but that server is only actually used 5% of the time. The real power of a tool like unpkg is the fact that the files hosted at those URLs can be very heavily cached (npm doesn’t allow published packages to be changed). So unpkg is also sponsored by Cloudflare which is an awesome CDN and serves 95% of unpkg’s traffic from the cache, making unpkg extremely fast.
unpkg is great for open source project demos and instructional material (I use it heavily in my Beginner’s Guide to ReactJS), but it’s not well suited for mission-critical applications at scale because:
> unpkg is a free, best-effort service and cannot provide any uptime or support guarantees.
That’s why Michael recommends:
> if you rely on it to serve files that are crucial to your business, you should probably pay for a host with well-supported infrastructure and uptime guarantees.
This is something that I plan on doing at PayPal eventually and I’ll tell you why. Most projects at PayPal are using much of the same technology. Most are using some version of react and react-dom, some are using rxjs, many are using lodash. Each of these projects serves its own bundle.js file(s) that include these dependencies. So as users navigate around PayPal they’re re-downloading much of the same code just in a different form. Some companies enforce the entire company use the same version of some dependencies to avoid this problem. I think this comes with more problems than the solution merits
This is why I’m really interested in building a hosted version of unpkg at PayPal. Doing this will allow teams to use whatever version of whatever dependencies they like. If two teams happen to be using the same version of React (pretty likely), then the user wont have to download that version of react more than once. This compounds across the number of teams and projects PayPal has. And because I also write and maintain paypal-scripts, I can build-in a really nice process into paypal-scripts so people can get this functionality out of the box. Automatic user experience improvement! Woo!
Conclusion
I have a lot of things on my plate, but I’m hoping to be able to do this in the next few months. I think it’ll be a real win for people using PayPal products. Can’t wait to see those bundle sizes getting smaller! Good luck friends!
P.S. One other thing that I really love about unpkg is the index page for a package. Simply add a / at the end of the URL and you’ll see an index of the files as well as a version chooser which is pretty awesome: https://unpkg.com/d3/
Looking for a job? Looking for a developer? Check out my job board: kcd.im/jobs
Learn more about JavaScript from me:
- More than you want to know about ES6 Modules @ Learn to Code Websites and Apps Meetup (remote)
- ES6 and Beyond Workshop Part 1 at PayPal (Jan 2017)
- ES6 and Beyond Workshop Part 2 at PayPal (March 2017)
- Code Transformation and Linting
- Writing custom Babel and ESLint plugins with ASTs
Things to not miss:
- gh-polls.com - “GH polls is a quick and effective way to request feedback from community members in GitHub issues.” by TJ Holowaychuk.
- There - A really neat app by Mo Rajabifard that’ll tell you what time it is for your friends and co-workers in a nice UI.
- wretch - “A tiny wrapper built around fetch with an intuitive syntax. 🍬” by Julien Elbaz.
Some tweets from this last week:
> This is why I’m excited about @reasonml: “ReasonML feels much like what you’d get if you cleaned up JavaScript and turned it into a statically typed functional programming language.” - @rauschma http://reasonmlhub.com/exploring-reasonml/ch_about-reasonml.html … – 24 Jul 2018
> It’s so nice to have technology recommendations that I know people will be happy with. Specific examples that come to mind at the moment: > React > Jest (and react-testing-library) > Cypress (and cypress-testing-library) – 24 Jul 2018
> I just found out that @codesandboxapp uses the first open source project I ever built 😍 > geniejs 🧞♂️ > > https://github.com/CompuIves/codesandbox-client/blob/a911927458058fa3ca10a84b0f41066f8f3a84b0/packages/app/src/app/pages/Sandbox/QuickActions/index.js#L4 … > > (and a recent one too in the same file! 🏎️)
This week’s blog post is “What is a polyfill”. It’s the published version of my newsletter from 2 weeks ago. If you thought it was good, go ahead and give it some claps (👏x50) and a retweet:
Special thanks to my sponsor Patreons: Hashnode
P.S. If you like this, make sure to subscribe, follow me on twitter, buy me lunch, support me on patreon, and share this with your friends 😀
👋 Hi! I’m Kent C. Dodds. I work at PayPal as a full stack JavaScript engineer. I represent PayPal on the TC39. I’m actively involved in the open source community. I’m an instructor on egghead.io, Frontend Masters, and Workshop.me. I’m also a Google Developer Expert. I’m happily married and the father of four kids. I like my family, code, JavaScript, and React.