We've been toying around with JS since 4 years, trying to figure out what's the best approach to build mobile-friendly apps that would offer the best performances on mobile devices. We first went SPA and then decided to take a different approach. 2 years ago we presented a talk, at this very same conference, about how we decided to tackle our problems on mobile with an isomorphic application. Today, we would like to guide you through 2 years of that choice and why we decided to take a step back and go revamp our mobile website again, with server-side rendering and a pinch of React. Fast and wicked performance ahead!

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?

37. service is king

38. The b* stack

39. The b* stack

40. The b* stack

41. The b* stack

42. The b* stack

43. server

45. client

46. Webpack 2

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

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

50. Abstraction === cost

51. 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,
}

52. 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,
}

53. 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,
}

54. 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

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

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

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

58. 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

59. !
Results may vary

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

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

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

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

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

66. const _ = require(‘lodash’)

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

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

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

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

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

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

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

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

75. sprites?

76. No thanks,
I do http/2

77. 300kb 500kb 200kb

78. The old www

79. The old www

80. 300kb 500kb
The old www

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

82. sprites

83. sprites

84. 1mb / tot
1 conn
sprites

85. http/2

86. http/2

87. 800kb / tot
1 conn
http/2

88. react?

89. “No sauce please”

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

91. css animations

92. css animations

93. Page transition

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

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

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

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

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

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

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

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

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

103. preload

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

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

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

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

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

109. prerender

110. SPLIT ASSETS

111. SPLIT ASSETS

112. SPLIT ASSETS

113. index.html

114. detail.html

115. Less bandwidth, good cache rate

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

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

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

119. RESULTS ?

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

121. -14%
Bounce rate

122. +40%
AVG session duration

123. +30%
Conversion rate

124. Looking
Forward
to...

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

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

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

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

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

134. “Hot” is
overrated
NERD ADVICE

135. “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

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

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

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

139. NERD ADVICE

140. Servers can still
be pretty fast
NERD ADVICE

141. Servers can still
be pretty fast
NERD ADVICE

142. Servers can still
be pretty fast
NERD ADVICE

143. 50% within <30ms

144. 95% within <120ms

145. Take this any day

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

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

148. Alessandro Nadalin

149. Alessandro Nadalin
@_odino_

150. Alessandro Nadalin
@_odino_
Namshi

151. Alessandro Nadalin
@_odino_
Namshi
CTO

152. Alessandro Nadalin
@_odino_
Namshi
CTO
odino.org

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

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

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