The 3 key benefits of Angular 2

04 JANUARY 2017 on angular 2, typescript, angular 1, angularjs, javascript

A few things we’ve learned from working with Angular 1 & 2

After working with Angular 1, and now Angular 2 on a number of projects we’ve discovered some key benefits of using Angular 2 as our go-to JavaScript framework.

1 - Code quality with TypeScript

Angular 2 recommends using TypeScript as the default language, and doing so offers a number of benefits over JavaScript:

• TypeScript is statically typed, allowing for the TypeScript compiler to catch errors on compilation that would only be caught during runtime in JavaScript
• TypeScript has fantastic integration with some editors (we use VS Code), which allows for code completion, error handling, and great refactoring tools: Jump to/peek at definitions, find all references, renaming symbols, changing all symbol references
• TypeScript supports all ES6 methods and allows code to compile down to ES3 to work on all browsers
• TypeScript is updated independent of the browsers, this allows you to constantly be using new features of the language without having to depend on browser updates

Angular 2 also allows for more consistent code quality between developers:

• Angular 2 has stricter patterns and definitions between concepts such as directives and components, this allows for more consistency between developers, and cleaner, easier to read code
• TSlint and the statically typed nature of TypeScript allow your editor to catch errors and enforce proper patterns, and disable parts of the language that in JavaScript are known to cause issues
• Great support for Reactive programming with RxJS. Much of the documentation revolves around event-driven architecture using reactive systems

While code quality can sometimes be an afterthought we all know how import a clean code base is when developing large/complex apps.

2 - Performance Gains

Angular 2 has immediate performance gains over Angular 1, the approach to DOM manipulation and rendering allows Angular 2 applications to run smoothly on a wider range of devices.

Angular 2 also has additional methods to get further increased performance if required:

• AoT (Ahead of time compilation) - Removes compilation from runtime into the build process.
• Different methods of change detection allow for more precise control over when the DOM rerenders.
• Web workers - Allows you to move all the processing for Angular 2 off the main thread and leave that solely responsible for rendering the UI.
• Angular 2 has a much smaller memory footprint, this was an issue with Angular 1 and something the team focused on improving. Angular 2 has a memory footprint roughly 60% of the size of an equivalent Angular 1 app.
• The garbage collection process in Angular 2 is vastly improved, this allows for for higher frame rates and less dropped frames in animations.
• Lazy loading modules allows for a much smaller initial app download size, as your application grows this can be massively important for initial load times.

These performance gains are exceptionally noticeable on mobile devices, which generally have lower processing power (vs. tablets, laptops, or desktops).

3 - Building interfaces that would be hard or impossible with Angular 1

The performance gains Angular 2 has over Angular 1 makes it possible to build innovative UI’s.

• Interfaces that would have caused performances issues in the past are now feasible to build
• And, you can build UI’s with complex actions and interactions knowing there are additional steps you can take if required to increase performance
• Component interaction is more clearly defined, you know how to precisely pass data between components and where data is coming form
• The event-driven architecture used in Angular 2 with RxJS allow for more performant apps compared to the $broadcast and $emit Angular 1 days

The convention over configuration nature of Angular 2 apps makes it easier to build large applications with a consistent and easy to learn structure. This allows teams to onboard new developers with relative ease.

To conclude

Angular 2 faces adoption issues, it’s not as easy to hack things together as it was in Angular 1 and other smaller libraries like React have filled that gap for many people.

Angular 2 is more niche focused than Angular 1 was. It’s going to be better for building large scale apps, those that you’d see at companies like banks, or the government, but less suited for the smaller apps Angular 1 was used for.

If your goal is a small side project then many of the benefits Angular 2 bring to the table will likely not apply to you, and it may be significantly slower to develop with than other options that are available. If you are looking at different options to update enterprise grade software with, project Angular 2 will bring a lot of conventions and best practices to your project that will help with consistency, reduce code reuse and structure.

--

Biznas.io

Biznas on Twitter

Biznas on Facebook

Biznas on LinkedIn