The document discusses the challenges and solutions encountered while rebuilding a mobile website at Namshi, including the transition from single-page applications (SPA) to isomorphic JavaScript for improved client-side performance. Key insights include adopting webpack for efficient code management and reducing bundle sizes, as well as optimizing resource loading through techniques like preloading and asynchronous CSS. Performance metrics demonstrate significant improvements, including reduced loading times and increased user engagement rates.

1. Alex Nadalin - CTO @ namshi.com
FRONTEND CON 2017 (WARSAW - poland)

2. WARNING
Controversy
ahead

3. WARNING
Insult
@_odino_

4. Zalando of the middle east

5. http://tech.namshi.io/blog/2017/05/02/rebu
ilding-our-mobile-website/
Shidhin CR
https://developers.google.com/e
xperts/people/shidhin-cr
Mohamed amin
https://medium.com/@Mohamed
Amin88
Gabriel izebhigie
http://tech.namshi.io/team/#Ga
briel Izebhigie

6. Take #1

7. Started with a SPA

8. ...which pissed bots off

9. ...which pissed clients off

10. ...which pissed clients off

11. ...which pissed clients off

12. Take #2

13. Isomorphic js

14. Both on the client & the server

15. universal js

16. Works only in movies

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

18. Clients are still angry

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

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

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

22. Fonzie does not approve.

23. The do-over

24. Simplify our codebase

25. Better client-side performance

26. roi

27. Best website?

28. It’s an app.

29. It’s an app.
Smooth transitions

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

31. Can a website
Match that?

32. Spa closely bridges the gap

33. Spa closely bridges the gap
Additional layer of complexity

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

35. Do we need it?

39. service is king

40. The b* stack

41. The b* stack

42. The b* stack

43. The b* stack

44. The b* stack

45. server

47. client

48. Webpack 2

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

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

52. Abstraction === cost

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

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

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

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

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

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

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

61. !
Results may vary

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)
})
}

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

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

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

68. const _ = require(‘lodash’)

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

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
})

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

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

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

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

77. sprites?

78. No thanks,
I do http/2

79. 300kb 500kb 200kb

80. The old www

81. The old www

82. 300kb 500kb
The old www

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

84. sprites

85. sprites

86. 1mb / tot
1 conn
sprites

87. http/2

88. http/2

89. 800kb / tot
1 conn
http/2

90. react?

91. “No sauce please”

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

93. css animations

94. css animations

95. Page transition

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

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

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

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'
"
/>

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

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

105. preload

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
window.addEventListener('load', function(){
var preRenderLink = doc.createElement('link');
preRenderLink.rel='prerender';
preRenderLink.href= '{{ nextPage }}';
document.head.appendChild(preRenderLink);
});

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

111. prerender

112. SPLIT ASSETS

113. SPLIT ASSETS

114. SPLIT ASSETS

115. index.html

116. detail.html

117. Less bandwidth, good cache rate

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

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

120. RESULTS ?

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

122. -14%
Bounce rate

123. +40%
AVG session duration

124. +30%
Conversion rate

125. Looking
Forward
to...

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

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

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

132. NERD ADVICE

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

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 <20ms

144. 95% within <120ms

145. Take this any day

146. Alessandro Nadalin

147. Alessandro Nadalin
@_odino_

148. Alessandro Nadalin
@_odino_
Namshi

149. Alessandro Nadalin
@_odino_
Namshi
CTO

150. Alessandro Nadalin
@_odino_
Namshi
CTO
odino.org

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

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