Angular 4: Front End for the Enterprise

When Angular 2 was released in September of 2016, it signalled a dramatic shift in enterprise front-end development. Not only was it a complete rewrite of AngularJS, but it was also built from the ground up with Typescript – Microsoft’s strongly typed superset of JavaScript.
Suddenly, enterprise developers experienced with type-safe languages such as Java, C# and Scala, were welcomed into the world of modern front-end development with a framework that seemed immediately familiar to them.
In March of 2017, Google announced the release of Angular 4, now known as simply Angular, which introduced many optimizations and improvements to the developer experience and the user experience, solidifying Angular’s stance as an ideal, front-end development framework for the enterprise.
This post highlights the benefits of Angular from both a development and a user-experience standpoint and reviews the improvements over Angular 2 that Angular 4 introduced to the framework.
Typescript and the Benefits of Strongly Typed Languages
Enabling developers to assign types, interfaces, classes and inheritance to their front end code, Angular 2 made complex applications both easier to develop across large teams and more importantly, easier to maintain and refactor.
The introduction of static types ensured that developers could be confident that any errors they might introduce into a code base would be caught immediately by the TypeScript compiler, and that code written by a colleague was well defined, easy to understand, and simple to consume.
Libraries vs Frameworks
In addition to the introduction of static typing, Angular 2 introduced common design patterns based on lessons learned from AngularJS’s evolution and the emergence of other front-end libraries such as React and Ember.
This difference is what makes Angular a framework and React a library. React does not dictate any decisions outside of the view layer. Where developing a complex application with React would require bringing in any number of external libraries in any number of ways, Angular provides modules and conventions that offer solutions to everything required of a complex front-end application, allowing developers to start delivering features straight out of the gate.
As a result, an Angular developer can be brought into any Angular project and will be immediately familiar with the code and conventions used to make it work. Developers will be familiar with the framework and many of the standard conventions that are used on any project; whereas a large React project would require significant time for a developer to familiarize themselves with the architectural decisions made to any particular project.
Angular 2… Angular 4…. Let’s Just Call it Angular
In December of 2016, the Angular team announced that they would be adopting semantic versioning, also know as Sem-ver, which prescribes a strict semantic relationship between code changes and version numbers. This numbering system aligns major numbers with breaking changes, minor numbers with new features without breaking changes, and patch numbers that represent bug fixes, Sem-ver lets a developer know whether or not upgrading a library will break their code.
So why the jump to Angular 4? Angular is a collection of distinctly separate modules, and one of these modules, the router, had gotten ahead of the rest of the library and had already made the jump to version 3. To get everything back in sync, and to fully support Sem-ver across all of the Angular framework, the core team decided to bump both the Angular framework and the router to version 4.
This jump in major numbering was confusing at first, but a necessary step for Angular’s version numbers to be truly representative of the changes being made to its codebase.
As a result, Angular 4 is now simply referred to as Angular. This is in contrast to AngularJS, which represents all 1.x versions of Angular. Whereas Angular 2 is a complete rewrite of AngularJS, all future major versions of Angular will not represent rewrites of the framework, but rather, further improvements, and the core team has a release schedule that includes major version upgrades every six months. Angular 5 is slated for release in September of 2017 and Angular 6 is due in March of 2018.
So What’s New in Angular 4?
Angular 4’s focus is on improving the performance and bundle size of Angular 2. It’s possible to consider Angular 2 a beta version of Angular itself, with Angular 4 introducing optimizations and improvements that the Angular community asked for.
Long-term Support (LTS)
At ng-conf 2017, the Angular Core team announced that Angular 4 will be its first version of Angular with LTS. This means that enterprises that don’t have the ability to constantly upgrade Angular and their applications can commit to Angular 4.
Faster Rendering and Smaller Bundle Sizes
Changes in the compiler reduce the size of the generated code for your components up to 60% in most cases – the more complex the template, the higher the savings. Further, by removing the animations package from @angular/core, your bundles won’t have to include it unless they require it, saving additional file size.
Better Minification
Angular 4 now ships with Closure annotations, which allows developers to use Google’s Closure compiler to drastically reduce the size of their bundles even more than what was previously possible with UglifyJS, thanks to smarter tree shaking.
TypeScript 2.3
Angular 4 uses a more recent version of TypeScript than Angular 2, and this allows for faster compilation time with the ngc compiler and better type checking.
Better Error Messages
A common source of frustration with Angular 2 was its somewhat cryptic set of error messages. With Angular 4, not only are error messages clearer and more informative but now thanks to new template source maps, they also point directly to lines of code within templates.
Server-side Rendering
Angular Universal, Google’s server-side rendering library, is now compatible with Angular 4. Universal allows developers to render their applications on the server side, benefiting both search engines and users alike.
*ngIf, Now With More Else
The *ngIf structural directive, a very commonly used part of any Angular application, now has an else statement. This means that developers can now simplify their conditional templates, no longer needing to use two *ngIf’s with opposite evaluations.
Angular 4 Is an Ideal Enterprise Front-end Framework
With the improvements made to Angular by the Angular Core team in Angular 4, Angular has solidified its position as the ideal front-end framework for enterprise applications.
Based on standard conventions, familiar design patterns, strongly typed code, and server-side rendering, enterprises can develop scalable applications across large teams that are highly performant and optimized for the server side and client side alike.
With a clear release schedule and the recent announcement for LTS versions, enterprises can adopt Angular for their front-end applications with full confidence that they are choosing the best framework for the job.


Build Your Own DevExtreme

I want to tell you about a set of JavaScript UI widgets available on GitHub that my team and I work on daily. Specifically, my goal is to help you:

Learn about DevExtreme on GitHub.
Get started with the DevExtreme repo (fork, clone, build, etc.)

First, some background. DevExtreme is a UI component suite for front-end development and it’s been around for years as a commercial product. Recently, we moved the library to GitHub and it’s now available to use for free (if you’ve got a non-commercial project).