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.
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 (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.
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.
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
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.
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.
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.