Best Comparison: Angular 2 vs Angular 1
UPDATE: With the release of Angular 8, there is little reason left to use the original AngularJS. Check out this more recent comparison on angular vs angular.js to see which is right for you.
Since its first stable release in September, Angular 2 has quickly become one of the hottest frameworks for web development. Although its a complete rewrite of the already popular Angular 1, it addresses some of its predecessors greatest drawbacks. Angular 2 has also proved more performant, with multiple sources claiming it to be 5 times faster than Angular 1.
Despite such strengths, those familiar with Angular 1 and competing libraries (mainly React.js) are quick to point out the problems experienced with Angular 2. Many believe the framework has a steeper learning curve. Others point out the issues with TypeScript and 'transcompiling', which they argue ultimately slows apps down. Things also become less straight forward with Angular 2's templating syntax as Angular expressions have been removed from attributes altogether.
In this article, we take a closer look at both frameworks, analyzing their fundamental differences and arguments for choosing one over the other.
The Evolution of Angular
Google initially released Angular in October, 2010. Shortly after its release, Angular 1 became one of the most popular frameworks for web development. Through its use of dependency injection, two way data binding, and MVC like structure Angular.js influenced millions of developers to explore client-rich single page apps.
As great as Angular was for the front end dev community, it still had its flaws. The digest cycle could get confusing. Even simple event listeners were accompanied by recursive 'dirty checking' of scope variables, watchers, etc. When incorporating third party libraries, developers struggled with when to add $scope.apply and $scope.digest wrappers. How often the digest cycle ran (and in what order) remained fuzzy and was increasingly more time consuming with every watcher, directive, etc.
These flaws combined with the advent of libraries like React.js and React Native caused Google to rethink Angular's approach. This eventually lead to the development and release of Angular 2. It's been just a few months since the first stable release of Angular 2 but its progressive nature makes it a step in the right direction.
Angular 2
Angular 2 is a complete rewrite of Angular 1. They are not backwards compatible. Angular 2 takes a completely different approach that's more aligned with progressive competitors like React.js.
A Component Based Approach
Angular 2 is entirely component based, meaning that instead of following MVC you have individual web like components adhering to a specified template. This means no more $scope binding variables or directives.
This component based approach has proven more performant, especially when considering Angular 1's digest cycle. In Angular 1, every single user event caused the digest cycle to run. That means for every click or keystroke the client was recursively checking the entire DOM tree. For every watcher added to the DOM, the digest cycle got more time consuming. With Angular 2, developers have much more control over the digest cycle. Through the use of immutable and observable objects, components can listen for specific events before they are updated, drastically reducing the amount of 'dirty checking' that needs to occur each cycle.
Native App Development
Progressive web apps have solidified themselves as the future of software development. With libraries like React Native and Ionic, developers are finding ways to write javascript apps that compile into native source code for multiple platforms (aka iOs and Android).
This 'write once use anywhere' approach has been integrated into Angular 2's design. Angular 2's component based approach results in a strict separation between the application layer and what is referred to as the 'rendering' layer. Components point to templates defined in separate files which are independently rendered by the browser.
This separation allows for third party vendors to easily swap out DOM rendering with their own native platforms. In this way, developers can write application logic in javascript that serves both browser-based and native devices.
Server Side Rendering
One of Angular's biggest pain points is SEO. While the framework caters to single page web apps, it's difficult for web crawlers to read HTML thats generated client side. Angular 2 allows for server side rendering, virtually illiminating the need for third party libraries (like prerender.io) to separately cache static HTML pages. For a more in depth discussion on the benefits of server side rendering, see Page Rendering: Client Side vs Server Side.
A Steeper Learning Curve?
Angular 2 was developed using TypeScript, a Microsoft owned superset of JavaScript. TypeScript essentially makes JavaScript a typed language. This means that instead of defining your variables with a simple var you define types. TypeScript also enforces object oriented development, making it more Java like in its syntax.
While TypeScript has it's benefits (mainly for tooling support and fancy javascript IDE's), many developers argue that it makes javascript far too complicated. Angular 2 proponents argue that its use of hierarchal dependency injection make it less confusing that Angular 1's modular approach.
Conclusion
Angular 1 remains popular and certainly isn't going anywhere. Before the first stable release of Angular 2, it was estimated that over 1.3 million developers were using Angular. This doesn't mean that Angular 2 should be ignored, especially when considering how much libraries like React have made cross platform app development a reality. Angular 2 earns its right as the more progressive option but be wary of how long it can take to adjust to its component based approach.
Because of its progressive nature, it's probably good to start playing around with Angular 2. Just don't do a complete rewrite on your existing Angular 1 app. It's still got time.
