Re-inventing js.com Hi, Im Katie @katie_fenn Hi, Im Katie - PowerPoint PPT Presentation

Re-inventing js.com

Hi, I’m Katie @katie_fenn

Hi, I’m Katie @katie_fenn

Hi, I’m Katie @katie_fenn cw: animation

• work at • make the npmjs.com website • also support the registry • from sheffield @katie_fenn

disclaimer: this talk is not about performance @katie_fenn

L et’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

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

identity crisis harder to develop @katie_fenn

identity crisis isolated developers @katie_fenn

technology crossroads @katie_fenn

technology crossroads @katie_fenn

humans technology @katie_fenn

Humans @katie_fenn

follow the lead of the community @katie_fenn

webpack • postcss react next.js redux jest enzyme • vue @katie_fenn

embrace the frontend @katie_fenn

node package manager @katie_fenn

80% of users use npm for frontend development @katie_fenn

@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

• shared knowledge ownership sharing • reuse code across projects @katie_fenn

Technology @katie_fenn

so, what about express? @katie_fenn cw: animation

nope. @katie_fenn

nope. @katie_fenn

there was a better option: spife @katie_fenn

“doesn’t that make it hard to hire spife developers?” - anonymous npm employee @katie_fenn cw: animation

“doesn’t that make it hard to hire spife developers?” - anonymous npm employee @katie_fenn cw: animation

“it’s good for finding people within npm ” - anonymous npm employee @katie_fenn cw: animation

“it’s good for finding people within npm ” - anonymous npm employee @katie_fenn cw: animation

1. spife a batteries-included http framework @katie_fenn icon: cutlery by Chanut is Industries from the Noun Project

1. spife routing • db • orm a middleware monitoring batteries-included logging http framework metrics • auth @katie_fenn

1. spife • familiar opinionated • asynchronous djavascript • structured • comfortable @katie_fenn icon: cutlery by Chanut is Industries from the Noun Project

1. spife middleware and decorators @katie_fenn

1. spife middleware API data and decorators @katie_fenn

1. spife middleware API data rate limit and decorators @katie_fenn

1. spife middleware API data rate limit check csrf and decorators @katie_fenn

1. spife middleware API data rate limit check csrf and auth decorators @katie_fenn

1. spife middleware API data rate limit check csrf and auth validate decorators @katie_fenn

1. spife middleware API data rate limit check csrf and auth validate schema decorators @katie_fenn

spife is open source @katie_fenn

2. design system react components with css modules @katie_fenn

2. design system components encapsulate standards @katie_fenn

2. design system components encapsulate standards @katie_fenn

3. spiferack a react • built-in server-side-rendering • built-in code splitting framework • progressive enhancement @katie_fenn

3. spiferack server-side • searchable content rendering • fast initial page renders @katie_fenn

3. spiferack code • automatically split per-route splitting • spreads bundle loading evenly @katie_fenn

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

3. spiferack • enhances to XHR requests progressive when JS is enabled enhancement • 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

preview.npmjs.com @katie_fenn

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

1. registry 2. cli 3. website @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 @katie_fenn cw: animation

aesthetics @katie_fenn cw: animation

aesthetics accessibility @katie_fenn cw: animation

new and shiny @katie_fenn cw: animation

new and shiny tried and trusted @katie_fenn cw: animation

performance @katie_fenn cw: animation

performance resilience @katie_fenn

computers do things better @katie_fenn

computers do things better faster Jenn Schiffer @katie_fenn cw: animation

Thank you @katie_fenn @npmjs preview.npmjs.com @katie_fenn

Thank you @katie_fenn @npmjs preview.npmjs.com @katie_fenn