My first impressions and experiences with Angular 2 have been extremely positive. JavaScript has begun to dominate my development experience in web and hybrid mobile application development in the last few years. I have a background heavily based in languages like C++, C#, and Java, and I’ve always felt something is lacking from Angular v1. I can appreciate JavaScript’s loose duck-typed, functional, prototype-oriented approach, but somehow it has always felt a bit alien. I’ve gained back that sense of familiarity I’d missed since working with Angular 2 using TypeScript.
Here are a few reasons why I believe making the move to Angular 2 with TypeScript is better than Angular 1 with pure JavaScript.
TypeScript
TypeScript allows developers to use the latest features of JavaScript before browsers support them natively. TypeScript is transpiled to JavaScript, so you can choose to support whatever version of JavaScript your user-base will most widely support. The latest language features align JavaScript much closer to languages like C#, Java, and Swift, so this brings a sense of familiarity to those who may have come from that background.
TypeScript brings back the safety features that come with a compiler and development time checks. One of the major drawbacks of JavaScript is that bugs are generally discovered after you run it and something goes wrong. TypeScript aids in alleviating that experience by providing feedback concerning interface, class, and variable types, as well as an increased level of IntelliSense in the development environment, which I’ve found greatly helpful as I immerse myself in my first Angular 2 projects.
Angular 2 Concepts are Simplified
Angular 1 contained logical components instantiated by function definition that were often composed in ways that were not simple to remember, eg. factories vs. services vs. providers.
Consider a simple ‘factory’, a single instance service:
some.service.js
angular.factory(‘myService’, function() {
var getUser = function(id) { … }
return {
getUser: getUser
};
});
A simple controller:
some.controller.js
angular.controller(‘someController’, function($scope, myService) {
…
$scope.model.name = ‘John Doe’;
});
Bound to some mark-up by it’s name
userinfo.html
<div ng-controller=’someController’>
{{ $scope.model.name }}
<div>
Compared to an Angular 2 service and component definition:
user-search.service.ts
import { Injectable } from ‘@angular/core’;
@Injectable()
export class UserService {
public getUser(id: string): User {
…
}
}
user-search.component.ts
import { Component } from ‘@angular/core’;
@Component({
moduleId: module.Id,
templateUrl: ‘user-search.component.html’
})
export class UserSearchComponent {
private name: string;
constructor(private userService: UserService) {
this.userService.getUser(..);
}
}
user-search.component.html
<div>{{name}}</div>
The Angular 2 component has a more cohesive and logical structure, not to mention feel. The syntactic sugar with class meta-tags adds a simple and effective way to distinguish the type of component being created. Composing a system from these more simplistic components comes easily and feels more succinct.
Mobile Web Optimization
The Google team must have learned from some of the pain associated with Angular 1, and now understands that mobile-first is a must. Angular 2 has been carefully optimized to save CPU cycles and memory.
My first experiences with Angular 2 were in developing mobile web applications and it performs quickly with an almost native feel.
Web, Hybrid, and Native Mobile Support
Ionic 2 is built on Angular 2 for hybrid mobile development. NativeScript uses Angular 2, which generates native mobile application code for Android and iOS.
Language Familiarity for a Larger Audience
Angular 2 with TypeScript will make developers who have traditionally worked on C#, Java and Swift code quickly feel familiar.
Two Technological Giants
Google has worked closely with Microsoft while developing Angular 2 with TypeScript to ensure it is a great development experience.
Google’s team even used Microsoft’s VS Code development environment while developing the framework, which is somewhat astounding given past differences.
In summary, Angular 2 is a welcome upgrade for a more structured and familiar developer experience.
Share on
