1.
Alex Nadalin - CTO @ namshi.com
JsDay 2017 (Verona - Italy)

2.
WARNING
Controversy
ahead

3.
Take #1

4.
Started with a SPA

5.
...which pissed bots off

6.
...which pissed clients off

7.
...which pissed clients off

8.
...which pissed clients off

9.
Take #2

10.
Isomorphic js

11.
Both on the client & the server

12.
universal js

13.
Works only in movies

14.
https://2015.jsday.it/talk/back-to-the-future-iso
morphic-javascript-applications/

15.
Clients are still angry

16.
Sneak peak of a custom-made
universal js framework

17.
Sneak peak of a custom-made
universal js framework

18.
Sneak peak of a custom-made
universal js framework

19.
Fonzie does not approve.

20.
The do-over

21.
Simplify our codebase

22.
Better client-side performance

23.
roi

24.
Appealing looks

25.
Best website?

26.
It’s an app.

27.
It’s an app.
Smooth transitions

28.
It’s an app.
Smooth transitions
Great (perceived) performance

29.
Can a website
Match that?

30.
Spa closely bridges the gap

31.
Spa closely bridges the gap
Additional layer of complexity

32.
Generally no.
Spa closely bridges the gap
Additional layer of complexity

33.
Do we need it?

34.
service is king

35.
The b* stack

36.
The b* stack

37.
The b* stack

38.
The b* stack

39.
The b* stack

40.
server

41.
client

42.
Webpack 2

43.
Webpack 2
Tree-shaking saved us
15/20% of the gzipped
bundle size

44.
Say “no” to jquery(as much as possible)

45.
Abstraction === cost

46.
Abstraction === cost
let obj = {
name: 'alex',
age: 28,
hair: 'enough',
status: 'married',
job: 'who really knows',
}
_.pick(obj, ['name', 'age'])
{
name: obj.name,
age: obj.age,
}

47.
Abstraction === cost
let obj = {
name: 'alex',
age: 28,
hair: 'enough',
status: 'married',
job: 'who really knows',
}
_.pick(obj, ['name', 'age'])
{
name: obj.name,
age: obj.age,
}

48.
Abstraction === cost
let obj = {
name: 'alex',
age: 28,
hair: 'enough',
status: 'married',
job: 'who really knows',
}
_.pick(obj, ['name', 'age'])
{
name: obj.name,
age: obj.age,
}

49.
Abstraction === cost
let obj = {
name: 'alex',
age: 28,
hair: 'enough',
status: 'married',
job: 'who really knows',
}
_.pick(obj, ['name', 'age'])
{
name: obj.name,
age: obj.age,
}
700k ops/s 75m ops/s

50.
Abstraction === cost
let obj = {
name: 'alex',
work: {
name: 'Namshi'
}
}
_.get(obj, 'work.name', null)

51.
Abstraction === cost
let obj = {
name: 'alex',
work: {
name: 'Namshi'
}
}
_.get(obj, 'work.name', null)
1.3m ops/s

52.
Abstraction === cost
let obj = {
name: 'alex',
work: {
name: 'Namshi'
}
}
let work = null;
if (obj && obj.work && obj.work.name) {
work = obj.work.name
}

53.
Abstraction === cost
let obj = {
name: 'alex',
work: {
name: 'Namshi'
}
}
let work = null;
if (obj && obj.work && obj.work.name) {
work = obj.work.name
}
70m ops/s

54.
!
Results may vary

55.
let attributes = [
‘price’,
‘name’,
‘description’,
‘url’
]
…
…
…
function sanitize(products) {
return products.map(p => {
return _.pick(p, attributes)
})
}

56.
let attributes = [
‘price’,
‘name’,
‘description’,
‘url’
]
…
…
…
function sanitize(products) {
return products.map(p => {
return _.pick(p, attributes)
})
}

57.
let attributes = [
‘price’,
‘name’,
‘description’,
‘url’
]
…
…
…
function sanitize(products) {
return products.map(p => {
return _.pick(p, attributes)
})
}

58.
let attributes = [
‘price’,
‘name’,
‘description’,
‘url’
]
…
…
…
function sanitize(products) {
return products.map(p => {
return _.pick(p, attributes)
})
} 5ms / req

59.
let attributes = [
‘price’,
‘name’,
‘description’,
‘url’
]
…
…
…
function sanitize(products) {
return products.map(p => {
return _.pick(p, attributes)
})
} 10% / req

60.
const _ = require(‘lodash’)

61.
const _ = require(‘lodash’)
const pick = require(‘lodash/pick’)

62.
articles
.filter(a => a.active)
.map(a => {
a.title = titleCase(a.title)
return a
})

63.
articles
.filter(a => a.active)
.map(a => {
a.title = titleCase(a.title)
return a
})

64.
articles
.filter(a => a.active)
.map(a => {
a.title = titleCase(a.title)
return a
})

65.
articles
.filter(a => a.active)
.map(a => {
a.title = titleCase(a.title)
return a
})

66.
articles
.filter(a => a.active)
.map(a => {
a.title = titleCase(a.title)
return a
})
700k ops/s

67.
articles
.reduce((acc, a) => {
if (a.active) {
a.title = titlecase(a.title)
acc.push(a)
}
return acc
})

68.
articles
.reduce((acc, a) => {
if (a.active) {
a.title = titlecase(a.title)
acc.push(a)
}
return acc
})
4M ops/s

69.
sprites?

70.
No thanks,
I do http/2

71.
300kb 500kb 200kb

72.
The old www

73.
The old www

74.
300kb 500kb
The old www

75.
300kb 500kb
800kb / tot
2 conns
The old www

76.
sprites

77.
sprites

78.
1mb / tot
1 conn
sprites

79.
http/2

80.
http/2

81.
800kb / tot
1 conn
http/2

82.
react?

83.
“No sauce please”

84.
“No sauce please”
react-lite 25kb
preact 3kb

85.
css animations

86.
css animations

87.
Page transition

88.
preconnect
<html class="en">
<head>
<link preconnect="https://a.namshicdn.com" crossorigin />

89.
preconnect
<html class="en">
<head>
<link preconnect="https://a.namshicdn.com" crossorigin />

90.
preconnect
<html class="en">
<head>
<link preconnect="https://a.namshicdn.com" crossorigin />
Initiate
connections
ASAP

91.
preload
<link
rel="preload"
href="https://mycdn.com/fonts.css"
as="style"
onload="
this.rel='stylesheet';
this.className='font-loaded'
"
/>

92.
preload
<link
rel="preload"
href="https://mycdn.com/fonts.css"
as="style"
onload="
this.rel='stylesheet';
this.className='font-loaded'
"
/>

93.
preload
<link
rel="preload"
href="https://mycdn.com/fonts.css"
as="style"
onload="
this.rel='stylesheet';
this.className='font-loaded'
"
/>

94.
preload
<link
rel="preload"
href="https://mycdn.com/fonts.css"
as="style"
onload="
this.rel='stylesheet';
this.className='font-loaded'
"
/>

95.
preload
<link
rel="preload"
href="https://mycdn.com/fonts.css"
as="style"
onload="
this.rel='stylesheet';
this.className='font-loaded'
"
/>

96.
preload
<link
rel="preload"
href="https://mycdn.com/fonts.css"
as="style"
onload="
this.rel='stylesheet';
this.className='font-loaded'
"
/>
Async
Non-blocking
CSS

97.
preload

98.
prerender
window.addEventListener('load', function(){
var preRenderLink = doc.createElement('link');
preRenderLink.rel='prerender';
preRenderLink.href= '{{ nextPage }}';
document.head.appendChild(preRenderLink);
});

99.
prerender
window.addEventListener('load', function(){
var preRenderLink = doc.createElement('link');
preRenderLink.rel='prerender';
preRenderLink.href= '{{ nextPage }}';
document.head.appendChild(preRenderLink);
});

100.
prerender
window.addEventListener('load', function(){
var preRenderLink = doc.createElement('link');
preRenderLink.rel='prerender';
preRenderLink.href= '{{ nextPage }}';
document.head.appendChild(preRenderLink);
});

101.
prerender
window.addEventListener('load', function(){
var preRenderLink = doc.createElement('link');
preRenderLink.rel='prerender';
preRenderLink.href= '{{ nextPage }}';
document.head.appendChild(preRenderLink);
});

102.
prerender
window.addEventListener('load', function(){
var preRenderLink = doc.createElement('link');
preRenderLink.rel='prerender';
preRenderLink.href= '{{ nextPage }}';
document.head.appendChild(preRenderLink);
});

103.
prerender

104.
SPLIT ASSETS

105.
SPLIT ASSETS

106.
SPLIT ASSETS

107.
index.html

108.
detail.html

109.
Less bandwidth, good cache rate

110.
Less bandwidth, good cache rate
7 req
~100kb

111.
Less bandwidth, good cache rate
9 req
~150kb

112.
Less bandwidth, good cache rate
13 req
~380kb

113.
RESULTS ?

114.
-60%
AVG document content loaded time
1.93 vs 4.84

115.
-14%
Bounce rate

116.
+40%
AVG session duration

117.
+30%
Conversion rate

118.
Looking
Forward
to...

119.
Not available in the browser
https://github.com/grpc/grpc/issues/8682

120.
Under development
https://firebase.google.com/docs/cloud-messaging/

121.
Under development
https://githubengineering.com/githubs-post-csp-journey/

122.
Old, abandoned idea
https://youtu.be/v0xRTEf-ytE?t=16m25s

123.
Still far, far away
https://github.com/jakearchibald/navigation-transitions

124.
“Hot” is
overrated
NERD ADVICE

125.
“Hot” is
overrated
https://jakearchibald.com/2016/ca
ching-best-practices/
“As you can see, you can hack around poor caching in
your service worker, but you're way better off fixing
the root of the problem. Getting your caching right
makes things easier in service worker land, but also
benefits browsers that don't support service worker
(Safari, IE/Edge), and lets you get the most out of
your CDN.”
https://jakearchibald.com/2016/caching-best-practices/
NERD ADVICE

126.
“Solve problems
on the right
layer”
https://www.ampproject.org/lear
n/amp-design-principles/
NERD ADVICE

127.
“Solve problems
on the right
layer”
https://www.ampproject.org/lear
n/amp-design-principles/
NERD ADVICE

128.
Servers can still
be pretty darn
fast.
NERD ADVICE

129.
NERD ADVICE

130.
Servers can still
be pretty fast
NERD ADVICE

131.
Servers can still
be pretty fast
NERD ADVICE

132.
Servers can still
be pretty fast
NERD ADVICE

133.
50% within <30ms

134.
95% within <120ms

135.
Take this any day

136.
Measure $ wisely
http://250bpm.com/blog:86
NERD ADVICE

137.
NERD ADVICE
Act upon what
moves the needle
https://en.wikipedia.org/wiki/Par
eto_principle

138.
Alessandro Nadalin

139.
Alessandro Nadalin
@_odino_

140.
Alessandro Nadalin
@_odino_
Namshi

141.
Alessandro Nadalin
@_odino_
Namshi
CTO

142.
Alessandro Nadalin
@_odino_
Namshi
CTO
odino.org

143.
Thanks!
Alessandro Nadalin
@_odino_
Namshi
CTO
odino.org

144.
joind.in/talk/9e16d
Alessandro Nadalin
@_odino_
Namshi
CTO
odino.org

145.
we are hiring!
tech.namshi.com/join-us
github.com/namshi
twitter.com/TechNamshi
tech.namshi.com