Applications that scale

MVW has been the default choice for building single-page applications since Backbone.js appeared. It allows separation of concerns by isolating the business logic from the view, allowing us to build well-designed applications. Taking advantage of the observer pattern, MVW allows listening for model changes in the view and updating it when changes are detected. However, there are some explicit and implicit dependencies between these event handlers, which make the data flow in our applications not obvious and hard to reason about. In AngularJS, we are allowed to have dependencies between the different watchers, which requires the digest loop to iterate over all of them a couple of times until the results of the expressions results get stable. Angular makes the data flow in one direction; this has a number of benefits:

• More explicit data flow
• No dependencies between bindings, so no time to live (TTL) of the digest
• Better performance of the framework
• The digest loop is run only once
• We can create apps that are friendly to immutable or observable models that allow us to make further optimizations

The change in the data flow introduces one more fundamental change in the AngularJS architecture.

We may take another perspective on the scalability problem when we need to maintain a large code base written in JavaScript. Although JavaScript's duck typing makes the language quite flexible, it also makes its analysis and support by IDEs and text editors harder. Refactoring of large projects gets very hard and error prone because in most cases, the static analysis and type inference are impossible. The lack of compiler makes typos all too easy, which are hard to notice until we run our test suite or run the application.

The Angular core team decided to use TypeScript because of the better tooling possible with it and the compile-time type checking, which help us to be more productive and less error prone. As the following figure shows, TypeScript is a superset of ECMAScript; it introduces explicit type annotations and a compiler:

The TypeScript language is compiled to plain JavaScript, supported by today's browsers. Since version 1.6, TypeScript implements the ECMAScript 2016 decorators, which makes it the perfect choice for Angular.

The usage of TypeScript allows much better IDE and support of the text editors with static code analysis and type checking. All this increases our productivity dramatically by reducing the mistakes we make and simplifying the refactoring process. Another important benefit of TypeScript is the performance improvement we implicitly get by the static typing, which allows runtime optimizations by the JavaScript virtual machine.

We'll be talking about TypeScript in detail in Chapter 4, TypeScript Crash Course.