What’s new in Angular 2? A report from AngularConnect 2015

Last 20th and 21st of October I had the opportunity to attend AngularConnect, the Official European Angular Conference, which took place in the ExCel London. Two days of talks from the world’s leading Angular experts in the largest Angular conference ever.

More than 1,000 developers from all around Europe gathered in a great venue, learning and sharing their knowledge about the Javascript framework that has gained lots of attention in the last couple of years. As Brad Green remarked in the keynote, there are around 1 million Angular developers around the world.

As a Java developer, I don’t usually have a lot of direct contact with front-end technologies, as most of the time I’m working on the back-end. But as the line between the front and back end gets increasingly blurry, I think it’s important to keep up to date on what’s going on in the front-end world.

The talks on the conference were divided into two main areas (with some exceptions): talks about Angular 1.x, which was released back in 2007; and those talks about Angular 2.x, currently in Alpha stage.

New features in Angular 2

So the new version of Angular is about to be released. It will bring a completely different framework with new features and redesign for some elements. I’ve chosen a couple of the new things we can see in Angular 2 to give you a little introduction.

TypeScript

TypeScript (previously known as AtScript) is the language used to build Angular 2. TypeScript is a superset of ES6 (ECMAScript 6), which means that we can use TypeScript without writing a single line of TypeScript.

So then, what is the advantage of using TypeScript? TypeScript provides static typing, classes and interfaces, so when we are using our favourite IDE, it will be able to make better auto-complete suggestions and spot errors quicker.

The downside of using TypeScript is that modern browsers aren’t capable of executing its code (they mostly support ES5) so we need to compile (transpile) our TypeScript into Javascript ES5. Fortunately, there are a bunch of tools that will do that for us.

In addition to Javascript (ES5 and ES6) and TypeScript, we can also write our Angular 2 application using Dart (I wrote a post on Dart a while ago), so we have a good range of flavours to pick from.

Syntax

With Angular 2 our code will look quite different from the Angular 1 version. The use of annotations will ease the creation of objects providing some useful metadata to the DI library.

On the templates, we’ll have different syntax for the different types of bindings:

• Property binding: uses square brackets [model]=”myModel”
• Event binding: brackets for events (complete)=”onComplete()”
• Two-way binding: use square and regular brackets [(ng-model)]=”todo.text”

There is a lot of other things that have changed about the syntax in Angular 2 so, if you are already familiar with Angular 1, I recommend you to take a look at the official documentation.

Multi-platform solutions

The new Angular 2 is very focused on getting our Angular apps running across the full spectrum of devices, from the web to the all the different mobile platforms. For this, there are several libraries that allow us to have our same codebase running in different platforms.

Cordova Vs NativeScript

Two of these libraries are Cordova and NativeScript. They can look very similar, as both allow us to “write once and run everywhere”, but under the hood they have different approaches.

In the case of Cordova, we write our application using Javascript, HTML and CSS, the same way we would do for a traditional web application. When we want to run our app in a mobile device (Android iOS, Windows) Cordova will use a native web view that will make use of all the device’s screen to show us our app. It will also use a bunch of different native plugins to access resources like the camera or the bluetooth. These plugins will act as a bridge between our app and the native APIs.

But NativeScript takes things one step further and allow us to run our Javascript app natively in the device. Our app using NativeScript can even access platform-specific features such as the file system:

for Java

new java.io.File( path );

and, for iOS

fileManager.createFileAtPathContentsAttributes( path );

But, most importantly, it comes with a lot of modules we can use without worrying about the platform on which the app is running. So instead of using the previous code, depending on which platform we are on, we can just type something like:

var fs = require( "file-system" );
var file = new fs.File( path );

and NativeScript will determine how to access the resource depending on the platform we are running on.

So, which one is better? In my opinion each of them have their advantages and disadvantages.

The good thing about Cordova is that if we already have a web app working then porting it to a mobile device is trivial, but its performance may not be the best as it’s running on top of a web view inside the mobile platform. On the other hand, NativeScript runs natively, so its performance should be better than Cordovas’ in most cases. But with NativeScript we need to make some changes in our web app in order to run it on a mobile platform.

Real-time apps

One of the most interesting talks I attended was about Meteor. We had the opportunity to listen to Uri Goldshtein, the creator of the angular-meteor package, talking about this amazing platform that allows us to develop real-time applications that run both in the back and the front-end.

Real-time application means that the changes made by the user in our model gets reflected in a transparent way for the user (no page reload) in our back-end data model. And vice versa: when our back-end data model changes, the user gets this change without reloading the page.

An example of this could be the “like” button in Facebook or Google+’s “+1”. When the user touches the thumb up icon on their phone what’s happening behind the scenes is that the change the user just made gets saved in a local database inside the phone. Then the app syncs with the back-end system. This sync can be delayed by multiple possible factors e.g. poor internet connection. Once the change has reached the back-end system, the users that are looking at the same content can get an update of the number of “likes”, again, without any page reload.

Building this kind of functionality by ourselves can be really hard and painful. (Think about all the possible scenarios when syncing.) Also, we can potentially end up with a lot of code duplication as we have to perform similar actions in both, back- and front-end.

Fortunately, Meteor takes care of all this for us. And the best part is, it’s Open Source. It uses things like Livequery and isomorphic Javascript to make our lives easier. It also an independent platform, so there’s no need to use it with Angular (but they work pretty well together).

Conclusion

I had quite a lot fun these last two days, getting to know some technologies that I don’t usually work with, but which I’m definitely interested in using in the future. It’s also been a good way to keep up with all the new stuff coming out, especially in the Javascript world.

If you are interested on all these things and want to know more, you can take a look at the Conference’s YouTube channel, where you can see all of the talks. Most of them are easy to follow for people with little or no experience with Angular.