Chapter 8. Tooling and Development Experience
We are already familiar with all the core concepts of Angular. We know how to develop a component-based user interface, taking advantage of all the building blocks that the framework provides – directives, components, dependency injections, pipes, forms, and the brand new router.
For the final step, we'll look at where to begin when we want to build a single-page application (SPA) from scratch. This chapter describes how to do the following:
Use Web Workers for performance-sensitive applications.
Build SEO-friendly applications with server-side rendering.
Bootstrap a project as quickly as possible.
Enhance our experience as developers.
What is Ahead-of-Time (AoT) compilation and how to use it.
So, let's begin!
Running an application in a Web Worker
When talking about performance in the context of frontend Web development, we can either mean network, computational, or rendering performance. In this section, we'll concentrate on rendering and computational performance, which are very tightly related.
First, let's draw parallels between a Web application and a video file, and between a browser and a video player. The biggest difference between the Web application running in the browser and the video file playing in the video player is that the web page needs to be generated dynamically, in contrast to the video which has been recorded, encoded, and distributed. However, in both cases, the user of the application sees a sequence of frames; the core difference is in how these frames are generated. In the world of video processing, when we play a video, we have it already recorded; it is the responsibility of the video decoder to extract the individual frames based on the compression algorithm. In contrast...
In this section, we will explore what a server-side rendering is, why we need it in our applications, and how we can use it with Angular.
For our purpose, we'll explain the typical flow of events when a user opens a SPA implemented in Angular. First, we'll trace the events with the server-side rendering disabled, and after that, we'll see how we can benefit from this feature by enabling it. Our example will be illustrated in the context of HTTP 1.1:
Figure 2
Figure 2 shows the first request by the browser and the corresponding server's response when loading a typical SPA. The result that the client will see initially is the content of the HTML page without any rendered components.
Let's suppose that we deploy the to-do application we built in
Chapter 4, Getting Started with Angular Components and Directives, to a web server that has the example.com domain associated with it.
Once the user navigates to https://example.com/, the browser will open a new HTTP GET request...
Enhancing our development experience
Our experience as developers can be enhanced in terms of productivity or by allowing us to have more fun while working on our projects. This can be achieved with all the tools, IDEs, text editors, and more, which we use on a daily basis. In this section, we'll take a brief look at popular IDEs and text editors that take advantage of the statically analyzable syntax that Angular provides. We'll also mention the language service that the Angular team developed.
As we have already said at the beginning of the book, the core team put a lot of effort into enhancing the tooling support in Angular. First of all, the framework is built with TypeScript, which naturally allows us to use static typing during our development process. Some of the text editors and IDEs that have great TypeScript support are as follows:
If you prefer to not get coupled with the CLI tool, there are a lot of starter projects developed by the community that can provide a great starting point for your next Angular project.
If you enjoy static typing, you can give the angular-seed project a try. It is hosted on GitHub at
https://github.com/mgechev/angular-seed
.
The Angular Seed provides the following key features:
Easy for extend, modular, and statically typed build systems.
AoT compilation support.
Supports multiple Angular applications with a shared code base in a single instance of the seed.
Production and development builds.
Sample unit tests with Jasmine and Karma.
End-to-end tests with Protractor.
A development server with LiveReload.
Uses codelyzer for static code analysis, which verifies that your project follows the Angular style guide to some extent.
Follows the best practices for your applications' and files' organization.
Manager for the TypeScript-related type definitions.
Provides full Docker...
AoT compilation in Angular
In this section, we'll briefly explain what AoT compilation is in the context of Angular and what implication it may have on our projects, without going into deep technical details.
The key focus in Angular is it's extremely fast change detection mechanism. After exploring different options for performing change detection, the Angular team discovered that the change detection mechanism used in AngularJS can be improved dramatically using code generation. It turns out that generating code, which performs change detection and rendering and on top of that is very well optimized for the JavaScript virtual machine, runs much faster compared to the traditional (also known as dynamic) change detection mechanism.
How code generation works
The Angular code generator is known as the Angular compiler. What it does is compile the templates of the Angular components to JavaScript or TypeScript (depending on the use case). When we compile the templates to TypeScript, we allow...
We started our journey by introducing the reasons behind the rewrite of Angular, which was followed by a conceptual overview that gave us a general idea about the building blocks that the framework provides. In the next step, we went through a TypeScript crash course that prepared us for
Chapter 4, Getting Started with Angular Components and Directives, where we went deep into Angular's directives, components, and change detection.
In
Chapter 5, Dependency Injection in Angular, we explained the dependency injection mechanism and saw how it's related to the component hierarchy. In the next chapters, we saw how we can build forms and pipes and take advantage of Angular's router.
By completing this chapter, we have finished our journey into the framework. At the time of writing, the design decisions and the ideas behind Angular's core are solid and finalized. Although the framework is still brand new, in the past couple of months, its ecosystem reached a level where we can develop production...
