Development Workflow + Performance Optimizations
Angular Performance Improvements available in this Angular Site Template
First, let me tell you about the tools we use.
Npm scripts: Orchestrate the workflow and different deploy targets
Webpack: Handles the bundling of the assets
Angular Compiler (Angular CLI): Compiles angular typescript files
What about the performance enhancements we promised?
This Angular template offers you Ahead of Time Compilation (AoT), Server Side Rendering (SSR) and lazy modules all at the same time. Let's see what are all these concepts about.
Server Side Rendering (SSR) vs Client Side Rendering
The main difference is that for SSR your server’s response to the browser is the HTML of your page that is ready to be rendered, while for CSR the browser gets a pretty empty document with links to your javascript.
That means your browser will start rendering the HTML from your server without having to wait for all the JavaScript to be downloaded and executed.
We recommend using server side rendering (SSR) for two reasons:
Performance benefit for your users
Consistent SEO performance
In this project SSR happens at runtime and uses ngExpressEngine to render your application on the fly at the requested url.
Continue reading about Server Side Rendering in the following link:
Ahead of Time Compilation (AOT) vs Just in Time Compilation (JIT)
In Angular 1 (aka AngularJS), there was just the JIT (just in time) compiler, the compiler that runs in the browser.
When an Angular application is bootstrapped in the browser, the JIT compiler performs a lot of work to analyze the components in the application at runtime and generate code in memory. When the page is refreshed, all the work that has been done is thrown away, and the JIT compiler does the work all over again.
With the AOT compiler, Angular apps can be built to not require much of the compiler, change detection, or dependency injection systems at runtime. This leads to a significantly smaller application payload. And since the component factories are generated at build time, Angular can skip the compilation and move straight to creating views at runtime.
This results in gains in user perceived performance as the page takes less time to be interactive.
Lazy loading modules
Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used. (source: wikipedia)
Lazy loading is a feature that could help you a lot with large and heavy applications. By lazy-loading a module we can tell Angular to load it only when its route is been visited, meaning that its weight won’t affect the size of your application at startup.
Reducing the size of bundle when the app loads initially improves the app load times thus improving user experience.
To gain in code modularity, and get the benefits of lazy loading modules, we’ve created a lazy module for each major section of the app.
Within those module folders you will find every related file for the pages included in that module.
This includes the html for the layout, sass for the styles and the main page component.