Modularity With NPM

by James Zetlen

Ah...The Web.

The Web. The application platform of the 21st century. How everyone uses computers.

The Web Wasn't Supposed To Do This

HTML was modeled metaphorically on books. It added hyperlinks to them, but it's still designed for technical books and academic papers.

Don't believe me?

It's got separate tags for citation <cite> and definition of terms <dfn>.

Sure, it had some cute interactivity and presentation features.

A little CSS for primping your text,

a little JS for simple interactions.

We now use the Web as a full-featured application platform

We've standardized most of the world's consumer computing and an increasing amount of its business computing on its UI system.

This is like building a city of skyscrapers based on pop-up book technology.

But we did it, and it works. We're awesome!

Still...for it to keep working, we need to add some features to it that make it more robust.

Modularity

If your whole website is one big piece, then when anything breaks, the whole thing's broken.

Good machines have parts you can swap out.

In order to build a machine this way, you have to think about each part's inputs and outputs, its role, its purpose.

Ask yourself:

How would you describe what this code does, without talking about the system that surrounds it?

Components on the Web

There has to be some kind of standard system for declaring, packaging, and distributing individual components of Web functionality.

This isn't news to us. We've been talking about it for a decade!

Isn't this just "partial templates"? Isn't this just "additional stylesheets"? Isn't this just "jQuery plugins"?

Isn't this just 'files'?

No, It's Not Just Files

Pieces of Web functionality are too often split across several files. We have to have an intermediary step between "files", and "your whole frontend project".

jQuery plugins sometimes want you to download and add their CSS files, paste in particular HTML, make sure the right jQuery version is loaded first...

And jQuery plugins are always breaking all the time.

COINCIDENCE?

Something has to

manage these things automatically,

understand versions and dependencies,

describe things as components,

then install them, in the right order,

to make a working machine.

Software package managers

They've been around for four Batmans.

For operating systems:

• apt-get, rpm, pacman, yum, portage, dpkg, fink, ports, homebrew, chocolatey

For programming languages and ecosystems:

• CPAN, Maven, Composer, RubyGems, EasyInstall, NuGet, npm

What are they?

Package managers are systems for sharing and organizing software. They should help you declare what your software does and keep track of the dependencies your software needs. They should have a public repository that lets you publish your code. They should automatically download the code you say your software needs, and put it in a place where your software can use it.

what aren't they?

Package managers are for computer users and developers. They are not runtime systems; your software should not need them to run, only to build and distribute. RequireJS, Browserify, and jQuery UI are not package managers.

Like social networks,

package managers are only useful if everyone is using them, so one of them has to win.

Some Contenders

• component -- abandoned!
• jspm.io -- too new and ES6-dependent!
• duojs.org -- too weird!
• jam -- not well used?
• spmjs.org -- is this only for alibaba developers?
• bower -- now THAT'S interesting.

Bower

The strongest contender for the frontend so far.

Designed by Twitter. Minimalist. Easy to understand.

Privileges the frontend. Predictable directory structure.

But Bower is still losing

Adoption is low

Conflict management is a huge pain

Work on the toolchain has slowed down

It feels a little unnecessary, because...

NPM

The package manager for JavaScript

Nearly 200,000 packages

Supports its own repository, but also has a public repository spec

Can also use GitHub, other Git repos, public tarball URLs, or your local filesystem

Manages conflicts and multiple versions

Wait but

Doesn't NPM stand for "node package manager"?

Not anymore!

Isn't NPM just for JavaScript?

Not really!

Why should we--

Because it's being actively developed, improved and maintained, and it's winning.

What's an NPM package?

It's a folder with a package.json file.

This file says what it is and what it does, where to read about it, how to test it, what it needs to run, and what it needs to build.

How do I make one? How do I install one?

You can make a package.json file yourself! Or you can run npm init to create one in the current directory.

Would you...would you like to try that now?

Cool, because this presentation itself uses NPM modules.

And it's missing a bit of functionality, isn't it?