spa, isomorphic and back to the server our journey with js @ frontend con poland 2017
TRANSCRIPT
![Page 1: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/1.jpg)
Alex Nadalin - CTO @ namshi.comFRONTEND CON 2017 (WARSAW - poland)
![Page 2: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/2.jpg)
WARNING
Controversyahead
![Page 3: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/3.jpg)
WARNING
Insult@_odino_
![Page 4: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/4.jpg)
Zalando of the middle east
![Page 5: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/5.jpg)
http://tech.namshi.io/blog/2017/05/02/rebuilding-our-mobile-website/
Shidhin CR
https://developers.google.com/experts/people/shidhin-cr
Mohamed amin
https://medium.com/@MohamedAmin88
Gabriel izebhigie
http://tech.namshi.io/team/#Gabriel Izebhigie
![Page 6: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/6.jpg)
Take #1
![Page 7: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/7.jpg)
Started with a SPA
![Page 8: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/8.jpg)
...which pissed bots off
![Page 9: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/9.jpg)
...which pissed clients off
![Page 10: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/10.jpg)
...which pissed clients off
![Page 11: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/11.jpg)
...which pissed clients off
![Page 12: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/12.jpg)
Take #2
![Page 13: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/13.jpg)
Isomorphic js
![Page 14: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/14.jpg)
Both on the client & the server
![Page 15: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/15.jpg)
universal js
![Page 16: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/16.jpg)
Works only in movies
![Page 17: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/17.jpg)
https://2015.jsday.it/talk/back-to-the-future-isomorphic-javascript-applications/
![Page 18: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/18.jpg)
Clients are still angry
![Page 19: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/19.jpg)
Sneak peak of a custom-madeuniversal js framework
![Page 20: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/20.jpg)
Sneak peak of a custom-madeuniversal js framework
![Page 21: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/21.jpg)
Sneak peak of a custom-madeuniversal js framework
![Page 22: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/22.jpg)
Fonzie does not approve.
![Page 23: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/23.jpg)
The do-over
![Page 24: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/24.jpg)
Simplify our codebase
![Page 25: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/25.jpg)
Better client-side performance
![Page 26: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/26.jpg)
roi
![Page 27: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/27.jpg)
Best website?
![Page 28: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/28.jpg)
It’s an app.
![Page 29: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/29.jpg)
It’s an app.
Smooth transitions
![Page 30: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/30.jpg)
It’s an app.
Smooth transitions
Great (perceived) performance
![Page 31: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/31.jpg)
Can a websiteMatch that?
![Page 32: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/32.jpg)
Spa closely bridges the gap
![Page 33: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/33.jpg)
Spa closely bridges the gap
Additional layer of complexity
![Page 34: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/34.jpg)
Generally no.
Spa closely bridges the gap
Additional layer of complexity
![Page 35: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/35.jpg)
Do we need it?
![Page 36: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/36.jpg)
![Page 37: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/37.jpg)
![Page 38: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/38.jpg)
![Page 39: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/39.jpg)
service is king
![Page 40: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/40.jpg)
The b* stack
![Page 41: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/41.jpg)
The b* stack
![Page 42: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/42.jpg)
The b* stack
![Page 43: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/43.jpg)
The b* stack
![Page 44: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/44.jpg)
The b* stack
![Page 45: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/45.jpg)
server
![Page 46: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/46.jpg)
![Page 47: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/47.jpg)
client
![Page 48: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/48.jpg)
Webpack 2
![Page 49: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/49.jpg)
Webpack 2
Tree-shaking saved us15/20% of the gzipped
bundle size
![Page 50: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/50.jpg)
Say “no” to jquery(as much as possible)
![Page 51: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/51.jpg)
![Page 52: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/52.jpg)
Abstraction === cost
![Page 53: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/53.jpg)
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,}
![Page 54: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/54.jpg)
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,}
![Page 55: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/55.jpg)
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,}
![Page 56: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/56.jpg)
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
![Page 57: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/57.jpg)
Abstraction === cost let obj = { name: 'alex', work: { name: 'Namshi' } }
_.get(obj, 'work.name', null)
![Page 58: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/58.jpg)
Abstraction === cost let obj = { name: 'alex', work: { name: 'Namshi' } }
_.get(obj, 'work.name', null)
1.3m ops/s
![Page 59: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/59.jpg)
Abstraction === cost let obj = { name: 'alex', work: { name: 'Namshi' } }
let work = null;
if (obj && obj.work && obj.work.name) { work = obj.work.name }
![Page 60: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/60.jpg)
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
![Page 61: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/61.jpg)
!Results may vary
![Page 62: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/62.jpg)
let attributes = [‘price’,‘name’,‘description’,‘url’
]
………
function sanitize(products) {return products.map(p => {
return _.pick(p, attributes) })}
![Page 63: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/63.jpg)
let attributes = [‘price’,‘name’,‘description’,‘url’
]
………
function sanitize(products) {return products.map(p => {
return _.pick(p, attributes) })}
![Page 64: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/64.jpg)
let attributes = [‘price’,‘name’,‘description’,‘url’
]
………
function sanitize(products) {return products.map(p => {
return _.pick(p, attributes) })}
![Page 65: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/65.jpg)
let attributes = [‘price’,‘name’,‘description’,‘url’
]
………
function sanitize(products) {return products.map(p => {
return _.pick(p, attributes) })} 5ms / req
![Page 66: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/66.jpg)
let attributes = [‘price’,‘name’,‘description’,‘url’
]
………
function sanitize(products) {return products.map(p => {
return _.pick(p, attributes) })} 10% / req
![Page 67: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/67.jpg)
![Page 68: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/68.jpg)
const _ = require(‘lodash’)
![Page 69: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/69.jpg)
const _ = require(‘lodash’)
const pick = require(‘lodash/pick’)
![Page 70: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/70.jpg)
articles.filter(a => a.active).map(a => {a.title = titleCase(a.title)
return a})
![Page 71: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/71.jpg)
articles.filter(a => a.active).map(a => {a.title = titleCase(a.title)
return a})
![Page 72: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/72.jpg)
articles.filter(a => a.active).map(a => {a.title = titleCase(a.title)
return a})
![Page 73: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/73.jpg)
articles.filter(a => a.active).map(a => {a.title = titleCase(a.title)
return a})
![Page 74: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/74.jpg)
articles.filter(a => a.active).map(a => {a.title = titleCase(a.title)
return a})
700k ops/s
![Page 75: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/75.jpg)
articles.reduce((acc, a) => {if (a.active) {a.title = titlecase(a.title)acc.push(a)
}
return acc})
![Page 76: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/76.jpg)
articles.reduce((acc, a) => {if (a.active) {a.title = titlecase(a.title)acc.push(a)
}
return acc}) 4M ops/s
![Page 77: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/77.jpg)
sprites?
![Page 78: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/78.jpg)
No thanks,I do http/2
![Page 79: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/79.jpg)
300kb 500kb 200kb
![Page 80: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/80.jpg)
The old www
![Page 81: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/81.jpg)
The old www
![Page 82: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/82.jpg)
300kb 500kb
The old www
![Page 83: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/83.jpg)
300kb 500kb 800kb / tot2 conns
The old www
![Page 84: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/84.jpg)
sprites
![Page 85: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/85.jpg)
sprites
![Page 86: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/86.jpg)
1mb / tot1 conn
sprites
![Page 87: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/87.jpg)
http/2
![Page 88: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/88.jpg)
http/2
![Page 89: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/89.jpg)
800kb / tot1 conn
http/2
![Page 90: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/90.jpg)
react?
![Page 91: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/91.jpg)
“No sauce please”
![Page 92: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/92.jpg)
“No sauce please”
react-lite 25kb
preact 3kb
![Page 93: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/93.jpg)
css animations
![Page 94: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/94.jpg)
css animations
![Page 96: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/96.jpg)
preconnect
<html class="en"><head>
<link preconnect="https://a.namshicdn.com" crossorigin />
![Page 97: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/97.jpg)
preconnect
<html class="en"><head>
<link preconnect="https://a.namshicdn.com" crossorigin />
![Page 98: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/98.jpg)
preconnect
<html class="en"><head>
<link preconnect="https://a.namshicdn.com" crossorigin />Initiate
connections
ASAP
![Page 99: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/99.jpg)
preload<link
rel="preload" href="https://mycdn.com/fonts.css" as="style" onload="
this.rel='stylesheet';this.className='font-loaded'
"/>
![Page 100: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/100.jpg)
preload<link
rel="preload" href="https://mycdn.com/fonts.css" as="style" onload="
this.rel='stylesheet';this.className='font-loaded'
"/>
![Page 101: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/101.jpg)
preload<link
rel="preload" href="https://mycdn.com/fonts.css" as="style" onload="
this.rel='stylesheet';this.className='font-loaded'
"/>
![Page 102: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/102.jpg)
preload<link
rel="preload" href="https://mycdn.com/fonts.css" as="style" onload="
this.rel='stylesheet';this.className='font-loaded'
"/>
![Page 103: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/103.jpg)
preload<link
rel="preload" href="https://mycdn.com/fonts.css" as="style" onload="
this.rel='stylesheet';this.className='font-loaded'
"/>
![Page 104: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/104.jpg)
preload<link
rel="preload" href="https://mycdn.com/fonts.css" as="style" onload="
this.rel='stylesheet';this.className='font-loaded'
"/>
Async
Non-blocking
CSS
![Page 105: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/105.jpg)
preload
![Page 106: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/106.jpg)
prerender window.addEventListener('load', function(){ var preRenderLink = doc.createElement('link'); preRenderLink.rel='prerender'; preRenderLink.href= '{{ nextPage }}'; document.head.appendChild(preRenderLink); });
![Page 107: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/107.jpg)
prerender window.addEventListener('load', function(){ var preRenderLink = doc.createElement('link'); preRenderLink.rel='prerender'; preRenderLink.href= '{{ nextPage }}'; document.head.appendChild(preRenderLink); });
![Page 108: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/108.jpg)
prerender window.addEventListener('load', function(){ var preRenderLink = doc.createElement('link'); preRenderLink.rel='prerender'; preRenderLink.href= '{{ nextPage }}'; document.head.appendChild(preRenderLink); });
![Page 109: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/109.jpg)
prerender window.addEventListener('load', function(){ var preRenderLink = doc.createElement('link'); preRenderLink.rel='prerender'; preRenderLink.href= '{{ nextPage }}'; document.head.appendChild(preRenderLink); });
![Page 110: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/110.jpg)
prerender window.addEventListener('load', function(){ var preRenderLink = doc.createElement('link'); preRenderLink.rel='prerender'; preRenderLink.href= '{{ nextPage }}'; document.head.appendChild(preRenderLink); });
![Page 111: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/111.jpg)
prerender
![Page 112: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/112.jpg)
SPLIT ASSETS
![Page 113: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/113.jpg)
SPLIT ASSETS
![Page 114: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/114.jpg)
SPLIT ASSETS
![Page 115: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/115.jpg)
index.html
![Page 116: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/116.jpg)
detail.html
![Page 117: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/117.jpg)
Less bandwidth, good cache rate
![Page 118: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/118.jpg)
Less bandwidth, good cache rate
7 req~100kb
![Page 119: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/119.jpg)
Less bandwidth, good cache rate
9 req~150kb
![Page 120: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/120.jpg)
RESULTS ?
![Page 121: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/121.jpg)
-60%AVG document content loaded time
1.93 vs 4.84
![Page 122: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/122.jpg)
-14%Bounce rate
![Page 123: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/123.jpg)
+40%AVG session duration
![Page 124: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/124.jpg)
+30%Conversion rate
![Page 125: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/125.jpg)
LookingForward
to...
![Page 126: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/126.jpg)
![Page 127: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/127.jpg)
Not available in the browserhttps://github.com/grpc/grpc/issues/8682
![Page 128: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/128.jpg)
![Page 129: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/129.jpg)
Under developmenthttps://firebase.google.com/docs/cloud-messaging/
![Page 130: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/130.jpg)
![Page 131: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/131.jpg)
Under developmenthttps://githubengineering.com/githubs-post-csp-journey/
![Page 132: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/132.jpg)
NERD ADVICE
![Page 133: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/133.jpg)
NERD ADVICEAct upon what moves the needlehttps://en.wikipedia.org/wiki/Pareto_principle
![Page 134: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/134.jpg)
“Hot” is overrated
NERD ADVICE
![Page 135: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/135.jpg)
“Hot” is overratedhttps://jakearchibald.com/2016/caching-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
![Page 136: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/136.jpg)
“Solve problems on the right layer”https://www.ampproject.org/learn/amp-design-principles/
NERD ADVICE
![Page 137: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/137.jpg)
“Solve problems on the right layer”https://www.ampproject.org/learn/amp-design-principles/
NERD ADVICE
![Page 138: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/138.jpg)
Servers can still be pretty darn fast.
NERD ADVICE
![Page 139: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/139.jpg)
NERD ADVICE
![Page 140: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/140.jpg)
Servers can still be pretty fast
NERD ADVICE
![Page 141: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/141.jpg)
Servers can still be pretty fast
NERD ADVICE
![Page 142: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/142.jpg)
Servers can still be pretty fast
NERD ADVICE
![Page 143: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/143.jpg)
50% within <20ms
![Page 144: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/144.jpg)
95% within <120ms
![Page 145: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/145.jpg)
Take this any day
![Page 146: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/146.jpg)
Alessandro Nadalin
![Page 147: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/147.jpg)
Alessandro Nadalin
@_odino_
![Page 148: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/148.jpg)
Alessandro Nadalin
@_odino_
Namshi
![Page 149: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/149.jpg)
Alessandro Nadalin
@_odino_
Namshi
CTO
![Page 150: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/150.jpg)
Alessandro Nadalin
@_odino_
Namshi
CTO
odino.org
![Page 151: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/151.jpg)
Thanks!Alessandro Nadalin
@_odino_
Namshi
CTO
odino.org
![Page 152: Spa, isomorphic and back to the server our journey with js @ frontend con poland 2017](https://reader031.vdocuments.net/reader031/viewer/2022030317/5a66edd47f8b9a91298b4b73/html5/thumbnails/152.jpg)
we are hiring!tech.namshi.com/join-us
github.com/namshi
twitter.com/TechNamshi
tech.namshi.io