Rodrigo SuárezJun 9, 2017

Angular Evolution

We have worked with AngularJS in the past, creating successful projects for our customers. Yet, lately we have been developing new projects based on React.

Did we ditch it? Well, no. And we are actively looking into the Angular Evolution.

In this industry, new technologies are created and practices evolve constantly in an ever growing pace. In Octobot we believe that keeping up with what happens in the world of web development is crucial, yet we try to see through the hype and identify what’s more appropriate for each project.

When the Angular team released the Angular 2 beta, we saw that many things had changed but there was still a lot of speculation on what would be definitive. We decided to wait a bit for the turbulence to pass, so we could see it’s final shape.

Now that process is set and done, and in this opportunity we are going to talk about the new version of Angular(4 currently), which were the biggest changes, and we will leave a small example so that you can understand the new architecture that is created when making an app with this Framework.

It’s just Angular

As you can see, the suffix “JS” has been removed from the name. This was not just because of aesthetics, but because it was rewritten using Typescript a Javascript superset created by Microsoft.

We believe this to be a positive change, as it is a great tool to write more robust apps.

A new Architecture

When the Angular team released Angular 2 in September 2016, the community exploded. The frameworks where quite different, and it resulted in many breaking changes, which poised tough questions about the migration process.

Versioning and release schedule

When this was still being digested, at a conference given in Belgium (ng-be), Angular’s Igor Minar announced the release of Angular 4 in March of this year. You can watch the video here.

The community was a bit skewed off, but there was a reason for the new versioning number and it relates to SemVer, or semantic versioning.

Semantic-version

If breaking changes are to be introduced (such as switching Typescript major version) it would be a breaking change, and would increase the ‘MAJOR’ number. If it adds new features, you would simply increase the ‘MINOR’. And if it only fixes bugs and enhancements are made, it would increase the ‘PATCH’ number.

So they started working with SemVer and skipped version 3. Yet for version 4, there are not breaking changes from version 2.

This is the tentative schedule of the new releases:

Schedule

Interesting differences

We could recap the differences from 1 to 2|4 in this brief list.

A new framework

It is almost a new framework. It is designed based on more than 5 years of user feedback and adapting to the new standards of the modern web. Optimized for mobiles, improving performance, adding many products to the ecosystem as Server-Side-Render, a new [Angular Material](https://material.angular.io /), Debugging tools, etc. It keeps many things of its core that make it Angular, such as the injection of dependencies, routers and services. This gives familiarity to developers who already had experience in AngularJS.

Component Based

Although in version 1.5 the components were implemented natively, in Angular 2 the architecture is entirely oriented to components. controllers and $scope were removed. This, combined with encapsulation of components and creation of modules (set of components) allows the creation of large applications without losing maintainability and cleanliness.

Typescript.

As we said before, Typescript is a Javascript superset that allows you to implement many of the new features of ES2016 + and extends many things that JS would not do by itself when developing. Given that is a language that adds a static typing, it reduces programming errors that come with dynamic typing (and in particular for JavaScript), in addition to having a much lower learning curve for people coming from other OOP languages since we can structure the code with classes, interfaces, enums, etc.

CLI

The integration of a CLI (Command Line Interface) makes the development more agile and we apply good practices that the angular team offers directly to us. It is based on the Ember CLI and is already in a stable version. With it we can run a local server for our application, make a proxy, create components, directives, interfaces, pipes, etc. You can see all the features in the official repository

Performance and Mobile

Angular offers a better performance compared to AngularJS, and have even stated in the ng-conf that it is 5x more performant. This also impacts mobiles, as they are devices with less processing power than traditional computers. In addition, an Angular application can be transformed to a native application using NativeScript. Ionic also did its job creating a new version for this: Ionic 2.

Sum up

Having seen all the changes, we believe that the Angular evolution is a positive path for this proven framework and we have by no means discarded it for future use. It has included many powerful features similar to other tools, that will eventually lead to a broad usage for small and big projects.

If you have any thoughts on this, leave them in the comment section.