OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube

OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube

# Downloading JS the right way - only download the JS you need for each “page” - single page app “page” == entry point - 17 entry points for Instgram - Subsequent navigations should not download the same JS again - ie. share libraries # Asynchronously load your bundles http://webpack.github.io/docs/code-splitting.html window.onpopstate = function () { if (window.location.pathname === ‘/profile’) { showLoadingIndicator(); require.ensure([], function () { hideLoadingIndicator(); require(‘./pages/profile’).show(); }); } else if (window.location.pathname === ‘/feed’) { showLoadingIndicator(); require.ensure([], function () { hideLoadingIndicator(); require(‘./pages/feed’).show(); } } # They’re part of the dependency graph Images, CSS, fonts, etc ex: ProfileEnteryPoint depends on profile.css // Ensure bootstrap.css stylesheet is in the page require(‘./bootstrap.css’); var Image = document.createElement(‘img’); myIage.src = require(‘./myimage.png’); // following code will only be executed after all the required resources loaded. # CSS the pragmatic way - Namespaced, unambiguous class names - No cascading (reason: a simple grep will know the the rule is no longer used) - single class name selector only - No overriding - <div class=“one two three”> - one, two and three should be orthogonal