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

▶
re inventing
SMART_READER_LITE
LIVE PREVIEW

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

Apr 25, 2023 423 likes •1.25k views

Re-inventing js.com Hi, Im Katie @katie_fenn Hi, Im Katie @katie_fenn Hi, Im Katie @katie_fenn cw: animation work at make the npmjs.com website also support the registry from sheffield @katie_fenn disclaimer:

slide-1
SLIDE 1

Re-inventing

js.com

slide-2
SLIDE 2

@katie_fenn

Hi, I’m

Katie

slide-3
SLIDE 3

@katie_fenn

Hi, I’m

Katie

slide-4
SLIDE 4

@katie_fenn

Hi, I’m

Katie

cw: animation

slide-5
SLIDE 5

@katie_fenn

  • work at
  • make the npmjs.com website
  • also support the registry
  • from sheffield
slide-6
SLIDE 6

@katie_fenn

disclaimer:

this talk is not about performance

slide-7
SLIDE 7

@katie_fenn

Let’s go back to the

beginning

slide-8
SLIDE 8

@katie_fenn

june 2010 landing page

slide-9
SLIDE 9

@katie_fenn

december 2010 becoming a portal

slide-10
SLIDE 10

@katie_fenn

august 2012 community hub

slide-11
SLIDE 11

@katie_fenn

february 2015 company homepage

slide-12
SLIDE 12

@katie_fenn

september 2015 marketing pages

slide-13
SLIDE 13

@katie_fenn

march 2018 what’s next?

???

slide-14
SLIDE 14

@katie_fenn

services

  • rgs
  • private repos
  • 2fa
  • access tokens
  • ???
slide-15
SLIDE 15

@katie_fenn

identity crisis

harder

to develop

slide-16
SLIDE 16

@katie_fenn

identity crisis

isolated

developers

slide-17
SLIDE 17

@katie_fenn

technology crossroads

slide-18
SLIDE 18

@katie_fenn

technology crossroads

slide-19
SLIDE 19

@katie_fenn

technology humans

slide-20
SLIDE 20

@katie_fenn

Humans

slide-21
SLIDE 21

@katie_fenn

follow the lead

  • f the community
slide-22
SLIDE 22

@katie_fenn

react

webpack • postcss

enzyme • vue

next.js

redux

jest

slide-23
SLIDE 23

@katie_fenn

embrace

the frontend

slide-24
SLIDE 24

@katie_fenn

node package manager

slide-25
SLIDE 25

@katie_fenn

80%

  • f users use npm

for frontend

development

slide-26
SLIDE 26

@katie_fenn

slide-27
SLIDE 27

@katie_fenn

slide-28
SLIDE 28

@katie_fenn

we get it

you’re feeling pain

slide-29
SLIDE 29

@katie_fenn

we hired more

frontend

developers

slide-30
SLIDE 30

@katie_fenn

website developers are

reporting bugs in npm

client and registry

slide-31
SLIDE 31

@katie_fenn

lines blurring

between registry and

website developers

slide-32
SLIDE 32

@katie_fenn

generalists

are important to us

slide-33
SLIDE 33

@katie_fenn

is 32 people

slide-34
SLIDE 34

@katie_fenn

knowledge

sharing

  • shared
  • wnership
  • reuse code

across projects

slide-35
SLIDE 35

@katie_fenn

Technology

slide-36
SLIDE 36

@katie_fenn

so, what about

express?

cw: animation

slide-37
SLIDE 37

@katie_fenn

nope.

slide-38
SLIDE 38

@katie_fenn

nope.

slide-39
SLIDE 39

@katie_fenn

there was a

better option:

spife

slide-40
SLIDE 40

@katie_fenn cw: animation

“doesn’t that

make it hard

to hire spife

developers?”

  • anonymous

npm employee

slide-41
SLIDE 41

@katie_fenn cw: animation

“doesn’t that

make it hard

to hire spife

developers?”

  • anonymous

npm employee

slide-42
SLIDE 42

@katie_fenn cw: animation

“it’s good for

finding people

within npm”

  • anonymous

npm employee

slide-43
SLIDE 43

@katie_fenn cw: animation

“it’s good for

finding people

within npm”

  • anonymous

npm employee

slide-44
SLIDE 44

@katie_fenn

a

batteries-included

http framework

  • 1. spife
icon: cutlery by Chanut is Industries from the Noun Project
slide-45
SLIDE 45

@katie_fenn

a

batteries-included

http framework

  • 1. spife

routing • db • orm

middleware

monitoring

logging

metrics • auth

slide-46
SLIDE 46

@katie_fenn

  • pinionated

djavascript

  • 1. spife
icon: cutlery by Chanut is Industries from the Noun Project
  • familiar
  • asynchronous
  • structured
  • comfortable
slide-47
SLIDE 47

@katie_fenn

middleware and

decorators

  • 1. spife
slide-48
SLIDE 48

@katie_fenn

middleware and

decorators

  • 1. spife

API data

slide-49
SLIDE 49

@katie_fenn

middleware and

decorators

  • 1. spife

API data rate limit

slide-50
SLIDE 50

@katie_fenn

middleware and

decorators

  • 1. spife

API data rate limit check csrf

slide-51
SLIDE 51

@katie_fenn

middleware and

decorators

  • 1. spife

API data rate limit check csrf auth

slide-52
SLIDE 52

@katie_fenn

middleware and

decorators

  • 1. spife

API data rate limit check csrf auth validate

slide-53
SLIDE 53

@katie_fenn

middleware and

decorators

  • 1. spife

API data rate limit check csrf auth validate schema

slide-54
SLIDE 54

@katie_fenn

spife is

  • pen

source

slide-55
SLIDE 55

@katie_fenn

react components

with css modules

  • 2. design system
slide-56
SLIDE 56

@katie_fenn

  • 2. design system

components

encapsulate

standards

slide-57
SLIDE 57

@katie_fenn

  • 2. design system

components

encapsulate

standards

slide-58
SLIDE 58

@katie_fenn

  • 3. spiferack

a react

framework

  • built-in server-side-rendering
  • built-in code splitting
  • progressive enhancement
slide-59
SLIDE 59

@katie_fenn

  • 3. spiferack

server-side

rendering

  • searchable content
  • fast initial page renders
slide-60
SLIDE 60

@katie_fenn

  • 3. spiferack

code splitting

  • automatically split per-route
  • spreads bundle loading evenly
slide-61
SLIDE 61

@katie_fenn

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

progressive

enhancement

slide-62
SLIDE 62

@katie_fenn

  • 3. spiferack

progressive

enhancement

  • enhances to XHR requests

when JS is enabled

  • returns JSON response when

XHR request is received

slide-63
SLIDE 63

@katie_fenn

  • 3. spiferack

make doing the right thing easy

slide-64
SLIDE 64

@katie_fenn

preview.npmjs.com

slide-65
SLIDE 65

@katie_fenn

preview.npmjs.com

slide-66
SLIDE 66

@katie_fenn

it’s much better

and we hope

you’ll love it

slide-67
SLIDE 67

@katie_fenn

registry cli website 1. 2. 3.

slide-68
SLIDE 68

@katie_fenn

Where are we going?

slide-69
SLIDE 69

@katie_fenn

make doing the right thing easy

slide-70
SLIDE 70

@katie_fenn

tooling that

embraces

short-range

sharing

slide-71
SLIDE 71

@katie_fenn

a focus on making

tech work for people

rather than computers

cw: animation

slide-72
SLIDE 72

@katie_fenn cw: animation

aesthetics

slide-73
SLIDE 73

@katie_fenn cw: animation

accessibility

aesthetics

slide-74
SLIDE 74

@katie_fenn cw: animation

new and shiny

slide-75
SLIDE 75

@katie_fenn cw: animation

tried and trusted

new and shiny

slide-76
SLIDE 76

@katie_fenn cw: animation

performance

slide-77
SLIDE 77

@katie_fenn

resilience

performance

slide-78
SLIDE 78

@katie_fenn

computers

do things

better

slide-79
SLIDE 79

@katie_fenn

Jenn Schiffer

computers

do things

better

faster

cw: animation

slide-80
SLIDE 80

@katie_fenn

@katie_fenn @npmjs preview.npmjs.com

Thank you

slide-81
SLIDE 81

@katie_fenn

@katie_fenn @npmjs preview.npmjs.com

Thank you