Connect add-ons deliver better user experience when they load fast. Between CDN, server-side rendering, service workers, and code splitting, there are loads of techniques you can use to achieve this. In this session, Atlassian Developer Peter Plewa will reveal Bitbucket Pipelines' secret for fast loads, and what they can do in the future to make Pipelines even faster. Peter Plewa, Development Principal, Atlassian

1. How Bitbucket Pipelines
Loads Connect UI Assets
Super-fast
PETER PLEWA | PRINCIPAL DEVELOPER | ATLASSIAN | @PP1EWA

2. It all started with a Spinner

3. Connect “Spinner” Flow
HOST HOST
EVENT
ADD-ON

IFRAME
HTML
LOAD
ALL.JSLOAD
PARSE

4. 55% Connect
Add-ons load
in more than 1s*

5. Just use
CDN
and
Gzip

6. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

7. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

8. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

9. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

10. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

11. Single
Page
Application
Bundle
Front and
Back-end
DON’T DO

12. HTTP/2HTTP/1
DODON’T

13. HTTP/2 You say

14. Enable HTTP/2 in CloudFront

15. HTTP
Caching
no-cache
no-store
DON’T DO

16. HTTP
caching
ETag
Cache-Control
Invalidation
ETag Header
Identifies the version of the document.
Revalidation
If-* headers check against the content of ETag.

17. ETag
Cache-Control
Invalidation
HTTP
caching
Cachability:
private, public, no-cache, no-store
Expiration:
max-age, s-maxage
Revalidation:
immutable, must-revalidate, proxy-revalidate
public max-age=3600
private immutable
no-cache
no-store
public max-age=3600 s-maxage=7200
public max-age=3600 proxy-revalidate

18. ETag
Cache-Control
Invalidation
Cache Busting
By adding query parameters to the request like
http://www.foobar.tld/some/page?v2
Cache Purging
Simply means to remove an item from the cache
HTTP
caching

19. Code
splitting
Large code
bundles
DON’T DO

20. Take control of
Connect JavaScript
Client (aka all.js)
MAYBE

21. Take control
of all.js
Reverse Proxy
Caching
Construct
all.js URL
Service
Workers
CACHE ALL.JS
INVALIDATE
Create own ALL.JS Cache
Inline all.js

22. Take control
of all.js
const host =
"https://d301sr5gafysq2.cloudfront.net/";
const bridgeUrl =
host + getUrlParam("crev") +
"/dist/connect/plugin.min.js";Reverse Proxy
Caching
Construct
all.js URL
Service
Workers
Inline all.js

23. Take control
of all.js
Reverse Proxy
Caching
Construct
all.js URL
Service
Workers
Inline all.js
<script>(function(f){if(typeof
exports==="object"&&typeof module!
=="undefined"){module.exports=f()}else
if(typeof define==="function"&&define.amd)
{define([],f)}else{var...</script>

24. Take control
of all.js Use SW to interact with Cache
Intercept all.js request and save it as a resource in
cache.
Run Background Sync
Service Worker can check if new all.js is available
and update it’s current version.
Reverse Proxy
Caching
Construct
all.js URL
Service
Workers
Inline all.js

25. Maybe
GraphQL
Server Side
Rendering
Service
Workers
query Heroes($episode: Episode) {
hero(episode: $episode) {
name
friends {
name
}
}
}
{
"episode": "JEDI"
}
{
"data": {
"hero": "R2-D2",
"friends": [{
"name": "Luke Skywalker"
}, {
"name": "Han Solo"
}, {
"name": "Leia Organa"
}]
}
}
Variables
Query Data

26. Maybe
GraphQL
Server Side
Rendering
Service
Workers
query Heroes($episode: Episode) {
hero(episode: $episode) {
name
friends {
name
}
}
}
{
"episode": "JEDI"
}
{
"data": {
"hero": "R2-D2",
"friends": [{
"name": "Luke Skywalker"
}, {
"name": "Han Solo"
}, {
"name": "Leia Organa"
}]
}
}
Variables
Query Data

27. Maybe
GraphQL
Server Side
Rendering
Service
Workers
query Heroes($episode: Episode) {
hero(episode: $episode) {
name
friends {
name
}
}
}
{
"episode": "JEDI"
}
{
"data": {
"hero": "R2-D2",
"friends": [{
"name": "Luke Skywalker"
}, {
"name": "Han Solo"
}, {
"name": "Leia Organa"
}]
}
}
Variables
Query Data

28. Maybe
GraphQL
Server Side
Rendering
Service
Workers
query Heroes($episode: Episode) {
hero(episode: $episode) {
name
friends {
name
}
}
}
{
"episode": "JEDI"
}
{
"data": {
"hero": "R2-D2",
"friends": [{
"name": "Luke Skywalker"
}, {
"name": "Han Solo"
}, {
"name": "Leia Organa"
}]
}
}
Variables
Query Data

29. import { renderToString } from 'react-dom/server'
function handleRender(req, res) {
const store = createStore(counterApp)
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
)
// Grab the initial state from our Redux store
const preloadedState = store.getState()
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
}
Maybe
GraphQL
Server Side
Rendering
Service
Workers

30. import { renderToString } from 'react-dom/server'
function handleRender(req, res) {
const store = createStore(counterApp)
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
)
// Grab the initial state from our Redux store
const preloadedState = store.getState()
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
}
Maybe
GraphQL
Server Side
Rendering
Service
Workers

31. Maybe
GraphQL
Server Side
Rendering
Service
Workers
What is Service Worker?
A script that your browser runs in the background,
separate from a web page, opening the door to
features that don't need a web page or user
interaction.

32. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

33. Measure
Apdex
First Meaningful
Paint
Performance
Budget
Tools
Measuring User Satisfaction
Level Multiplier Time (T Example = 1)
Satisfied T or less Less than 1 seconds
Tolerated >T, <= 4T Between 1 and 4 seconds
Frustrated > 4T Greater than 4 seconds

34. Measure
Apdex
First Meaningful
Paint
Performance
Budget
Tools
Measuring User Satisfaction
Level Multiplier Time (T Example = 1)
Satisfied T or less Less than 1 seconds
Tolerated >T, <= 4T Between 1 and 4 seconds
Frustrated > 4T Greater than 4 seconds
Example: (170 + (20/2))/200 = 0.9
Satisfied requests + (Tolerating requests / 2)
Total number of requests
Apdex =

35. Measure
Apdex
First Meaningful
Paint
Performance
Budget
Tools
Time to First Meaningful Paint

36. Measure
Apdex
First Meaningful
Paint
Performance
Budget
Tools
Setting a Performance Budget

37. Measure
Apdex
First Meaningful
Paint
Performance
Budget
Tools
Lighthouse Chrome Dev Tools

38. Connect Analytics Chrome Extension
bit.ly/connect-analytics

40. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

41. WHAT IS WEBPACK?

42. module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /.css$/,
loader: "style!css"
}]
}
}
Webpack
Config
Entry
Output
Loaders
Plugins

43. module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /.css$/,
loader: "style!css"
}]
}
}
Webpack
Config
Entry
Output
Loaders
Plugins

44. module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /.css$/,
loader: "style!css"
}]
}
}
Webpack
Config
Entry
Output
Loaders
Plugins

45. module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.html"
})
]
}
Webpack
Config
Entry
Output
Loaders
Plugins

46. Webpack
Progression
One giant
bundle
Separate
vendor chunk
Code splitting
Downloaded on
every page load
Only one HTTP
request
Gets bigger over
time
! !
$ webpack ./app.js ./dist/bundle.js

47. Webpack
Progression
One giant
bundle
Separate
vendor chunk
Code splitting
Less frequent
cache invalidation
Still gets bigger
over time
App bundle contains
“just” your code
!
entry: {
// Infrequently changed: e.g. react, lodash
vendor: ["./entry.js"],
// Frequently changed
app: ["./src/app.js"]
}

48. Webpack
Progression
One giant
bundle
Separate
vendor chunk
Code splitting
Lazy-load chunks
for some logic
Difficult to
setup
Cache invalidation
in small chunks
!
import("moment")
.then(moment => moment().format("LLLL"))
.then(str => console.log(str))
.then(err =>
console.log("Failed to load", err)
)

49. WEBPACK CODE SPLITTING
Bundle with
content-based hash
output: {
chunkFilename: "[chunkhash].bundle.js"
}

50. WEBPACK CODE SPLITTING
Prioritise async chunks with
<rel=“preload”>
import("lazy-loaded-module")
<link rel="preload" href="chunk.31132ae6.js" as="script">

51. WEBPACK CODE SPLITTING
How
does
preload
work?
Before preload, the network request started here
After preload, it has shifted left - right at parse time

52. BundleAnalyzer
PreloadWebpack
OptimizeJs
SWPrecache
HtmlWebpack
Essential
Webpack
Plugins

53. BundleAnalyzer
PreloadWebpack
OptimizeJs
SWPrecache
HtmlWebpack
Essential
Webpack
Plugins

54. Optimize JS for faster execution
by wrapping all immediately-invoked functions or
likely-to-be-invoked functions in parentheses.
BundleAnalyzer
PreloadWebpack
OptimizeJs
SWPrecache
HtmlWebpack
Essential
Webpack
Plugins
Browser Typical speed boost
Chrome 55 20.63%
Edge 14 13.52%
Firefox 50 8.26%
Safari 10 -1.04%

55. Simplify creation of Service Workers
That includes all your webpack bundles.
BundleAnalyzer
PreloadWebpack
OptimizeJs
SWPrecache
HtmlWebpack
Essential
Webpack
Plugins
module.exports = {
...
plugins: [
new SWPrecacheWebpackPlugin()
],
...
}

56. Simplify creation of HTML
That includes all your webpack bundles.
BundleAnalyzer
PreloadWebpack
OptimizeJs
SWPrecache
HtmlWebpack
Essential
Webpack
Plugins
module.exports = {
plugins: [new HtmlWebpackPlugin()],
}
<!DOCTYPE html>
<html>
<head>
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>

57. Additional webpack tips
Tree Shaking
Removes unused code
producing smaller bundles.
Hot Reloading
Replaces modules in the
real time without the need
to refresh browser.
Ecosystem
Huge amount of plugins and
available tools that extend
webpack.

58. Agenda
Dos, Don’ts and Maybes
Webpack
Recap: Is there a spinner?
Measuring & Optimising

59. There is no spinner?
Is there a
spinner?

60. Want no spinner? Maintain Apdex ~ 0.8

61. Thank you!
PETER PLEWA | PRINCIPAL DEVELOPER | ATLASSIAN | @PP1EWA
bit.ly/connect-analytics