The Road to Angular 2

In 1955 IBM developed the first high level programming language, FORTRAN.  Instead of using assembly code, FORTRAN gave your punch cards the ability to use 32 statements that would be compiled down into mainframe programs.  This abstraction drastically reduced the amount of code a program required and increased developer output (and presumably, their sanity). But why am I talking about an old language from the 50s?  It seems so far removed for the popular languages that we use today.  However, for the last 60 years, FORTRAN has been consistently updated.  The language is like a time capsule for the programming paradigms of the day.  Updates were made for Modular Programming, Structured Programming, Recursion, Object Oriented Programming, and more.  Be on the lookout for FORTRAN 2015 which releases in 2018.

The amount of languages and frameworks that exist today are staggering.  To stand above the rest, one must adapt to keep up with all the new proven methodologies.  Software updates are a fact of life now and dependency management is a part of every build. A new version can be as easy as changing a number and some minor refactoring.  But what if a new update requires drastic rewrites of a codebase?  Angular 2.0 was just released on September 14th and is still in its infancy.  How do you transition? And, is it really worth it?

This type of upgrade cannot happen overnight.   This change costs development time, defers new features, and causes a divide in the development community between the old and the new. When Python 3 came out in 2008, it standardized some of the languages features and brought Unicode support.  However, without specialized libraries, Python 2 code was no longer compatible with new Python 3 code.  As an import heavy language, there was large incentive to continue to use Python 2 until a majority of Python libraries were ported to Python 3.  It wasn’t until this year that Ubuntu finally started including Python 3 in its distribution, 8 years after Python 3’s initial release.

Right now the web framework AngularJS is going through a similar transformation.  In 2014 they announced that AngularJS will be rewritten for the modern browsing experience.  Inspired by concepts from competing technologies like React, Angular 2 promises to be modular, fast, and easy to maintain.  This sounds great, but these new features do not just plug into existing Angular code.  Angular 2 recommends using TypeScript instead of JavaScript.  Templates are now made up of a tree of specialized components that handle defined inputs and outputs.  The almighty “$scope” is gone for good.  In a large application written by many developers, refactoring for Angular 2 seems impossible.

Fortunately, I think the Angular developers learned from the past, and want to avoid having a large disconnect for the next 10 years.  They have released an upgrade guide that provides a clear path for developers going forward.  What I find clever is this path will improve your AngularJS code, even if you decide not to upgrade.  There are two things you can do today that will make your code cleaner with the added benefit of increased Angular 2 readiness: follow the style guide and try using the 1.5.x component directive.  If you haven’t looked at the style guide before, it is a great resource for how to structure Angular code while also giving justifications on why.  As the guide highlights, using the “controllerAs” syntax is a fantastic alternative to using “$scope” and will immediately clarify which variables belongs to which controllers in the DOM.  Using the component directive will prepare you for the new workflow of Angular 2.  It will help you get used to the component lifecycle, avoid two way bindings, and understand the component tree.  These smaller pieces of code are easier to reuse, test and understand.

Once you have mastered the initial steps, and decide to move forward with the upgrade, the path admittedly gets trickier.  Additionally, like the Python 3 problem, you may rely on a bunch of Angular 1 libraries do not transfer easily.  What the framework has done is provide a “Dual Boot” set up where Angular 1 and 2 frameworks run together using the Upgrade Adapter.  This allows developers to avoid having to convert all of their code at the same time.  Used responsibly and with a timeline for conversion, I can see this being a smart choice.  However, I am worried that many applications will be stuck on this step, never fully committing to Angular 2 and dealing with communication issues between the old and the new.  But with good planning, the promise land of a modern web framework can be reached where the productivity gains make it all worthwhile.

Right now Angular 2 is in its infancy.  Developers are still apprehensive about the drastic differences between the versions.  The developers at Angular realize how much they are asking of their users and have provided a good path for transitioning.  While it is too early for many teams to begin upgrading, I recommend these five steps to making sure your app is “Angular 2 Ready:”

• Use the style guide
• Follow current best practices in regards to “$scope”
• Use Components in Angular 1, understanding what benefits they offer
• Gain an understanding of the Angular 2 syntax and workflows
• Review the Angular 2 migration process

There is no downside to readying your app.  At worst you made your codebase cleaner and easier to maintain.  There is no doubt that this is a big change, but I look forward to using the new features of Angular 2 as it gains support and popularity in the development community.