Getting to Know Angular 2
By Aleksandr Chuev, Alex Skakun, and Yury Korzun
Though 2 officially arrived recently in mid-September, Angular is steadily updating its framework, with patch releases every week, in addition to three minor updates and one major update every six months. With all of these changes, what are the best features, the advantages and its most interesting innovations to know?
A team of front-end developers who use Angular in their daily work have discussed these points and determined there is quite a lot to learn. From changes in the Internet since the first version was released to the evolution of web development standards, the division of directives into three groups to routing similar to React, rewriting projects from Angular 1.x into 2.x to tips for beginners working with Angular 2.x, this article offers highlights from their conversation.
Why was there such an urgent need for a drastic reworking of the framework?
Yury: There were many problems with the first release, so this is a long awaited release for fans of the framework, fueled by a long period of testing the alpha and beta versions. The premise for the release is simple: the Internet has changed since the first version, and, to be honest, AngularJS 1.x. was not designed as a framework for programmers. It was created in 2009 by Miško Hevery as a software product that makes enterprise apps easy to develop, later released as an open-source library, which became the popular framework we know today. So the goal was never to make the best framework, it was just a bit of luck that got the end product where it is now, so it makes perfect sense to do a complete overhaul and bring it closer to the level of its competitors.
Alex: Angular 1.x. was being constantly renewed, but finally became unusable and inconvenient to develop with, slower in comparison with its competitors. Besides, requirements are different today, and it would be too problematic and wrong to add more versions to the old AngularJS. A completely new release was needed.
Aleksandr: I agree with Yury and Alex, and I believe this release delivers on all its promises. On the website of the new version of the framework, the latest release is called «AngularJS 2.0.: One framework». Maybe it will turn out to be exactly what it says on the tin. From what I have seen so far, it is built taking into account the current trends of web development, using new technologies and approaches.
So what’s different in the final release, compared to the latest AngularJS 1.x.?
Aleksandr: It’s necessary to understand that this is not a new framework; it’s the same AngularJS, only evolved. Directives are still there, but now they are simply divided into three groups: components, structures and attributes. Former filters are now called Pipes. Form validation remains about the same, which isn’t ideal, but there is no better alternative for it so far. The second version is simply building on all the best features of the finest and most convenient web development technologies and approaches out there. Routing, for instance, is implemented similar to ReactJS.
Alex: I have to disagree with the point that the second version is the same framework. In AngularJS 2.0. everything is different. The new framework doesn’t even look like the old one, with a new library and architecture. It could have been named something else altogether, it’s that different.
Yury: The truth is somewhere in the middle, I think. The basis of the framework is completely redone in AngularJS 2.0. The main idea of AngularJS 1.x. was catching changes in the user behavior in the interface, creating events according to these changes and reacting to them in a certain way. This mechanism is completely reworked in the second version, making it faster and easier to work with, resulting in better performance especially with large multiple page complex websites that have multi-element interfaces. But of course some features remain the same or are slightly reworked.
Aleksandr: Let me add here that the documentation is detailed and user-friendly, which the first version of the framework painfully lacked. There is even an official cheat sheet (https://angular.io/docs/ts/latest/guide/cheatsheet.html). An interesting decision was made on working with CSS. Each component has its own set of styles, the selectors of which can be extremely simple (h1, .content, footer), since their action is limited by the component itself. This encapsulation is achieved by imitating Shadow DOM with the help of generating a unique selector for each element. The issues of accessibility and security are taken to the next level. It’s a much better framework all around.
What are the major advantages of AngularJS 2.0?
Aleksandr: The current component approach is the best feature, in my opinion. In general, this is a well-designed, productive framework, the applicability of which is much wider than of its first version.
Yury: One big advantage of Angular as a framework is its solid developer community, which discusses new features on GitHub where everyone willing can test them, understand the underlying philosophy behind every feature and get reliable feedback from dedicated contributors. You can basically rely on the expert opinions of people who know how to do things the right way from their rich experience.
Alex: As already mentioned, directives became components in the new versions, that’s amazing. On paper everything looks good, but I haven’t tried it out yet so am quite skeptical about how the day-to-day coding will go.
What are the brand new features that will affect the daily workflow of a developer working with AngularJS 2.0.?
Alex: I have to say that I am not a fan of TypeScript. I don’t like the idea of writing in a different language just for the framework. For me that’s a sign of a weak framework. It’s hard to use when you solve concrete issues, hard to understand and is completely unusable outside of AngularJS. To write an app, developers need to use many other Angular-exclusive components, a whole tech stack, in fact, where it should be minimal. Maybe it will be easier in the future, with newer releases.
What can you say about performance and testing?
Yury: Better performance is definitely among the advantages of Angular 2.0. that truly stand out, along with easier data biding, templates similar to ReactJS, logger finding places where time is wasted.
Aleksandr: The framework is very thoroughly developed when it comes to performance and testing. I have to note excellent implementation of Dependency Injection. It’s easy to mock component dependencies. The convenient Protractor for end-to-end tests remains from the previous version.
Would you suggest rewriting projects programmed in the first version to fit the AngularJS 2.0. framework?
Alex: It all depends on the project, the time on your hands and the budgets, of course. We won’t be rewriting projects unless the client pays for a year of extra work. There is really no sense in it if you have a well working project. If it’s business critical and you have the money and team members to do it, then more power to you!
Aleksandr: Despite the fact that the team from Angular tried to make the second version of the framework in all likeliness to the first one, while adding the new component approach as the basis of AngularJS 2.0., rewriting current major projects for the second version may be a very labor-intensive process. The difference is really huge. But if it’s worth it in the end, it can be done, of course.
Yury: If you are renewing a project from the previous version, of course the latest framework is much more in sync with the latest web development standards. On larger projects with complicated backend issues, the switch could be a complex process, but at the end of the day you will benefit from relevant architecture of the latest release, so it might be worth the effort.
As soon as the framework came out, many comparisons were made between Angular 2.0. and ReactJS. What’s your take on this?
Yury: There are many opinions when it comes to comparing AngularJS and ReactJS. There are of course many similarities between the two, and AngularJS 2.0. now boasts new syntax and a component approach that looks very much like it was inspired by ReactJS. The new architecture that shifts focus to controllers will hurt the popularity of ReactJS, in my opinion.
Aleksandr: Google developed the second version of AngularJS in collaboration with teams from other significant projects, providing useful services to enhance interoperability. For example, NativeScript and Ionic 2, that enable programmers to develop native and hybrid mobile applications, are tightly integrated with AngularJS 2.0. Taking into account the rich infrastructure of these services, Angular gets good support in this area. And, the same cannot be said about React Native, so it is currently losing its position. Certainly, the use of high-grade component approach in AngularJS 2.0. will lower the popularity of ReactJS even further.
Is there anything a developer who has recently graduated from college should know about AngularJS 2.0?
Aleksandr: I agree, AngularJS 2.0. is a great framework, but you have to rely on a solid programming foundation. Another tip would be to keep learning every day and look for new things out there that can take your developer game to the next level.
About the Authors
This article was contributed © HTMLGoodies. All Rights Reserved