Angular2 boilerplate on steroids

The story of how I achieved top notch results on page speed and performance with Angular2.

Screenshot of Google Page Speed Results for this Angular application
Google Page Speed Results for this Angular application

It is an open source project on github: https://github.com/voxmachina/angular2-boilerplate

Check also the results from WebPageTest:

The Angular framework, must be the most controversial framework so far, either you’ll love it or you’ll hate it! And I’ll confess, the first version didn’t managed to convince me at all. But then again, this isn’t a tutorial on the framework neither on the JavaScript language, this is a story of how I’ve managed to achieve top performance results with the newest second version of the framework, with a real world example, featuring both front-end and back-end support for a personal website, such as mine!

Everyday we see a new chart comparing a bunch of frameworks for their “performance”, and I always laugh at it, because I do know that performance has less to do with code and more with tooling and configurations. By simply removing some tasks from my project, and not touching the code or the framework at all, I could make the website the worst in terms of performance ever!

Performance has less to do with code and more with tooling and configurations

I’ve decided to implement a simple personal website with three pages, reading content from JSON endpoints from MediumInstagram and Github; then there’s an about page and a contacts page.

The front-end section is build with Angular2, the back-end uses PHP to deliver the results and also cache them locally, also provides all the necessary .htaccess files and rules to make the app work properly.

The project uses a series of methods and mechanisms to achieve top performance and speed, and all is manageable through simple Gulp tasks; the only more complex task is the task that performs the Angular AoT compilation mechanism which replaces the app entry code by updating some imports, I admit, it was a hacky solution to achieve conditional imports because that is something that Typescript does not support.

Another complex mechanism is added as a task also to deliver a first version of the content for the above-the-fold target, which basically transforms index.html into an index.php with the top menu bar and only loads through PHP the Medium feed, a barely perceived difference on good connections, but on slow connections it makes all the difference between someone leaving your site or start reading something right away and staying for more.

The code itself it’s very simple, but here’s the list of tasks that I did to make it top notch on performance and speed:

  • Always deliver gzipped content
  • Use really long term caches for your assets and use a cacheburn mechanism to purge
  • Compress and minify all of your assets
  • Make use of the framework AoT compilation mechanism, which basically makes the build process not to include the framework runtime compiler, which not only increases speed but also decreases file size.
  • Optimize your first content load with the bare minimal content and style for a very fast first page load
  • Never block the page load with either JavaScript files or Stylesheet files.
  • Make good use of a CDN

I’ve managed it all with Gulp, so one could even say that replacing the framework and using the same tooling and configurations, we could achieve the exact same result.

Some might say that writing code with Angular it’s messy, well then, take a look at my code structure:

Screenshot of Application Component Code for this Angular application
Application Component for this Angular application

And at my code:

Screenshot of Application Component Code for this Angular application
Application Component Code for this Angular application

And tell me if this feels messy to you?

Performance and speed are not dependent on a framework or on a library, they are the responsibility of the developer, as the code quality and structure itself.

Careful with the next time you’ll say: “Framework X is slow and heavy and I hate it”, you might be saying that you don’t know how to optimize an application yourself.

I must admit, I’ve come to enjoy this new version of the framework, as I do enjoy React, although I think of it more as a library, Backbone and others. They are tools for one to choose the appropriate solution for the issue at hands given an amount of time and resources.

Before you hate it or love it, do the same as me, test it yourself and share your knowledge and learnings.

https://github.com/voxmachina/angular2-boilerplate

Leave a Reply