How Bitbucket Pipelines Loads Connect UI Assets Super-fast
0 likes10,667 views
The document discusses enhancing Bitbucket Pipelines' performance by optimizing the loading of Connect UI assets. Key strategies include using CDN, implementing efficient caching methods, and leveraging service workers for better resource management. It also covers the use of Webpack for code splitting and performance measurement, emphasizing the importance of maintaining a good Apdex score.
![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>](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-23-320.jpg)
![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](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-25-320.jpg)
![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](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-26-320.jpg)
![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](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-27-320.jpg)
![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](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-28-320.jpg)
![module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /.css$/,
loader: "style!css"
}]
}
}
Webpack
Config
Entry
Output
Loaders
Plugins](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-42-320.jpg)
![module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /.css$/,
loader: "style!css"
}]
}
}
Webpack
Config
Entry
Output
Loaders
Plugins](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-43-320.jpg)
![module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /.css$/,
loader: "style!css"
}]
}
}
Webpack
Config
Entry
Output
Loaders
Plugins](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-44-320.jpg)
![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](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-45-320.jpg)
![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"]
}](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-47-320.jpg)
![WEBPACK CODE SPLITTING
Bundle with
content-based hash
output: {
chunkFilename: "[chunkhash].bundle.js"
}](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-49-320.jpg)
![Simplify creation of Service Workers
That includes all your webpack bundles.
BundleAnalyzer
PreloadWebpack
OptimizeJs
SWPrecache
HtmlWebpack
Essential
Webpack
Plugins
module.exports = {
...
plugins: [
new SWPrecacheWebpackPlugin()
],
...
}](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-55-320.jpg)
![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>](https://image.slidesharecdn.com/advanced-08-plewa-170505113619/85/How-Bitbucket-Pipelines-Loads-Connect-UI-Assets-Super-fast-56-320.jpg)
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
- 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*
- 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
- 13. HTTP/2 You say
- 14. Enable HTTP/2 in CloudFront
- 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
- 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
- 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
- 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