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 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 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.
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.
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.
Angular 2 with TypeScript will make developers who have traditionally worked on C#, Java and Swift code quickly feel familiar.
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.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.