The Case for Using Angular 2 on a New Project

Written by Michael J. Bennett

Social Good

Angular 1.x still works. Even Angular < 1.2 still works and packs a powerful punch for less than a hundred kilobytes; it's more backwards compatible too. By the time Angular 1.4 came out the framework had grown to nearly one hundred and fifty kilobytes, and dropped support for some older browsers. Angular 2 is now in beta and it is over half a megabyte, and more or less requires developers to use language features not yet supported by current browsers.

So why would anybody want to start using Angular 2, let alone migrate to Angular 2?

Advantages of Angular 2

When Angular was first released, it provided developers with the tools to develop and architect large-scale JavaScript applications, however time has revealed a number of flaws and sharp edges. Angular 2 has been designed to build on what we've learned in the last five years.

Angular 2 is Easier

Years of feedback have made Angular 2 more modern, more capable, and easier for new developers to learn than Angular 1.x. In turn Angular 2 is also easier for project veterans to reason about. Ultimately this makes for a codebase that's all around easier for everyone to deal with.

With Angular 1, developers had to keep in mind and understand the differences between Controllers, Services, Factories, Providers and other concepts that could have been confusing, especially for new developers. Angular 2 is a more streamlined framework that allows developers to focus on simply building JavaScript classes.

Angular 2 replaces directives and controllers with components; think of them as refined directives. Even experienced Angular developers are not always aware of all the capabilities of Angular 1.x directives. Angular 2 components are considerably easier to read and their API features less jargon than Angular 1.x's directives. Additionally to help ease the transition to Angular 2, the Angular team has added a .component method to Angular 1.5.

Angular 2 was written in TypeScript, a superset of JavaScript. It helps make Angular 2's documentation a little more comprehensible as types are explicitly documented, and adds a valuable language feature in decorators, making injection easier to understand.

By focusing on making their framework easier for computers to reason about, Angular 2 allows for a much richer development ecosystem. Developers using sophisticated text editors, or IDE's will notice dramatic improvements with auto-completion. These improvements in tooling can help reduce the cognitive burden of learning Angular 2. Fortunately, for traditional ES5 JavaScript developers, this does not mean that development must be done in TypeScript or ES2015. Developers are still able to write vanilla JavaScript that runs without transpilation.

Despite being a complete rewrite, Angular 2 still shares many of the same core concepts and conventions as Angular 1.x; like a streamlined and "native JS" implementation of dependency injection. This means that developers who are already proficient with Angular will have an easier time migrating to Angular 2 than another Framework, like React or Ember.

Performance and Mobile

Mobile use of the web is huge, and growing. Mobile devices keep getting more powerful, but they're still quite underpowered when compared to a modern desktop; mobiles typically have less data bandwidth to work with.

Angular 2 was designed for mobile from the ground up. Aside from limited processing power, mobile devices have other features and limitations that separate them from traditional computers. Touch interfaces, limited screen real estate, and mobile hardware have all been considered in Angular 2.

The nature of computing performance means that desktops will also see dramatic improvements in performance and responsiveness. Early benchmarks performed on Angular 2 alpha confirm that "dramatic" is an accurate choice of word. The author makes the wise disclaimer that benchmarks are tricky to get right, and even when done correctly can be misleading. Nevertheless, Angular 2 alpha's rendering performance vs Angular 1.4's is astounding at scale.

Like React and other modern frameworks, Angular 2 can leverage performance gains by rendering HTML on the server, or even in a web worker. Depending on application/site design this isomorphic rendering can make a user's experience feel even more instantaneous.

The quest for performance does not end with pre-rendering. Angular 2 makes itself portable to native mobile by integrating with NativeScript, an open source library that bridges JavaScript and mobile. Additionally, the Ionic team is working on an Angular 2 version of their system, which will provide another way to leverage native device features with Angular 2.

Project Architecture and Maintenance

The first iteration of Angular provided web developers with a highly flexible framework for developing applications. This was a dramatic shift for many web developers, and while the framework was helpful, it became evident that it was often too flexible. Over time, best practices evolved, and a community-driven structure was endorsed.

Angular 1.x tried to work around the browser's limitations with JavaScript. This was done by introducing a module system that made use of dependency injection. This system was novel, but, unfortunately, had issues with tooling, notably minification, and static analysis. Angular 2.x makes use of the upcoming ECMAScript 6 module system, and modern packaging tools like Webpack, or SystemJS.

With Angular 2 modules are far less coupled to the "Angular way", and it's easier to write more generic JavaScript, and plug it into Angular. The removal of minification workarounds and rigid prescriptions make maintaining existing applications simpler. The new module system also makes it easier to develop effective tooling that can better reason about larger projects.

Conclusion

Angular 2 is built on years of user experience with Angular 1.x and offers many improvements. However there are still two advantages to Angular 1.x:

  • Developers are familiar with it
  • Angular 1.x is not in beta

Some new projects that have tight deadlines, and/or limited development resources would benefit from being written in Angular 1.x, using an Angular 2 style. This would allow for a straightforward upgrade in the future while making efficient short term use of resources. Rangle has actually developed an online training to teach this transitional architecture.

In almost every other conceivable case Angular 2 is a better choice than Angular 1.x for new projects.

Other Key Angular 2 Resources

Angular 2 Training (2 days in-class training)

Angular 2 for Angular 1 Online Course (2 1/2 day sessions)

Rangle's Angular 2 Resource Page

Four part Angular 2.0 Strategy Webinar Series

View and download Rangle’s Angular 2 Training Book. Our extensive Angular 2 course book, created in-house by Rangle’s team of JavaScript experts, covers fundamental topics including how to get started with the Angular 2 toolchain.

Rangle's Angular 2 Newsletter

Sign up for our dedicated Angular 2.0 newsletter, to gain insights on best practices and how to strategize your shift: