AngularJS 2.0: New Framework, New Expectations

AngularJS 3

“AngularJS 1.x is built for current browsers while Angular 2.0 is being built for the browsers of the future.” – Igor Minaz, AngularJS team.

Events leading up to the impending AngularJS 2.0 release have been nothing short of epic. The September 2014 release announcement started it all. A complete rewrite with new changes caused differing opinions among Angular developers. Angular creators thus pushed 2.0 into developer preview mode.

At the time of writing, post the Dec 2015 beta version release, no further final release version date has been provided. In fact the Feb 2016 AngularJS 1.5 release was intended to ‘improve the upgrade path to Angular 2’, as the Angular blog states. AngularJS 2.0 is loaded with so many brand new features that several developers have remarked (in a lighter vein) that the framework deserves a new name altogether. Here is what we can expect from version 2.0:

AngularJS 2.0 is loaded with so many brand new features that several developers have remarked (in a lighter vein) that the framework deserves a new name altogether. Here is what we can expect from version 2.0:

1. Easier & Faster than previous Angular versions: Version 2.0 promises a learning curve similar to AngularJS 1.0. It is expected to be easier to work with, compared to previous AngularJS versions, once developers get a hang of it. Emerging web standards are also adhered to in this version. The central idea is a simpler and communicative framework, with improved performance and speed. Made primarily with an eye on web component support, compatibility level with browsers is an expected advantage. Not every developer finds learning AngularJS easy. At least not without in-depth knowledge of its main features. Exclusive Angular features like custom directives take some understanding. Developers are thus looking at a version that is easier to work with. Know more about the new ‘observable’ feature and ‘reactive programming’ here.

2. TypeScript: Say hello to a new language in version 2.0 – TypeScript (A typed Java superset) as the new language is an important and debatable decision. The TypeScript inclusion makes up for compile type checking, auto completion, great refactoring tools, new decorated syntax and thus, improved dependency injection. Automated Refactoring (function renaming) is helpful, especially in framework and API building. Reusing libraries and components will be easier too. Finally, AngularJS 2.0 is a framework that compiles to JavaScript. Unconfirmed reports state that if you write in a language that compiles to JavaScript, 2.0 is cool with it. Controllers are omitted here, components and directives can instead be put to use. As Martin Probst, Google software engineer working for the AngularJS team, remarks in a Feb 2016 interview, “As developers, we observed ourselves to be considerably more productive (post using TypeScript). TypeScript is a game changer for a framework like Angular.” Want to know more about writing Angular 2 in TypeScript? Click here.

3. ECMAScript 6: The scripting language specification assures better performance. You also have the option and stick to ECMAScript 5. Consequently, no asynchronous loaded models will be in use. Every component will have a view and JavaScript class. A standard implemented by JavaScript, ECMAScript 6 is in turn, enforced by the browsers. Also, HTML specifications are set by an organizing body and then put on by other browser vendors. Different browsers use these specifications in wide-ranging ways, support is thus extended to varied features. Browse over lessons on ECMAScript 6 here.

4. Directives to Components: Components are the thing in Angular 2.0, anticipating the role of web component specifications, these include HTML imports and Shadow DOM. Component is already a part of JavaScript libraries. Though both methods (directives vs components) may seem similar, they are distinctive concepts. While issues persist with regard to components as a standard, they are a force to reckon with as an architectural component. Read more about components in Angular 2.0 here.

5. Dependency Injection (DI): Among Angular’s best features over the years; dependencies can be injected across applications in various components. There is no need to check on the dependencies, be it their creation or requirements. A single API is provided for injecting dependencies, all injected to the component’s constructor. In AngularJS 2.0, three elements make up DI. i. Dependency, type of which an object must be created. ii. Provider, like a person giving directions, directs the injector on creating a dependency. A provider takes a token and maps it to a factory function that creates an object. iii. Injector exposes APIs and creates examples of dependencies. Know more about DI in AngularJS 2.0 here.

6. Routing: Many application building needs are achieved thanks to routing. Features like sibling views and nested states will stand with the core AngularJS router. Other inclusions that developers are expecting to see are extensive and pro-utility features like location service, hash change, push state child router, location server, etc. Know how to built an Angular 2 application with routing and services here.

Here is an infographic on the AngularJS market share.

angular 2 stats

7. Pro-Mobile: Version 2.0 will cater to building applications on mobile with features like UI elements design, bandwidth usage, touch support, performance tuning and other features. Developing mobile apps promises to be a simpler process, thanks to new features. The pro-angular folks are saying, “If building mobile apps will be easier, then desktop app building ought to be in AngularJS 2.0.”

8. Forms and logs: If you gotta build forms, Angular 2.0 makes it easy. You may create many ControlGroups in a form, that each group is made up of one or more Controls. Each Control has a common way to define basic properties like assigned Validators or default values. A logging service, to track time spent on a particular application, helps you find performance hurdles in your code. Built-in modularity is another prime new feature.

9. Application Loading: AngularJS 2.0 will facilitate application loading in parts, an initial part will be loaded first. Post routing through another section, another part of the application will be loaded. Thus, one no longer has to place the entire app on the initial load.

10. Browser Catalysts: Fast working browsers are another developer need. The AngularJS 2.0 codebase would be short and concise and support latest browser features. It would thus simplify the AngularJS app development process. Strong internationalization support ensures that version 2.0 helps you gain users from all over the world.

11. No two-way binding: Its time to bid goodbye to two-way binding. Surprising, considering that the feature has been quite handy in previous Angular versions. Performance is a cause for the omission. Resolution during data binding affects performance, something a smooth working framework is better without. It is not yet clear what will replace two-way binding. Bid adieu to $scope too, eliminated due to the ECMAScript 6 inclusion.

At the time of writing, we are still awaiting the final version release of AngularJS 2.0. What changes would be part of 2.0, how it would affect app development and developer ease in working, remains to be seen.