Take Back Control

Using modular JavaScript for front-end development

Node Summit, 2018-07-25

Who is this guy?

Laurie Voss

COO & co-founder, npm Inc.

@seldo

What are we talking about?

Part 1:

Avoid Nasty Surprises

Taking Back Control

Part 2:

Take Control of JavaScript Itself

Taking Back Control

JavaScript is enormously popular

Top 5 languages on GitHub

by number of pull requests opened

npm is also popular

Modular code is getting more popular

97% of the code in a modern web app comes from npm

85% of npm users do front-end development

npm is a company that sells goods and services

Your team will ship faster and your code will be more secure with npm Enterprise

Part 1:

Avoid Nasty Surprises

npm is at version 6

Upgrade right now!

npm install npm -g

1. npm locks by default

2. npm saves by default

3. npm ci will double the speed of your builds

npm ci

You can use

anywhere you used to use

npm install

and it will be twice as fast

4. npm has 2FA:

two-factor auth

Secure your npm account in 30 seconds:

npm Security

A bunch of new features

5. npm Quick Audits

Just run npm install!

npm Quick Audit stats

  • 3.5 million scans per week
  • 51% vulnerable
  • 37% high
  • 11% critical

Yikes!

6. npm audit

Just run in your current project:

npm audit

7. npm audit fix

Just run in your current project:

npm audit fix

or

npm audit fix --force

for the adventurous

8. npm.community

Part 2:

Take Control of JavaScript Itself

Modular code is great

Modular code is the solution to the problem of tiny human brains

Links in a network increase  quickly

links = n(n-1)/2

Human brains cannot handle giant programs

Modular code limits possible interactions

Modular code fits into your tiny human brain

Efficient developers

>>>

efficient code

2008: no modules in JavaScript

2009: all the modules in JavaScript

CommonJS modules

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

Define:

Use:

2009: An explosion of server-side JavaScript

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

2009: all the package managers

JavaScript in 2009 was a mess

People just

tried stuff out

Server side modules today: pretty good

The commit where npm was bundled with node:

https://github.com/nodejs/node/commit/b488be1

Programming language choice is determined by the libraries available

Node.js and npm:

a virtuous cycle

Developers

love libraries

Developers

will do a lot of work

to avoid doing work

Enter transpiling and bundling

2011: browserify

Webpack and babel

Webpack is taking over the web

Babel is changing JavaScript

60% of npm users are building React apps

Webpack + babel works great

So obviously we need to change everything.

Webpack + babel

are kind of a pain

Why are you like this, JavaScript?

Bundling and transpiling is tricky to get right

Bundling is a performance issue

Code splitting is hard

Static analysis is really hard

breaks static analysis

require()

ES6 to the rescue with

import()

ES6 modules

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

Define:

Use:

But code splitting is still really hard

Browser support for ES6 modules sucks

<script type="module"></script>

No support for module ID

import './lib'

vs

import 'lib'

Module IDs are easy in Node.js

Module ID is essential to reusable code

Without module ID you still need a transpiler

Punting on Module ID is a huge problem

Browser imports have performance issues

HTTP 2 is not going to magically fix everything

ES6 syntax is available already

Old vs. new

Webpack + Babel ES Modules
ES6 syntax Yes Yes
Static analysis Yes Yes
Code splitting Hard Hard
Transpilation Required Required*
Bundling Required Recommended

* for real-world applications

ES6 modules:

we're just not

that into them

What world do we want?

A proposal:

  • Modular JavaScript
  • That works on browsers and servers
  • Doesn't require transpilation
  • Doesn't require bundling
  • Can be lazily loaded by browsers
  • Doesn't require tons of tooling
  • Compatible with npm

npm compatibility is a hard requirement

Because developers are addicted to libraries

npm will evolve

How do we build this?

You already know how.

It's time to step up

by writing some really terrible software

It's 2008 again

We have

fixed this before

Standards bodies don't innovate

Remember XHTML 2.0?

Don't be afraid to try something weird

It's only a website.

This is your time to invent the next big thing

You can be the next random person

Thank you!

@seldo

These slides

Talk to me

Take Back Control

By seldo

Take Back Control

  • 4,633