Introduction to Angular 2 Shuhei Kagawa Dec 14, 2015 #tkjs

Who are you? • Shuhei Kagawa • Front/Back-end developer @ M3, Inc. • Rails/Angular.js/Node.js • Building SPA >10000 lines of JavaScript

No content

No content

Choosing JS framework is hard

What I wanted 1.5 years • Data-binding (less boilerplate) • Amount of learning resources (for team development) • (Seemingly) Long-time support • Rich standard libraries (security, validation and etc.)

https://www.google.com/trends/

http://www.bennadel.com/blog/2439-my-experience-with-angularjs---the-super-heroic-javascript-mvw-framework.htm

Piled up APIs since 2009 https://en.wikipedia.org/wiki/File:Quebrada_de_Cafayate,_Salta_(Argentina).jpg

Angular: The Good Parts • Directive > Controller • Don't rely on scope inheritance • Directive API (controllerAs, bindToController)

No content

Angular 2 • Thrown away outdated/unintuitive APIs • Completely rewritten with

What is Angular 2 like? • It's coming up soon(?) • Better syntax • Best-in-class performance • Cutting-edge architecture

alpha.53 Weekly Breaking Changes

beta is coming soon... Less Breaking Changes

No content

Adoption at Google 100s developers
 Millions LOC

Better syntax • TypeScript is the first language (no more JS quirks) • Consistent template syntax • Scoped CSS • ES6 Modules (no more own module system)

Languages ES5 ES6 TypeScript Dart

ES6 Modules Class Decorator Class property import { Component, Injectable } from 'angular2/core'; @Injectable() class Hero { id: number; name: string; } @Component({ selector: 'my-app', templateUrl: './my-app.html', styleUrls: ['./my-app.css'] }) export class AppComponent { public title = 'Tour of Heroes'; public heroes = HEROES; public selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } getSelectedClass(hero: Hero) { return { selected: hero === this.selectedHero }; } } var HEROES: Hero[] = [ { "id": 11, "name": "Mr. Nice" }, // ... ];

{{title}}

My Heroes

• {{hero.id}} {{hero.name}}

Text binding Loop Event handler (Seemingly)
 Two-way
 data binding

Template syntax • foo="bar" • [foo]="bar" • (foo)="bar()" Plain (passed as a string) Data binding (evaluated as expression) Event handler • ng-include="'hello.tpl'" • ng-href="https://google.com?q={{keyword}}"

Best-in-class performance • Ultra-fast change detection • View caching • One-time and offline compilation • (Change detection in Web Worker) • (Server-side rendering (Angular Universal))

https://www.youtube.com/watch?v=UxjgUjVpe24 http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

https://www.youtube.com/watch?v=UxjgUjVpe24 http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

Cutting-edge Architecture • Component-based • Uni-directional data flow • Rx.js built-in • Compatible with Immutable.js

import { Component } from 'angular2/core'; import { Control } from 'angular2/common'; import { Jsonp, JSONP_PROVIDERS } from 'angular2/http'; import { bootstrap } from 'angular2/platform/browser'; import { GitHubService } from './github-service'; @Component({ selector: 'my-app', templateUrl: 'app/my-app.html', styleUrls: ['app/my-app.css'] }) export class MyApp { searchText = new Control(); repos: any; constructor(private github: GitHubService) { this.repos = this.searchText.valueChanges .debounceTime(300) .flatMap(text => this.github.search(text)); ; } } bootstrap(MyApp, [JSONP_PROVIDERS, GitHubService]);

GitHub repositoy search

• {{repo.full_name}} {{repo.stargazers_count}} stars

import { Injectable } from 'angular2/core'; @Injectable() export class GitHubService { constructor(private jsonp: Jsonp) {} search(keyword) { return this.jsonp.get(`https://api.github.com/ search/repositories?callback=JSONP_CALLBACK&q=$ {keyword}&sort=stars`) .map(res => res.json()['data']['items']); } }

Upgrade from 1.x • Componentize everything • ngUpgrade • Mix ng1 components and ng2 components • ngForward • Write ng1 app with ng2 syntax

Libraries • ng1 libraries doesn't work on ng2 • But people started re-building popular ones with ng2 • ionic2, angular2_material, ng2-bootstrap, ng2- select and etc.

Browser support

No content

More resources • angular.io • github.com/AngularClass/awesome-angular2 • egghead.io Angular 2 Lessons • gitter.im/angular/angular

Thanks! • shuhei@gihtub&npm • shuheikagawa@twitter