Video and slides synchronized, mp3 and slide download available at URL https://bit.ly/2HAV7Hz. Katie Fenn talks about the process of architecting the new npmjs.com website, and examines how the changing landscape of development tooling has shaped it throughout its lifetime. She also talks about the challenges tools must address in the near-future, and how they hope their experience building the new npmjs.com website can help the wider community. Filmed at qconlondon.com. Katie Fenn is a software engineer at npm. She works with all aspects of the web, particularly JavaScript, CSS, Node.JS and ops.

1. Re-inventing
js.com

2. InfoQ.com: News & Community Site
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
npmjscom
• Over 1,000,000 software developers, architects and CTOs read the site world-
wide every month
• 250,000 senior developers subscribe to our weekly newsletter
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• 2 dedicated podcast channels: The InfoQ Podcast, with a focus on
Architecture and The Engineering Culture Podcast, with a focus on building
• 96 deep dives on innovative topics packed as downloadable emags and
minibooks
• Over 40 new content items per week

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon London
www.qconlondon.com

4. @katie_fenn
Hi, I’m
Katie

5. @katie_fenn
Hi, I’m
Katie

6. @katie_fenn
Hi, I’m
Katie
cw: animation

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

8. @katie_fenn
disclaimer:this talk is not about performance

9. @katie_fenn
Let’s go back to the
beginning

10. @katie_fenn
june 2010
landing page

11. @katie_fenn
december 2010
becoming a portal

12. @katie_fenn
august 2012
community hub

13. @katie_fenn
february 2015
company homepage

14. @katie_fenn
september 2015
marketing pages

15. @katie_fenn
march 2018
what’s next?
???

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

17. @katie_fenn
identity crisis
harder
to develop

18. @katie_fenn
identity crisis
isolated
developers

19. @katie_fenn
technology crossroads

20. @katie_fenn
technology crossroads

21. @katie_fenn
technologyhumans

22. @katie_fenn
Humans

23. @katie_fenn
follow the lead
of the community

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

25. @katie_fenn
embrace
the frontend

26. @katie_fenn
node package manager

27. @katie_fenn
80%of users use npm
for frontend
development

28. @katie_fenn

29. @katie_fenn

30. @katie_fenn
we get it
you’re feeling pain

31. @katie_fenn
we hired more
frontend
developers

32. @katie_fenn
website developers are
reporting bugs in npm
client and registry

33. @katie_fenn
lines blurring
between registry and
website developers

34. @katie_fenn
generalists
are important to us

35. @katie_fenn
is 32 people

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

37. @katie_fenn
Technology

38. @katie_fenn
so, what about
express?
cw: animation

39. @katie_fenn
nope.

40. @katie_fenn
nope.

41. @katie_fenn
there was a
better option:
spife

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

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

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

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

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

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

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

49. @katie_fenn
middleware
and
decorators
1. spife

50. @katie_fenn
middleware
and
decorators
1. spife
API data

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

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

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

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

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

56. @katie_fenn
spife is
open
source

57. @katie_fenn
react components
with css modules
2. design system

58. @katie_fenn
2. design system
components
encapsulate
standards

59. @katie_fenn
2. design system
components
encapsulate
standards

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

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

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

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

64. @katie_fenn
3. spiferack
progressive
enhancement
• enhances to XHR requests
when JS is enabled
• returns JSON response when
XHR request is received

65. @katie_fenn
3. spiferack
make doing the right thing easy

66. @katie_fenn
preview.npmjs.com

67. @katie_fenn
preview.npmjs.com

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

69. @katie_fenn
registry
cli
website
1.
2.
3.

70. @katie_fenn
Where are we going?

71. @katie_fenn
make doing the right thing easy

72. @katie_fenn
tooling that
embraces
short-range
sharing

73. @katie_fenn
a focus on making
tech work for people
rather than computers
cw: animation

74. @katie_fenn cw: animation
aesthetics

75. @katie_fenn cw: animation
accessibility
aesthetics

76. @katie_fenn cw: animation
new and shiny

77. @katie_fenn cw: animation
tried and trusted
new and shiny

78. @katie_fenn cw: animation
performance

79. @katie_fenn
resilience
performance

80. @katie_fenn
computers
do things
better

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

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

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

84. Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
npmjscom