Alexandrine Boissière
Alexandrine Boissière — Parisian for years, happy adopted Vancouverite since 2011, Alexandrine Boissière is a Technical Engineer Manager at Hootsuite. She is responsible for designing a sustainable front-end architecture that is both scalable and re-usable. Her favourite topics involve web performance, history of ideas and silent movies. She acknowledges it sounds completely random.
To be successful, a large single-page application has to be maintainable, reliable and performant. Maintainability is achieved by modularization and breaking down the code into hundreds of small and cohesive JavaScript and CSS files.
Performance implies concatenation of this plethora of files into a few bundles and on-demand loading on Production.
Reliability requires you to ensure your dev and production environments are as similar as possible.
At Hootsuite we managed to reconcile those incompatible requirements by designing a robust static assets pipeline with Webpack, an open source static assets bundler.
During this talk, I'll explain how it compares to RequireJS and Browserify both in terms of performance and ease of use, walk you through its main assets like code-splitting, clever static analysis, automatic reloading in the dev environment, detection of shared code across bundles... I'll show how we put them to use to reduce the size of our bundles, improve our page load time and our JavaScript cyclomatic complexity.