Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions _posts/2016-03-21-nplaym.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
layout: post
title: Your node modules are Space Invaders
author: Jonathan King
categories: [opinion]
thumbnail: https://upload.wikimedia.org/wikipedia/commons/b/b9/Noodle_(2780523440).jpg
---

If you work with NodeJS, you'll know about NPM. It's simply a great package manager. Our Managing Director, [George Ornbo](https://twitter.com/shapeshed), even went as far as to say [it's the best he's ever used](/blog/whats-wrong-with-scalenpm-org/). However, when you work on large and complex applications, the number of packages you end up using can run away with you. Suddenly you're looking at a `package.json` that reads like a greedy child's Christmas wishlist.

## Drowning in other people's code

This problem is exacerbated by the fantastic but turbo-charged pace of change in the modern JS ecosystem. There are so many tools available now that, with the right skills and knowledge, you can take your ideas from zero to MVP at a breakneck pace. But what with all the transpilers, precompilers, prefixers, bundlers, boilerplate and hot reloaders that are becoming the _de facto_ standard these days (let alone the actual frameworks and libraries that help form the content of your code) I'm finding myself staring at a joyless install progress bar for longer and longer.

**Perhaps the problem is NPM's speed and efficiency, perhaps it's the number of packages you are installing.**

A few days ago I had a chat with my fellow pebble developer, the excellent [Mike James](https://twitter.com/export_mike). His popular [React Redux boilerplate repo](https://github.com/export-mike/react-redux-boilerplate), for instance, contains around 30 separate dependencies, with a similar number of different devDependencies. It's great when you've got it set up, but it's not quick to install, and it represents pretty much _the bare necessities of what is needed to work with those libraries_.

Furthermore, not only is every dependency a bit of bloat that slows down installs, but [it's an attack surface](https://blog.liftsecurity.io/2015/01/27/a-malicious-module-on-npm).

## Fire the lasers! Destroy the modules!

I thought that it would be fun to make a game to demonstrate this issue, but that would also keep you entertained while your flurry of packages were installing.

So I made `nplaym`:

<div class="video big">
<iframe src='https://www.gfycat.com/ifr/ThornyDownrightCowrie' frameborder='0' scrolling='no' width='100%' height='100%' allowfullscreen></iframe>
</div>

You can check out the code on [Github](https://github.com/JonathanUsername/nplaym), or just install it from [NPM](https://www.npmjs.com/nplaym)

It's frivolous and silly, but not all code is a solution to a problem. In fact, games rarely are. It's meant to provoke some discussion, and [it managed that, to some extent](https://news.ycombinator.com/item?id=11284972).

The controls aren't hard, but you have to slog through it, shooting every package name that gets in your way. If you don't manage to make it all the way through without dying, no packages are installed. You may ask why I made it this way... I would reply because I'm a little sadistic.

It simply runs NPM as a child process, parsing the output, and shouldn't slow down installation. It even works over SSH.

## Staying afloat using 10% time

Here at pebble {code} we are lucky enough to take 10% of our time to work on whatever we like - often a personal project, sometimes a product, or even just keeping your skills sharp with tutorials and challenges. I was able to make nplaym as a part of that policy.

This project was fun, but fruitful (ironically, in creating it I used more packages than I really meant to) as it taught me about a great variety of things, such as using a pseudo-TTY to parse NPM's stdout, how to use ANSI codes, and how great ES6 import/export statements are. I'm certain that 10% time is a major help in keeping our heads above water in the flood of new tools and frameworks. And sometimes it just helps us have fun. It's basically the pool noodle of company policies.

If you're interested in applying to work at pebble {code}, head to our [Careers Section](/careers/)!
4 changes: 4 additions & 0 deletions _sass/pages/_page-base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,10 @@
padding-top: 25px;
margin-bottom: 30px;
height: 0;

&.big {
min-height: 430px;
}
}

.video iframe {
Expand Down