The Biggest Web Software Release in Years

The release of the Angular 2.0 Beta is a massive release with far reaching effects for a huge portion of the web application industry.

The transition from server-side applications to client-side Angular 1 and single page applications has been extraordinary over the last 3 years. With the release of Angular 2, all of that massive investment and work in progress has critical planning and migration work to consider.

With Angular 1, we are talking about billions of dollars in investment by banks, startups, and enterprises with billions more in the planning stages. Any fundamental shift in the architecture of the web is critical, and the reach of Angular makes this one stunning in scope.

With the Angular 2 Beta announcement, companies need to start answering key questions and making plans essential to their business over the next five years.

Answering the Big Angular 2.0 Questions

In the space of the next 3 months, companies have to answer:

  • Do I start new projects in Angular 2.0? If so, what is the impact on training, existing code, etc?
  • How do I evaluate Angular 2.0 alongside other options such as Ember, React, and other emerging frameworks?
  • Should I migrate my Angular 1.x application to Angular 2.0, and if so, when and how?

With the release of Angular 2.0 Beta, companies can move forward with concrete web development plans for 2016 and beyond.

Angular 1.x vs. Angular 2.0

There are some very compelling reasons to move to Angular 2.0 immediately.

1. Initial load performance

Three years ago Angular 1.x performed very well on initial application load times due to the fact that we were working on smaller applications and there wasn't a user expectation of near-immediate loads and transitions. Both of these have changed - we are building larger applications, and user baseline experience has changed. Angular 1.x performance, while excellent, isn't nearly as good as Angular 2.0 from a modern user's perspective. Improved change detection and server-side rendering have a huge impact and may make Angular 2 migration worthwhile on its own.

2. Large application performance

Faster and more reliable change detection. One-way data binding. Decoupling rendering from the DOM, and offloading work onto webworkers, server-side rendering, and alternative renderers. Add tooling such as Benchpress that greatly improves your ability to analyze performance, and Angular 2 becomes essential for larger applications - something that wasn't visible until we built very large Angular 1 applications.

3. Tooling

TypeScript and a better templating language enable tools to better understand your application and help you develop your application. Dev Tools such as Rangle's own BataRangle enable a deeper understanding of our codebase and a quick route to fix bugs and perfomance issues.

4. Large application architecture

The new component architecture, ES6 support, TypeScript, support for webworkers, strong decoupling of Angular 2 features, asynchronous/lazy loading, support for observables and immutables (RxJS and Immutable.js), and the Router all come together to create massive improvements in defining and maintaining large application architectures. Finally, native support for internationalization make for a strong multi-lingual ecosystem.

5. Mobile

Angular 2 has a mobile-first approach - built-in gestures, card stack navigation, easier lazy loading, smarter loading. These have a huge impact on building mobile applications and large parts of 3rd party frameworks can now be handled with vanilla Angular. Ionic 2 and NativeScript offer fantastic platforms for building full-featured cross-platform hybrid applications.

6. Better alignment with JS ecosystem

No digest cycle makes it much easier to integrate 3rd-party libraries with no knowledge of Angular.

Angular 2 has strongly decoupled features (e.g. DI), allowing for the broader JS ecoystem to provide new solutions to solve new problems.

Support for Babel allows new features of JavaScript to be leveraged without Angular being upgraded.

7. An Awesome Transition Plan with ngUpgrade and ngForward

The Angular team has built a strong upgrade path from Angular 1 to Angular 2 that enable teams to get started now. ngUpgrade allows you to write mixed codebase applications, whereas ngForward helps write Angular 1 code in an Angular 2 style.

What Are Your Critical Angular 2.0 Migration Steps

Angular 2.0 offers signficantly different means of building applications from Angular 1.x.

Our recommendations are:

  1. Spend a couple of days learning Angular that there is collaboration and buy-in on your next steps
  2. Assess your Angular 1.x code
  3. Determine the value Angular 2.0 brings to your development needs
  4. Determine the architectural strategy you want to take with Angular 2.0
  5. Determine your transition plan

Once your transition plan is in place...

  1. Minimize future Angular technical debt by developing in Angular 1.x with an Angular 2 style
  2. Mix your Angular 1.x with Angular 2.0 codebase
  3. Complete your Angular 2.0 rewrite.

Conclusions and Next Steps

Angular 2.0 has a huge impact on development. With the massive shift in the JavaScript ecosystem to ES6, and what we've learned about building large single page applications in the last 4 years, it's rare to see such a large compelling shift in a framework. Yet Angular 2.0 retains the spirit and foundation of Angular 1.x, allowing for rapid development of large single page applications with minimal effort and strong support for testing and other best practices.