Slide 1
Slide 1 text
The State of JavaScript
1
Slide 2
Slide 2 text
this.setState('javascript', talk());
2
Slide 3
Slide 3 text
Jack Franklin
Frontend NE, August 2016
3
Slide 4
Slide 4 text
@pusher
4
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
I've spent the last ten
months as a developer
evangelist
7
Slide 8
Slide 8 text
This means I've talked to
a lot of developers.
8
Slide 9
Slide 9 text
Given ~ 20 or so talks
9
Slide 10
Slide 10 text
And listened to many,
many more
10
Slide 11
Slide 11 text
Teaching
—ES2015
—React
—Elm (!)
11
Slide 12
Slide 12 text
Thoughts and Opinions
12
Slide 13
Slide 13 text
It's basically me rambling
for a bit
13
Slide 14
Slide 14 text
The State of JavaScript
14
Slide 15
Slide 15 text
Or: a series of things that I've been thinking about.
15
Slide 16
Slide 16 text
Or: how we keep getting it wrong and then getting it
right
16
Slide 17
Slide 17 text
!
17
Slide 18
Slide 18 text
Never been a better time
18
Slide 19
Slide 19 text
JavaScript gets a lot of
stick, some of it deserved
19
Slide 20
Slide 20 text
[1, 2, 3].map(parseInt)
// => [1, NaN, NaN]
!
20
Slide 21
Slide 21 text
But it's still the best
language ever
21
Slide 22
Slide 22 text
Browers are getting more
powerful
22
Slide 23
Slide 23 text
More and more APIs
being added
23
Slide 24
Slide 24 text
The native DOM API isn't
complete crap!
24
Slide 25
Slide 25 text
Low Level APIs
25
Slide 26
Slide 26 text
Service Worker vs App Cache
https://vimeo.com/album/3953264/video/165995029
26
Slide 27
Slide 27 text
App Cache
High Level, does one thing, hard to customise /
control
27
Slide 28
Slide 28 text
Service Worker
—Low level
—Less functionality "out of the box"
—Developers get full control
28
Slide 29
Slide 29 text
NodeJS
29
Slide 30
Slide 30 text
Learning as an industry
30
Slide 31
Slide 31 text
Native learning from
frameworks
31
Slide 32
Slide 32 text
document.querySelectorAll
32
Slide 33
Slide 33 text
=> from CoffeeScript
33
Slide 34
Slide 34 text
Object.observe
34
Slide 35
Slide 35 text
1. Two way data binding is great but needs dirty
checking which is...dirty
2. Let's implement Object.observe natively to deal
with this
3. Oh hey, ReactJS!
35
Slide 36
Slide 36 text
Object.observe
No More
36
Slide 37
Slide 37 text
Cumulative learning from
competing frameworks
37
Slide 38
Slide 38 text
MVC doesn't work for
client side applications,
even though it's great on
the server.
38
Slide 39
Slide 39 text
It was a logical starting
point; we knew no better.
39
Slide 40
Slide 40 text
We tried it and we learned
40
Slide 41
Slide 41 text
Angular 1.X moved heavily to components.
Ember 2 removed controllers.
React only has components.
41
Slide 42
Slide 42 text
Web Components
42
Slide 43
Slide 43 text
https://blog.pusher.com/realtime-web-components/
43
Slide 44
Slide 44 text
44
Slide 45
Slide 45 text
ES2015 was a mess
45
Slide 46
Slide 46 text
A fantastic, feature heavy
mess
46
Slide 47
Slide 47 text
ES2015 advances the
language hugely
47
Slide 48
Slide 48 text
But it came at a cost of
overwhelming developers
48
Slide 49
Slide 49 text
50+
New features in ES20151
1 I got bored of counting...
49
Slide 50
Slide 50 text
Some features are loved
—Promise makes async code a bit more intuitive
—Arrow fns make scope intuitive
—let makes bindings intuitive
50
Slide 51
Slide 51 text
Some features have that JS Quirk (TM)
const person = {
name: 'Jack',
age: 24,
supports: 'Newcastle'
}
51
Slide 52
Slide 52 text
It's a const, right?
person.supports = 'Sunderland'
52
Slide 53
Slide 53 text
Well then...
console.log(person);
// => { name: 'Jack',
age: 24,
supports: 'Sunderland'
}
53
Slide 54
Slide 54 text
And some are less loved...
class Crockford extends IDontLikeThis {
constructor() {
this.mistake = true;
}
}
54
Slide 55
Slide 55 text
2
New features in ES2016
55
Slide 56
Slide 56 text
Array.prototype.includes
56
Slide 57
Slide 57 text
Was going to be called contains, but MooTools
adds Array.prototype.contains... 2
2 https://esdiscuss.org/topic/having-a-non-enumerable-array-prototype-contains-may-not-be-web-
compatible
57
Slide 58
Slide 58 text
** (exponatiation)
58
Slide 59
Slide 59 text
The new process works
59
Slide 60
Slide 60 text
—Stage 0: strawman
—Stage 1: proposal
—Stage 2: draft
—Stage 3: candidate
—Stage 4: finished
http://www.2ality.com/2015/11/tc39-process.html
60
Slide 61
Slide 61 text
Each year any stage 4
proposals are taken into
JS
61
Slide 62
Slide 62 text
Yearly, small releases
62
Slide 63
Slide 63 text
Easy to keep up with,
easy to know browser
support
63
Slide 64
Slide 64 text
Get notified of new
features when they are
voted in
64
Slide 65
Slide 65 text
Async / Await in ES2017
65
Slide 66
Slide 66 text
// returns a Promise
function getUser() {...}
async function logUser() {
let user = await getUser();
console.log('USER!', user);
}
66
Slide 67
Slide 67 text
Looks sync, is async
!
67
Slide 68
Slide 68 text
Transpilers
68
Slide 69
Slide 69 text
69
Slide 70
Slide 70 text
70
Slide 71
Slide 71 text
ES2015 support
—Edge 14: 90%
—Chrome 52 / Opera 39: 98%
—FF 49: 93%
—Safari 10: 100% (kinda, read on...)
—Node 6: 93%
71
Slide 72
Slide 72 text
Note: "100% ES2015 support" is misleading
—ES2015: the module syntax
—Not specced: module loading
(Yes, this is really confusing!)
72
Slide 73
Slide 73 text
A browser can claim 100% ES2015 support, like
Safari 10
And it's technically true.
But kinda, not really.
73
Slide 74
Slide 74 text
Will we ever be rid of
transpilers?
74
Slide 75
Slide 75 text
75
Slide 76
Slide 76 text
It depends on your target
76
Slide 77
Slide 77 text
And how hipster you want
to be
77
Slide 78
Slide 78 text
Transpilers play a huge
role in the JS proposal
process
78
Slide 79
Slide 79 text
79
Slide 80
Slide 80 text
!
—Developers can try out new features ahead of time
—Feedback loop is shortened
—JS proposals don't feel so far away
80
Slide 81
Slide 81 text
!
—Developers leaning on features that might not
exist
81
Slide 82
Slide 82 text
Be wary of depending on Babel plugins for early
stage proposals
Or at least, be prepared for a rewrite.
82
Slide 83
Slide 83 text
Proposals in stage 3+ are
almost certain to make it
through
83
Slide 84
Slide 84 text
Proposals in stage 2 are
most likely going to make
it
84
Slide 85
Slide 85 text
Side note:
Object.observe made it
into Chrome before it was
binned
85
Slide 86
Slide 86 text
Do you need Babel?
86
Slide 87
Slide 87 text
—Edge 14: 90%
—Chrome 52 / Opera 39: 98%
—FF 49: 93%
—Safari 10: 100% (kinda)
—Node 6: 93%
87
Slide 88
Slide 88 text
Node 6: (nearly) full ES2015 support
babel-preset-node6
OR: no Babel depending on what features you need.
88
Slide 89
Slide 89 text
Will we be using
transpilers forever?
89
Slide 90
Slide 90 text
If you want to stick right
on the cutting edge and
use features before they
are in browsers, yes.
90
Slide 91
Slide 91 text
If you're happy to use a
subset of new features, or
lucky enough to target
"modern" browsers, no.
91
Slide 92
Slide 92 text
Once ES2015 is fully
supported across all
browsers most people
build for, less people will
use transpilers
92
Slide 93
Slide 93 text
TypeScript, Elm and
others
93
Slide 94
Slide 94 text
ES2015 had three goals:
—better for complex web applications
—better for library authors
—better as a target language
94
Slide 95
Slide 95 text
On the shoulders of
CoffeeScript
95
Slide 96
Slide 96 text
If you're going to
transpile, why not add
more?
96
Slide 97
Slide 97 text
Types are great!
Take learnings from other languages / ecosystems
and apply them to JavaScript.
97
Slide 98
Slide 98 text
This will keep happening
Varying levels of "transpilerness":
—Babel (ES features + JSX)
—TypeScript (Superset of JS)
—Elm (WTF IS GOING ON)
98
Slide 99
Slide 99 text
Nothing wrong with a compile-to-JS language
But be wary of the tradeoffs.
99
Slide 100
Slide 100 text
As always, it depends!
100
Slide 101
Slide 101 text
101
Slide 102
Slide 102 text
Modules!
102
Slide 103
Slide 103 text
NodeJS is dreamy
$ npm install x
// index.js
var x = require('x');
$ node index.js
103
Slide 104
Slide 104 text
1. Install a package.
2. Use it.
104
Slide 105
Slide 105 text
That's what we want in
the browser.
105
Slide 106
Slide 106 text
ES2015 modules in the browser 3
import { fn } from './lib';
import React from 'http://cdn.com/react.js';
3 not yet supported across browsers
106
Slide 107
Slide 107 text
Guy Bedford, PolyConf4
4 https://www.youtube.com/watch?v=cRSBi1EAOCo
107
Slide 108
Slide 108 text
108
Slide 109
Slide 109 text
ES2015 imports and
exports are static
109
Slide 110
Slide 110 text
// nooooppee
if (x) {
import React from 'react';
export { y };
}
110
Slide 111
Slide 111 text
Use map from Lodash:
var _ = require('lodash');
_.map(...);
Then:
some-bundle-tool app.js > bundle.js
Included:
—your code
—ALL of Lodash
111
Slide 112
Slide 112 text
In a fully ES2015 moduled world
import { map } from 'lodash';
_.map(...);
Then:
some-bundle-tool app.js > bundle.js
Included:
—your code
—Just lodash.map!
112
Slide 113
Slide 113 text
We're not there yet
ES2015 module support is lacking across
everywhere.
113
Slide 114
Slide 114 text
A fully ES2015 module
web will be a much better
one.
114
Slide 115
Slide 115 text
https://github.com/rollup/rollup
115
Slide 116
Slide 116 text
Tooling woes
116
Slide 117
Slide 117 text
117
Slide 118
Slide 118 text
JavaScript Fatigue =
we're figuring this out
118
Slide 119
Slide 119 text
You have control here.
119
Slide 120
Slide 120 text
Find your preferred tool
set.
120
Slide 121
Slide 121 text
Browserify, Webpack,
jspm, others?
121
Slide 122
Slide 122 text
ES2015? Babel?
122
Slide 123
Slide 123 text
Stick with your toolchain
123
Slide 124
Slide 124 text
Evaluate every now and
then
124
Slide 125
Slide 125 text
The baseline
125
Slide 126
Slide 126 text
Webpack is not the baseline
Gulp / Grunt is not the baseline
browserify is not the baseline
React is not the baseline
126
Slide 127
Slide 127 text
console.log('hello world');
is the baseline
127
Slide 128
Slide 128 text
This should always be the
baseline
128
Slide 129
Slide 129 text
Especially for beginners
129
Slide 130
Slide 130 text
And this is how we have
to teach JavaScript
130
Slide 131
Slide 131 text
Layer your tools as you
need to
131
Slide 132
Slide 132 text
But not before
132
Slide 133
Slide 133 text
Finding the right
abstraction
133
Slide 134
Slide 134 text
React is an abstraction
134
Slide 135
Slide 135 text
The price of abstractions
is a little indirection
135
Slide 136
Slide 136 text
The payoff is quicker,
nicer and more enjoyable
development
136
Slide 137
Slide 137 text
Nothing is free
137
Slide 138
Slide 138 text
Performance
138
Slide 139
Slide 139 text
https://developers.google.com/web/tools/chrome-
devtools/profile/evaluate-performance/rail?hl=en
139
Slide 140
Slide 140 text
Paul Lewis: RAIL in the
real world 5
5 https://www.youtube.com/watch?v=iIV1xPFXmBs
140
Slide 141
Slide 141 text
Progressive Web Apps
141
Slide 142
Slide 142 text
https://addyosmani.com/blog/getting-started-with-
progressive-web-apps/
142
Slide 143
Slide 143 text
! Load Instantly (Service Worker)
! Add to Home Screen
! Web push notifications
! Secure
! Fast
! Responsive
https://developers.google.com/web/progressive-
web-apps/
143
Slide 144
Slide 144 text
Offering a great mobile
experience on the web
144
Slide 145
Slide 145 text
Flipkart, India’s largest e-
commerce site, decided to
combine their web presence and
native app into a Progressive Web
Application that has resulted in a
70% increase in conversions. 6
6 https://developers.google.com/web/showcase/2016/flipkart
145
Slide 146
Slide 146 text
Server Side Rendering
146
Slide 147
Slide 147 text
147
Slide 148
Slide 148 text
GoCardless is a universal
ReactJS application 7
7 https://gocardless.com/blog/how-we-built-the-new-gocardless.com/
148
Slide 149
Slide 149 text
Once the initial page is
displayed, a request is
made to fetch the rest of
the site's React app.
149
Slide 150
Slide 150 text
All subsequent navigation
is blindingly fast, not
suffering the latency of
HTTP requests since the
browser already has the
whole app.
150
Slide 151
Slide 151 text
If the user does not have
JS, they still experience
the fully rendered page
and only miss out on the
fast navigation.
151
Slide 152
Slide 152 text
—Ember Fastboot
—Angular 2 Universal
—And others
(This isn't for every app!)
152
Slide 153
Slide 153 text
https://www.youtube.com/watch?v=Bb0Uk8c6ltQ
153
Slide 154
Slide 154 text
Is the web getting more
complicated?
154
Slide 155
Slide 155 text
It depends
155
Slide 156
Slide 156 text
Is it hard work to build a
performant, mobile
friendly, offline first web
application?
156
Slide 157
Slide 157 text
Yes
157
Slide 158
Slide 158 text
But that's exciting!
158
Slide 159
Slide 159 text
No one is making you
build complex,
progressive, offline first
apps in the browser.
159
Slide 160
Slide 160 text
But there's lots of great
reasons to
160
Slide 161
Slide 161 text
And if you spend the time
and energy.
161
Slide 162
Slide 162 text
You'll get your rewards.
162
Slide 163
Slide 163 text
And have loads of fun in
the meantime!
163
Slide 164
Slide 164 text
Thanks
@Jack_Franklin
javascriptplayground.com
164
Slide 165
Slide 165 text
165