March 16th, 2016
In modern web development, there are several techniques for building the components used by web applications. Angular's templates are authored using semantic HTML, encouraging a strong separation between how a component is structured and how it behaves. This is a design choice aligned with the Rule of Least Power.If you like this post, you can follow Victor Savkin on Twitter and read his personal blog.
Swapping ImplementationsOne of the best things templates give us is a clear boundary separating the view layer from the rest of the framework. This enables us to completely swap the implementation of the view layer without breaking any applications. We did it several times while working on Angular 2. For performance reasons, we would change how templates are compiled to try various optimizations and techniques. And we would do that without affecting our clients. Performance is a very tricky thing. Often it is hard to know ahead of time how a particular technique will perform. So having the ability to experiment without breaking anyone is extremely useful. And it is key for building a fast framework. This also means that the framework can have multiple implementations of the template compiler optimized for different use cases. It is certainly possible to achieve the same result without using templates--you just need a well-specified boundary around the view layer. But it is a lot easier to maintain such a boundary when using templates.
Declarative Animations/I18n/AccessibilityAn ability to analyze and transform templates has a lot of practical applications. One of them is internationalization, where the framework can transform static text from one language to another without any runtime cost. Other examples include animations and accessibility. Since in Angular these concerns can be handled by the template rather by imperative code, these features can be turned on or off to serve different users, for testing, etc.
Separating Dynamic and Static PartsAnother thing that using a templating language gives you is a clear separation of the dynamic and static parts of the view. This helps you, the developer, quickly see the structure of the view, and how it can change. But what is even more important is that the framework can do it too. It can easily see what parts of your view are static and optimize those. For instance, Angular knows that only expressions can change, and the rest of the markup is static. So after the initial rendering is done, the static markup is essentially free. It is a lot harder to detect static parts of the view when using virtual DOM. It can also notify you about the structural changes. For instance, since Angular 2 knows when views get added or removed, it can animate those, without you having to do anything.
Using Other Templating LanguagesSince using templates requires the framework to have a well-specified boundary around the view layer, it is not hard to add support for other template languages. This allows us to build better integrations with other technologies. For instance, the Angular 2/NativeScript integration uses XML instead of HTML. But it is easy to go even further and add support for such languages as Twig or Haml.
SummaryAngular 2 embraces the rule of least power and uses templates because of this. This brings the following benefits:
- The implementation of the template compiler can be swapped without affecting applications.
- Templates can be analyzed and transformed to remove boilerplate and improve dev experience.
- Static and dynamic parts of the view can be handled differently.
- Internationalization and animations can be implemented in a declarative way.
- Templates are built on top of an existing set of tools, and they are designer-friendly.