"Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin
-
Upload
tobias-zander -
Category
Technology
-
view
526 -
download
3
description
Transcript of "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin
Tobias Zander | @airbone42
Turbo boost your website
http://img3.wikia.nocookie.net/__cb20090301004714/knightrider/en/images/4/41/Turbo_Boost01.jpg
Overview
1. Traditional request
2. Ajax requests
3. BigPipe
Traditional request
1. HTTP request
2. Generate HTTP response
3. Transfer HTTP response
4. Parsing DOM
5. Request CSS/JS
6. Apply CSS to DOM tree
7. Execute JS
Traditional - Ajax - BigPipe
Cons
• Sequential
• Late CSS/JS loading
• Bottlenecks
– Server
– Browser
Traditional - Ajax - BigPipe
The „cloud“
• For parallel requests
• For your big tv promotion
• Not for single page loads
• Or third-party-latencies
Traditional - Ajax - BigPipe
http://cloudtimes.org/wp-content/uploads/2012/07/cutcaster-800900729-Businessman-thinking-and-watching-the-money-mark-of-cloud-medium..jpg
Traditional - Ajax - BigPipe
Pipelining
• UX-Performance
• It is a bit faster
• But it „feels“ a lot faster
Traditional - Ajax - BigPipe
Ajax request
1. HTTP request
2. Generate simple HTTP response
3. Transfer simple HTTP response
4. Parsing simple DOM
5. Request CSS/JS
6. Apply CSS to DOM tree
7. Execute JS to start Ajax-Requests
Traditional - Ajax - BigPipe
The story continues …
8. Next HTTP request
9. Generate pagelet
10.Transfer HTTP response
11.Execute JS
Traditional - Ajax - BigPipe
Pros
• Decoupled code
• Early CSS/JS loading
• Parallel requests for HTML
• User “feels” first page load
• Can use FPC
Traditional - Ajax - BigPipe
Cons
• More HTTP overhead
• Network latency
• Multiple app initialisations
Traditional - Ajax - BigPipe
App request flow
http://www.amicontech.com/blog/wp-content/uploads/2011/02/page-request-flow.png
Traditional - Ajax - BigPipe
Single Page Apps
• Duplicate code
• Reveal business logic
• Client performance
• Don‘t get me wrong …
– Still cool stuff for the right use-case!
Traditional - Ajax - BigPipe
BigPipe
• https://www.facebook.com/note.php?
note_id=389414033919
• Pipeline pagelets
Traditional - Ajax - BigPipe
1. HTTP request
2. Generate simple HTTP response
3. Flush simple HTTP response
BigPipe request
Traditional - Ajax - BigPipe
4. Parsing simple DOM
5. Request CSS/JS
6. Apply CSS to DOM tree
7. Execute JS for simple response
1. HTTP request
2. Generate simple HTTP response
3. Flush simple HTTP response
4. Parsing simple DOM
5. Request CSS/JS
6. Apply CSS to DOM tree
7. Execute JS for simple response
BigPipe request
Traditional - Ajax - BigPipe
In the meantime …
1. HTTP request
2. Generate simple HTTP response
3. Flush simple HTTP response
4. Generate pagelet
5. Flush pagelet in same HTTP response
6. Execute JS
Traditional - Ajax - BigPipe
Pros
• Decoupled code
• Early CSS/JS loading
• One HTML request
• Less HTTP overhead
• One app initialisation
• User „feels“ first page load
Traditional - Ajax - BigPipe
Requirements
• Chrome
• Firefox
• Safari
• IE
• And even old IEs
Traditional - Ajax - BigPipe
Comparison
Traditional - Ajax - BigPipe
Traditional
Music: http://www.youtube.com/watch?v=0Wi8Fv0AJA4
Traditional - Ajax - BigPipe
BigPipe
Traditional - Ajax - BigPipe
Code?
Traditional - Ajax - BigPipe
Livecoding!
http://www.logosnoesis.com/sites/default/files/styles/adaptive/public/Cat-surprised-485x728.jpg
Content Security Policy
• Prevents XSS
• No inline CSS and JS!
Traditional - Ajax - BigPipe
CSP with Interval
window.setInterval(function () {
var bigpipe = document.getElementById('bigpipe');
if (bigpipe) {
var pagelets = bigpipe.getElementsByClassName('pagelets');
if (pagelets.length > 0) {
for (var x = 0; x < pagelets.length; x++) {
var targetId = pagelets[x].getAttribute('data-target');
var targetElement = document.getElementById(targetId);
targetElement.outerHTML = pagelets[x].innerHTML;
pagelets[x].parentNode.removeChild(pagelets[x]);
}
}
}
}, 100);
Traditional - Ajax - BigPipe
Libraries
• JavaScript:
https://github.com/orygens/bigpipe-js
• Node.js:
https://github.com/bigpipe/bigpipe
• Drupal:
https://drupal.org/project/bigpipe
• Magento:
https://github.com/sitewards/BigPipe
Traditional - Ajax - BigPipe
Summary
• Easy to implement
• Works technically everywhere
• Conceptual work
– What is important?
– Split design in pagelets
Traditional - Ajax - BigPipe
Tobias Zander | @airbone42
Questions?
Lazyload
• Prioritize ressources
• It „feels“ faster
• W3C Working Draft
Lazyload jQuery-Plugin
<img class="lazy"
data-original="img/example.jpg"
width="640" height="480“ />
<script>
$(function() {
$("img.lazy").lazyload();
});
</script>
Pipeline requests
• Reduce latency and HTTP overhead
– CSS
– JS
– Media
• Still FIFO
• Opera only
Tobias Zander | @airbone42
Thanks!