Angular evolution. High Level Overview.

Since its first release in 2012 AngularJS has become one of the most popular open source JavaScript frameworks for creating web applications.

AngularJS simplified the way web programming was done at that time. It implemented successful design patterns from other development environments like Model View Controller (MVC) and Dependency Injection (DI).

Other important AngularJS features include data binding and directives. Also it was written with testability in mind.

angularjs

In AngularJS, the modules are mostly dependency injection containers that group related functionality. There is currently no way to have two services with the same name but different implementations. AngularJS silently overwrites modules if they have the same name. In AngularJS, we can inject dependencies in multiple places in different ways.

It benefits for great documentation and community support.

AngularJS is much easier to understand and follow by ES5 Javascript developers. Also some important concepts like scope are difficult to manage by experienced developers too. It is needed to follow some best practices, and in general you have to think in angular way of doing things.

In the last years many new technologies based on JavaScript improved the way of doing web programming. When AngularJS was developed, most Internet browsing took place on desktop rather than on mobile devices.

The new Angular version is focused on the development of mobile apps because of the challenges related to mobile. (performance, load time, etc.)

Since Angular2‘s first announcement in 2014 and the final release in 14th September 2016 a lot of internal changes were done based on community feedback and what competitors achieved in the meantime.

You can write Angular2 applications in TypeScript, JavaScript and Dart, but since Angular2 itself is written in TypeScript the natural choice of writing Angular applications is TypeScript. Also, you can use TypeScript with any other language including AngularJS in order to take the benefits of using it.

The combination of Angular2 with TypeScript provides a big opportunity in object oriented programming in the front-end.

TypeScript is a super set of the new JavaScript specifications like ES6/ES7 allowing you to also define and use types and annotations. It includes many aspects of object orientation programming such as classes, inheritance and interfaces. It also has generics and lambdas.

Also, it contributes to a great developer experience making it possible to have IDE features similar to those known from OOP world. (static compilation, code completion, etc.)

The syntax is almost as readable as Java code, making it easier to learn it by OOP developers rather than ES5 JavaScript developers.

TypeScript must be compiled to JavaScript(ES5, ES6, etc.) in order to be used by browsers but this is not a real disadvantage since the new proposed JavaScript specification iteration is established to be one per year. Currently, the latest version of browsers almost have full support for ES6 (please see http://kangax.github.io/compat-table/es6/) but this will not be always the case and transpiling will allow us to use the next future features right now and not wait until they are implemented in browsers.

There are many conceptual and syntactical differences between AngularJS and Angular2. For example Angular2 syntax was simplified.

In AngularJS when doing one way data binding you have to be specific about the context (source of the binding) so you have to prefix the binding with the controller alias. On the other hand in Angular2 the context of the binding is implied and is always the associated component, so it needs no reference variable.

While in AngularJS, you can only specify the style sheets for your entire application, in Angular2 you have also the option to encapsulate a style sheet within a specific component so that it applies only to that specific component.

Other examples can be found here: https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html

While the syntax and architecture of Angular2 applications is a lot easier to understand than AngularJS, tooling is a bit more complex. Angular CLI is a project trying to address this specific problem by making easy to start a new Angular2 project.

Angular2 isn’t one script include like AngularJS. It is composed by many JavaScript modules which can be installed individually with the npm package manager and import parts of them with JavaScript ES6 import statements. It is something similar to the Java 9 objective to make the language modular.

angular2_architecture

Angular2 is not an MVC framework, but rather a component based framework. In Angular2 an application is a tree of loosely coupled components.

Components are the basic building blocks of Angular2 applications. A component will bring together the views, styles, controller logic, and state.

Every Angular2 application has at least one module called the root module and at least one component called the root component.

Rendering performance is substantially improved in Angular2. Also the zone.js module monitors the changes in the application and makes decisions on when to update the UI of each component.

Keeping the rendering engine in a separate module allows third-party vendors to replace the default DOM renderer with one that targets non browser-based platforms. For example, this allows reusing the application code across devices, with the UI renderers for mobile devices that use native components.

Components use services for implementing business logic. A service is typically a class with a well defined purpose and usually it is injected in the component by and Angular injector.

Dependency injection in Angular2 is more powerful, and it is easy to use because the objects can be injected only via constructors. As a result, there is a lot less API to learn, and the components are much easier to test. Also it is possible to mark a dependency as optional or have instantiated different implementations of the same interface. So, it is very similar with the concepts of Spring DI.

Using Angular2 you can develop applications across all the platforms: web, mobile web or hybrid apps(via Ionic2), native mobile(via NativeScript) and native desktop (via Electron). Bootstrapping an angular app is platform specific allowing for example to load a module with Apache Cordova or NativeScript.

Angular2 is designed to be extremely fast. With the help of so called “template compiler” the deployed app doesn’t require any template engine to run, but it rather contains highly optimized JavaScript code for directly manipulating the DOM. Also, with the help of a bundle that supports tree shaking like Webpack the unused parts are eliminated and thus produce a smaller bundle containing only what you actually need.

In contrast with AngularJS where lazy loading was difficult to achieve, Angular2 has built-in support through the framework’s router and so-called “lazy routes“.

Angular2 being optimized for mobile performance, has improved memory efficiency and fewer CPU cycles.

All these advantages were noticed and the framework has a good community interest:

angular_community_adoption

Also, there are already some reported Angular2 applications: http://builtwithangular2.com/

References and more resources

1. https://angular.io/docs/ts/latest/guide/architecture.html
2. http://slides.com/gerardsans/imworld-ng2-revolution
3. https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html
4. http://slides.com/gerardsans/devfest-lnd-amazing-ng2-router
5. http://slides.com/gerardsans/angularconnect-ng2-data-architecture
6. https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview
7. https://angular-2-training-book.rangle.io/handout/why_angular_2.html
8. http://www.codingpedia.org/jhadesdev/angular-1-vs-angular-2-a-high-level-comparison/
9. https://www.quora.com/What-is-the-difference-between-angularjs-and-angular2
10. http://mediatemple.net/blog/tips/do-you-need-to-upgrade-to-angular-2
11. http://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
12. http://developer.telerik.com/featured/19-tips-to-make-learning-angular-2-easier
13. http://blog.angular-university.io/angular2-router
14. https://www.meteor.com/articles/angularjs2-vs-1
15. http://www.talkingdotnet.com/difference-between-angular-1-x-and-angular-2/

Save

Save

Save

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 5 =