Welcome

to the new

Nodevember, 2017-11-27

Who is this guy?

Laurie Voss

COO & co-founder, npm Inc.

@seldo

I'd like a show

of hands

What are we

talking about?

Part 1: What's new

Part 2: What's next

The Ship of Theseus

https://en.wikipedia.org/wiki/Ship_of_Theseus

aka Your Grandfather's Axe

Plutarch, 75 ACE

(If ancient Greeks had computers, would they have had a year 100 bug?)

npm is

the ship of Theseus

What is npm?

  1. Client
  2. Registry
  3. Website
  4. Company
  5. Workflow
  6. Community

1. npm is a client

2. npm is a registry

3. npm is a website

www.npmjs.com

4. npm is a company

  • We sell goods and services
  • That make you more productive
  • You may wish to buy them
  • Just a thought.

 

5. npm is a workflow

6. npm is a community

There are 11 million users of npm

50% of npm's users have been using it for less than a year.

83% of npm users write mostly front end code

You are

a real npm user.

You are part of

the npm community.

npm's goal:

Reduce friction

for JavaScript developers

npm just wants to get out of your way

Part 1:

What's new

in npm today

The client

npm install npm -g

Get npm 5 right now:

npm 5 is 10x faster

https://github.com/pnpm/node-package-manager-benchmark

npm init

If you aren't using it already, you should.

npm 5 locks

by default

package-lock.json produces perfectly reproducible builds, every time.

When to use package-lock.json

Semantic Versioning

SemVer basics

2.15.58

Breaking

Feature

Fix

major
minor
patch

How npm

uses SemVer

dependencies: {
  "abbrev": "1.1.1",
  "lodash": "~1.4.1",
  "mysql": "^2.3.5",
  "qs": "*"
}

SemVer increases efficiency by reducing communication

SemVer reduces code duplication

SemVer is great for building software

Not so great for shipping software

Lock files are better for shipping software

package-lock.json

is for apps

package.json is for libraries

Shrinkwrap is for never.

Do not use shrinkwrap.

npm 5 saves

by default

No more need for npm install --save

npm 5

works offline

You can force npm to use only the cache

npm install --offline
npm install --prefer-offline

package.community

http://package.community

The registry

The registry is faster

  • Requests are served 40% faster
  • Metadata responses are 50% smaller
  • Downloads are up to 200% faster
  • Not counting the new faster client!

🔒 2FA 🔒

https://docs.npmjs.com/getting-started/using-two-factor-authentication

Webhooks

go.npm.me/hooks

Learn more:

Scopes

npm install @yourname/yourpkg
@yourname/yourpkg
var yourpkg = require('@yourname/yourpkg')

Install:

Use:

npm Organizations are free

unpublish

is restricted

Use

npm deprecate instead

The new npm website:

https://preview.npmjs.com

  • username: GCU
  • password: Please Clap

Search is better

Search was a gift from the community!

npm, Inc.

Most commonly asked question:

"How do you folks make money, exactly?"

npm is a company that sells services that make JavaScript developers more productive

You should try them. You'll like them.

npm Enterprise will make your giant corporation feel good about JavaScript

The npm workflow

Run scripts

Lifecycle hooks

publish:   prepublish, publish, postpublish
install:   preinstall, install, postinstall
uninstall: preuninstall, uninstall, postuninstall
version:   preversion, version, postversion
test:      pretest, test, posttest
stop:      prestop, stop, poststop
start:     prestart, start, poststart
restart:   prerestart, restart, postrestart

Lifecycle scripts make your team more productive

Because they have to yell at each other less often

✨ npx ✨

npx create-react-app

npx serve

npx for updates

npx npm-check -u

npx runs dev dependencies

Don't install

tools globally

  • Install tools as dev dependencies
  • Run them with npx
  • It's faster and safer

🎉 cipm 🎉

cipm is 2x faster than npm 5

cipm is 20x faster than npm 4

🌟

😮

The npm community

Part 2:

The next challenge

A brief history of modular JavaScript

Modular code

is great

Modular code is a solution to the problem of tiny brains

Links in a network = n(n-1)/2

Our brains cannot handle giant programs

Modular code limits possible interactions

Modular code fits into your tiny brain

This is why npm is so popular!

2008:

No JavaScript modules

2009:

All the modular JavaScript

CommonJS modules

exports = function() {
    ...
}
var mod = require('filename')

Define:

Use:

2009:

An explosion of server side JS

  • Node.js
  • SpiderApe
  • V8cgi
  • K7
  • Narwhal
  • Jack

2009:

All the package managers

  • npm
  • Kiwi
  • Mode
  • Sproutcore

JavaScript in 2009 was a mess

Server side modules: pretty good

Front end modules: not so good

Transpiling + bundling

  • 2011: Browserify
  • 2014: Webpack and Babel

Webpack

is taking over JavaScript

Webpack works great

So naturally, we have to change everything.

Why do we have to change everything?

I was just getting the hang of this!

Bundles have performance problems

Code splitting

Static analysis

require() is not good for browsers

ES6 imports

ES6 module format

export function square(x) {
   return x * x;
}
import {square} from 'filename'

Define:

Use:

Code splitting in ES6

Browser support for ES6 modules

<script type="module">

No support for module ID

import './lib'
import 'lib'

Module IDs in Node

Module ID is key to modular code

Without module ID, transpilation is still necessary

Punting on

Module ID is

a huge problem

Browser imports have performance problems

HTTP/2 is not going to magically fix everything

ES6 syntax is available already

Old vs. New

Webpack + Babel ES6 modules
ES6 syntax
 Yes Yes
Static analysis Yes Yes
Code splitting Hard Hard
Transpilation Required Required
Bundling Required Recommended

The next question

How to get:

  • modular JavaScript
  • statically analyzed
  • with no bundling step
  • and no transpilation?

The answer is you

Time to step up

by writing some terrible software

We are in 2008 again

We fixed this before

Standards bodies will not fix this

Don't be afraid

It's only a website.

This is your time

Help repair

the ship of Thesus

Welcome to

the new npm

lgbtq.technology

One more thing...

Thank you!

https://slides.com/seldo/welcome-to-the-new-npm

@seldo

These slides

Talk to me