and the future and the future of JavaScript of JavaScript Read - - PowerPoint PPT Presentation

▶
and the future and the future of javascript of javascript
SMART_READER_LITE
LIVE PREVIEW

and the future and the future of JavaScript of JavaScript Read - - PowerPoint PPT Presentation

Jul 08, 2023 192 likes •1.36k views

and the future and the future of JavaScript of JavaScript Read these slides on your device: https://slides.com/seldo/npmfutureofjavascriptqcon QCon SF, 20181105 Who is this guy? Who is this guy? Laurie Voss Laurie Voss COO

slide-1
SLIDE 1

and the future and the future

  • f JavaScript
  • f JavaScript

QCon SF, 2018­11­05

https://slides.com/seldo/npm­future­of­javascript­qcon

Read these slides on your device:

slide-2
SLIDE 2

Who is this guy? Who is this guy?

Laurie Voss Laurie Voss

COO & co­founder, npm Inc. @seldo

slide-3
SLIDE 3

This talk is about you This talk is about you

slide-4
SLIDE 4

Three parts:

  • 1. What you should know about npm

What you should know about npm

  • 2. What npm knows about you

What npm knows about you

  • 3. The future of JavaScript

The future of JavaScript

slide-5
SLIDE 5

npm is popular npm is popular

Part 1: what you should know about npm

slide-6
SLIDE 6

JavaScript is JavaScript is enormously popular enormously popular

Language popularity on GitHub, 2014­2018
slide-7
SLIDE 7

Who's using npm? Who's using npm?

All 50 of the Fortune 50 All 50 of the 50 biggest banks All 50 of the 50 biggest tech companies All 500 of the Fortune 500

(we checked!)

slide-8
SLIDE 8

JavaScript JavaScript is the most important is the most important programming language programming language in the world in the world

slide-9
SLIDE 9

npm is the package npm is the package manager for all JavaScript manager for all JavaScript

slide-10
SLIDE 10

But npm is especially But npm is especially for web developers for web developers

slide-11
SLIDE 11

97% 97%

  • f the code in a
  • f the code in a

modern web app modern web app comes from npm comes from npm

slide-12
SLIDE 12

npm is super fast now npm is super fast now

npm install npm ­g

Why not destroy the conference wifi by upgrading right now?
slide-13
SLIDE 13

Is npm faster than Is npm faster than Yarn? Yarn?

slide-14
SLIDE 14

npm 6 npm 6 locks by default locks by default

slide-15
SLIDE 15

npm ci will double npm ci will double the speed of your the speed of your builds builds

npm ci You can use anywhere you used to use npm install and it will be twice as fast

slide-16
SLIDE 16

npm Security npm Security

A bunch of new features

slide-17
SLIDE 17

npm 6 has 2FA: npm 6 has 2FA: two-factor auth two-factor auth

http://go.npm.me/2fa Secure your npm account in 30 seconds:

slide-18
SLIDE 18

npm Quick Audits npm Quick Audits

Just run npm install!

slide-19
SLIDE 19

npm Quick Audit stats npm Quick Audit stats

4 million scans per week

Yikes!

slide-20
SLIDE 20

npm audit npm audit

Just run in your current project: npm audit Learn more: http://go.npm.me/audits

slide-21
SLIDE 21

npm audit fix npm audit fix

Just run in your current project:

  • r

for the adventurous npm audit fix npm audit fix ­­force

slide-22
SLIDE 22

Security has become Security has become central to npm Inc. central to npm Inc.

slide-23
SLIDE 23

Use npm because Use npm because npm is safer than Yarn npm is safer than Yarn

https://mixmax.com/blog/to­yarn­and­back­again­npm

https://npm.im/deyarn

Yarn to npm migration tool: A user journey from Yarn back to npm:

BREAKING NEWS: Company recommends own product.

slide-24
SLIDE 24

npm.community npm.community

slide-25
SLIDE 25

npm is a company npm is a company that sells good and that sells good and services that you will services that you will find useful find useful

slide-26
SLIDE 26

npm Organizations npm Organizations

Private packages and security for teams

slide-27
SLIDE 27

npm Enterprise npm Enterprise

A full­featured private registry for your company.

slide-28
SLIDE 28

npm Security npm Security

is worth paying for

slide-29
SLIDE 29

Part 2: Part 2: What npm knows What npm knows about you about you

1.5 billion log events per day 16,000+ survey responses

slide-30
SLIDE 30

Part 2A: Part 2A: demographics demographics

Please stand up! (If you can't stand up, raise a hand) Sit down if you don't match the description.

slide-31
SLIDE 31

Stay standing if you

use npm use npm

slide-32
SLIDE 32

Stay standing if you

write JavaScript that write JavaScript that runs in browsers runs in browsers

slide-33
SLIDE 33

Stay standing if you

write JavaScript write JavaScript at work at work

slide-34
SLIDE 34

Stay standing if you

are concerned about are concerned about security of open security of open source code source code

slide-35
SLIDE 35

Stay standing if you

mostly taught mostly taught yourself JavaScript yourself JavaScript

slide-36
SLIDE 36

Stay standing if you

also write PHP or also write PHP or Java sometimes Java sometimes

slide-37
SLIDE 37

Stay standing if you

work at a company work at a company that isn't considered that isn't considered a "tech company" a "tech company"

slide-38
SLIDE 38

Stay standing if you

started using npm started using npm less than 2 years ago less than 2 years ago

slide-39
SLIDE 39

Stay standing if you

use webpack use webpack

slide-40
SLIDE 40

Stay standing if you

use babel use babel

slide-41
SLIDE 41

Stay standing if you

work on a React app work on a React app

slide-42
SLIDE 42

Stay standing if you

use TypeScript use TypeScript

slide-43
SLIDE 43

So we know some So we know some stuff about you stuff about you

slide-44
SLIDE 44

npm users don't always npm users don't always write JavaScript write JavaScript

slide-45
SLIDE 45

The programming The programming language you pick is language you pick is determined by the determined by the libraries available libraries available

http://sns.cs.princeton.edu/docs/asr­oopsla13.pdf

slide-46
SLIDE 46

Devs pick JavaScript Devs pick JavaScript because of npm because of npm

slide-47
SLIDE 47

npm users are npm users are concerned about concerned about security security

77% are concerned 52% said current tools aren't adequate

slide-48
SLIDE 48

Part 2B: Part 2B: the tools we use the tools we use

slide-49
SLIDE 49

I am about to make I am about to make you angry you angry

with graphs

slide-50
SLIDE 50

Growth in context Growth in context

slide-51
SLIDE 51

Everything in npm grows Everything in npm grows

slide-52
SLIDE 52

Share of registry Share of registry

slide-53
SLIDE 53

Front end frameworks Front end frameworks

slide-54
SLIDE 54

Frameworks never die; Frameworks never die; they only fade away they only fade away

slide-55
SLIDE 55

React React

60% of npm users say they use React

slide-56
SLIDE 56

Angular Angular

slide-57
SLIDE 57

Angryler Angryler

Angular is seeing fewer downloads, please don't yell at me about it.
slide-58
SLIDE 58

Ember Ember

The comeback kid

slide-59
SLIDE 59

Vue Vue

The next big thing?

slide-60
SLIDE 60

The React ecosystem The React ecosystem

slide-61
SLIDE 61

React Router React Router

slide-62
SLIDE 62

React is a triumph of React is a triumph of modular design modular design

slide-63
SLIDE 63

Flux Flux

slide-64
SLIDE 64

Redux Redux

slide-65
SLIDE 65

React Hooks React Hooks

Coming soon to a repo near you

slide-66
SLIDE 66

GraphQL GraphQL

slide-67
SLIDE 67

RxJS RxJS

Get Hannah to explain!

slide-68
SLIDE 68

Back-end frameworks Back-end frameworks

slide-69
SLIDE 69

Koa Koa

slide-70
SLIDE 70

Sails Sails

slide-71
SLIDE 71

Hapi Hapi

slide-72
SLIDE 72

Next.js Next.js

This looks weird

slide-73
SLIDE 73

Team B / Team A Team B / Team A

slide-74
SLIDE 74

Tooling Tooling

slide-75
SLIDE 75

What tools do we use? What tools do we use?

slide-76
SLIDE 76

Transpilers Transpilers

slide-77
SLIDE 77

46% 46% of npm users are

  • f npm users are

using TypeScript using TypeScript

Say what?!

Source: npm user survey, 2017/2018

slide-78
SLIDE 78

Linters Linters

slide-79
SLIDE 79

So about ESLint... So about ESLint...

slide-80
SLIDE 80

The ESLint The ESLint Credentials Credentials Harvester Harvester

slide-81
SLIDE 81

npm Security npm Security in action in action

slide-82
SLIDE 82

Take JavaScript Take JavaScript security seriously security seriously

slide-83
SLIDE 83

Testing Testing

slide-84
SLIDE 84

Splitting developers Splitting developers by experience by experience

slide-85
SLIDE 85

Best practices come Best practices come with experience with experience

slide-86
SLIDE 86

Security is associated Security is associated with experience with experience

slide-87
SLIDE 87

Part 3: Part 3: the future of JavaScript the future of JavaScript

slide-88
SLIDE 88

Learning from history: Learning from history: nothing last forever nothing last forever

jQuery, we hardly knew ye.

slide-89
SLIDE 89

Learn GraphQL Learn GraphQL

Ill­advised prediction

slide-90
SLIDE 90

Use TypeScript Use TypeScript

Ill­advised prediction

slide-91
SLIDE 91

What happens to What happens to npm in the future? npm in the future?

slide-92
SLIDE 92

npm is not only npm is not only JavaScript JavaScript

and it hasn't been for some time

slide-93
SLIDE 93

WASM is coming WASM is coming

slide-94
SLIDE 94

WASM is already here WASM is already here

https://hacks.mozilla.org/2018/04/hello­wasm­pack/

slide-95
SLIDE 95

Bundling and transpiling Bundling and transpiling are hard to get rid of are hard to get rid of

Ill­advised prediction

slide-96
SLIDE 96

Transpilation Transpilation is bad news is bad news for JavaScript for JavaScript

slide-97
SLIDE 97

Node + JavaScript: Node + JavaScript: merge or die merge or die

slide-98
SLIDE 98

The best framework The best framework is always the one is always the one with the most users. with the most users.

slide-99
SLIDE 99

Use React Use React

Ill­advised prediction

slide-100
SLIDE 100

Libraries either die Libraries either die

  • r transcend
  • r transcend

Backbone died jQuery is part of every browser

slide-101
SLIDE 101

Standards bodies are Standards bodies are bad at inventing things bad at inventing things

slide-102
SLIDE 102

Make JSX Make JSX part of JavaScript part of JavaScript

slide-103
SLIDE 103

We already did and it We already did and it was called E4X was called E4X

slide-104
SLIDE 104

Can React Can React transcend? transcend?

npm install react­color

slide-105
SLIDE 105

What about that What about that slowdown in React? slowdown in React?

slide-106
SLIDE 106

Can React Can React components hit components hit critical mass? critical mass?

slide-107
SLIDE 107

Frameworks Frameworks adopting React adopting React would force would force browsers to act browsers to act

slide-108
SLIDE 108

What about web What about web components? components?

Web components would be great if they worked but they don't, yet. Don't @ me.

slide-109
SLIDE 109

We can raise the web We can raise the web to a new level to a new level

slide-110
SLIDE 110

Don't be afraid Don't be afraid

Web developers will always have a job

slide-111
SLIDE 111

A bigger web A bigger web is a better web is a better web

slide-112
SLIDE 112

npm is for the web npm is for the web

slide-113
SLIDE 113

The future looks fun The future looks fun

slide-114
SLIDE 114

The web will remain The web will remain under construction under construction

slide-115
SLIDE 115

We can do this We can do this

slide-116
SLIDE 116

https://slides.com/seldo/npm­future­of­javascript­qcon

@seldo

These slides are available right now Now would be a good time to follow me on Twitter

npm ❤ you npm ❤ you