js - qcon · this talk is not about performance. @katie_fenn let’s go back to the beginning....

Re-inventingjs.com

@katie_fenn

Hi, I’m

Katie

@katie_fenn

Hi, I’m

Katiecw: animation

@katie_fenn

•work at

•make the npmjs.com website

•also support the registry

•from sheffield

@katie_fenn

disclaimer: this talk is not about performance

@katie_fenn

Let’s go back to the beginning

@katie_fenn

june 2010

landing page

@katie_fenn

december 2010

becoming a portal

@katie_fenn

august 2012

community hub

@katie_fenn

february 2015

company homepage

@katie_fenn

september 2015

marketing pages

@katie_fenn

march 2018

what’s next?

???

@katie_fenn

services• orgs • private repos • 2fa • access tokens • ???

@katie_fenn

identity crisis

harder to develop

@katie_fenn

identity crisis

isolated developers

@katie_fenn

technology crossroads

@katie_fenn

technologyhumans

@katie_fenn

Humans

@katie_fenn

follow the lead of the community

@katie_fenn

reactwebpack • postcss

enzyme • vuenext.js re

dux

jest

@katie_fenn

embrace the frontend

@katie_fenn

node package manager

@katie_fenn

80% of users use npm for frontend development

@katie_fenn

@katie_fenn

we get it you’re feeling pain

@katie_fenn

we hired more

frontend developers

@katie_fenn

website developers are reporting bugs in npm client and registry

@katie_fenn

lines blurring between registry and website developers

@katie_fenn

generalists are important to us

@katie_fenn

is 32 people

@katie_fenn

knowledge sharing

• shared ownership

• reuse code across projects

@katie_fenn

Technology

@katie_fenn

so, what about express?

cw: animation

@katie_fenn

nope.

@katie_fenn

there was a better option:

spife

@katie_fenn cw: animation

“doesn’t that make it hard to hire spife developers?”

- anonymous npm employee


“it’s good for finding people within npm”

- anonymous npm employee

@katie_fenn

a batteries-included http framework

1. spife

icon: cutlery by Chanut is Industries from the Noun Project

@katie_fenn

a batteries-included http framework

1. spiferouting • db • orm middleware monitoring logging metrics • auth

@katie_fenn

opinionated djavascript

1. spife

icon: cutlery by Chanut is Industries from the Noun Project

• familiar • asynchronous • structured • comfortable

@katie_fenn

middleware and

decorators

1. spife

@katie_fenn

middleware and

decorators

1. spifeAPI data

@katie_fenn

middleware and

decorators

1. spifeAPI data rate limit

@katie_fenn

middleware and

decorators

1. spifeAPI data rate limit check csrf

@katie_fenn

middleware and

decorators


auth

@katie_fenn

middleware and

decorators


auth validate

@katie_fenn

middleware and

decorators


auth validate schema

@katie_fenn

spife is open source

@katie_fenn

react components with css modules

2. design system

@katie_fenn

2. design systemcomponents encapsulate standards

@katie_fenn

3. spiferack

a react framework

• built-in server-side-rendering

• built-in code splitting

• progressive enhancement

@katie_fenn

3. spiferack

server-side rendering

• searchable content

• fast initial page renders

@katie_fenn

3. spiferack

code splitting

• automatically split per-route

• spreads bundle loading evenly

@katie_fenn

3. spiferack<Form action=“/login” method=“POST> <InputText name=“username” label=“Username" /> <InputPassword name=“password” label=“Username" /> </Form>

progressive enhancement

@katie_fenn

3. spiferack

progressive enhancement

• enhances to XHR requests when JS is enabled

• returns JSON response when XHR request is received

@katie_fenn

3. spiferack

make doing the right thing easy

@katie_fenn

preview.npmjs.com

@katie_fenn

it’s much better and we hope you’ll love it

@katie_fenn

registry cli website

1. 2. 3.

@katie_fenn

Where are we going?

@katie_fenn

make doing the right thing easy

@katie_fenn

tooling that embraces short-range sharing

@katie_fenn

a focus on making tech work for people rather than computers

cw: animation


aesthetics


accessibilityaesthetics


new and shiny


tried and trustednew and shiny


performance

@katie_fenn

resilienceperformance

@katie_fenn

computers do things better

@katie_fenn

Jenn Schiffer

computers do things better faster

cw: animation

@katie_fenn

@katie_fenn @npmjs preview.npmjs.com

Thank you

js - qcon · this talk is not about performance. @katie_fenn let’s go back to the beginning....

Documents