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.?
Aleksandr: There is a lot of new, unusual syntax. The main thing that catches your eye is TypeScript, the result of close cooperation with a team from Microsoft. You can develop without it, using pure JavaScript, but TypeScript is the correct way to write large, but stable applications because it reduces the likelihood of errors, minimizes the amount of code and improves integration with the IDE. Also, syntax bindings, event subscriptions, and attribute values have changed significantly, but the new version seems logical, and developers will get used to working with it quickly. There is a functional command line among the new functions, which can already help generate application templates, components, directives, services, etc. It’s borrowed from Ember. It’s currently only a beta-version and isn’t stable, but the team promises it will be finalized soon.
Yury: I agree that among the most prominent new features for developers one can easily point out TypeScript, an excellent new addition to the framework that can facilitate and correct errors, even if you don’t know JavaScript in depth.
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.
Alex: I would choose ReactJS, a JavaScript library for building user interfaces, or Aurelia, a JavaScript client framework, over AngularJS every time. These frameworks don’t make you pull a whole tech stack to reach your goals. With ReactJS you can cover the most difficult and routine work and simply write everything else on your own, which is easier and faster. Angular dictates its own way of writing, a standalone language plus pulling many extra technologies. Aurelia is the best choice for me. It’s similar to AngularJS 2.0. but better, since it uses native standards while no “exclusive” tech is dictated.
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?
Alex: I understand that newbies who want to shine on the CVs when applying for vacancies will study AngularJS 2.0. without knowing how JavaScript and web browsers work. Being a pro at Angular will only make them narrow specialists, familiar with one framework with the intricacies of basic programming languages remaining a mystery to them. Developers who write in TypeScript for Angular 2.0. will not know how to independently realize different programming patterns. They will rely on ready-made syntactic constructions to do it while they have to know how to achieve the same on their own. This is a limited niche: outside of AngularJS 2.0. they won’t be able to code well.
Yury: One thing I would caution beginners about is only relying on AngularJS 2.0. for coding skills. Every developer needs to have a profound knowledge in JavaScript, on which lots of popular frameworks are built on. Without that knowledge, Angular will just be a crutch, without which developers will not be able to write code independently, or make changes that are not predetermined within the framework.
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
Aleksandr Chuev
Aleksandr graduated from Kharkiv National University of Radioelectronics in 2010 with an MA in electronics engineering. He worked as a freelance developer for seven years, before joining Itransition as a senior front-end developer. His technical interests are in JavaScript, HTML5, CSS3, all frontend frameworks and hybrid mobile apps.
Yury Korzun
In 2010, Yury graduated from Belarusian State University of Informatics and Radioelectronics with a degree in engineering, informatics and economics. He worked as a software engineer specializing in HTML coding, CSS, JavaScript, jQuery, editing and customizing different CMS like the WordPress and Joomla before he joined Itransition as a lead front-end developer. His work on various projects includes being responsible for all the front-end tasks, developing different applications, integrating back-end functionality with UI, communicating and coordinating stories with customers. Yury’s tech interests are in JavaScript, OOP, JS frameworks, Project architecture development, application optimization and beyond.
Alex Skakun
Aleksey began working at Itransition as a developer when he was still a student of Belarusian State University of Informatics and Radioelectronics. In 2016, he received his master’s degree in engineering and continued working at the company as a lead front-end developer. His technical interests are in HTML, JQuery, JavaScript, CSS, AngularJS, Knockout.js, Backbone.js, Node.js and LESS.
This article was contributed © HTMLGoodies. All Rights Reserved
