AN INTRO TO ANGULAR 2Ron Heft - LV Salesforce Developer Group - May 5, 2016

ABOUT RON

➤ Co-founder and CTO of The Social Station

➤ We are Angular-ified atThe Social Station

➤ Get in touch with me at ronaldheft.com

WHAT IS ANGULAR

➤ Open-source web application framework

➤ Released in 2010, adopted by Google

➤ Goal is to be a swiss-army knife of web applications

➤ Templating, routing, animations, data loading, etc

➤ Extensible, currently 1800+ published modules (more on GitHub)

➤ Competitors

➤ React.js (Facebook), backbone.js (NYT), Ember.js (Apple),Knockout.js (Microsoft)

THE STATE OF ANGULAR 2

➤ Development status

➤ Rewritten from scratch, exited beta this week! (rc1)

➤ Target release date is this year, but considered “production ready” now

➤ Goals vs. Angular 1

➤ Easier to learn

➤ Faster

➤ Opinionated

➤ Official Style Guide

➤ More first-party options, clearer options

TYPESCRIPT AND SYNTAX

angular.module(‘example’) .controller(‘ExampleCtrl’, function($scope) { $scope.name = “John Smith”;});

@Component({ selector: ‘example' template: '{{name}}'})

export class Example { constructor() { this.name = “John Smith”; }}

<div ng-controller="ExampleController"> {{name}}</div>

<example></example>

Angular 1.x / JavaScript: Angular 2.x / TypeScript:

COMPONENTS VS. DIRECTIVES

// Angular 1.x Controllers<div ng-controller="ExampleController">{{name}}</div>

// Angular 1.x Directives<example></example><div example="value"></div><div class="example"></div>

// Angular 1.x Confusion<example class="special" property="value" action="methodCall()"></example>

// Angular 2 Clarity<example class="special" [property]="value" (click)="methodCall()"></example>

HTTP MODULE// PeopleService.tsimport {Injectable} from 'angular2/angular2';import {Http} from 'angular2/http';

@Injectable()export class PeopleService { constructor(http:Http) { this.people = http.get('api/people.json') .map(response => response.json()); }}

// index.html<my-app>Loading...</my-app>

// App.tsimport {PeopleService} from './peopleService'@Component({ selector: 'my-app', template: `<div *ng-for="#person of people">{{person.name}}</div>`})export class App { constructor(peopleService:PeopleService) { peopleService.people .subscribe( people => this.people = people, error => console.error('Error: ' + err), () => console.log('Completed!') ); }}

➤ Opinionated

➤ Observables

➤ Retry

➤ Interval

➤ Subscribe/Unsubscribe

ROUTING

➤ What is it?

➤ Weak router in Angular 1.x - most developers used ui.router

➤ Lacked complex nested states

➤ Goal: Meld components & address hierarchy

@Component({ selector: 'my-app', template: ` <a href="#" [routerLink]="['Home']">Home</a> <a href="#" [routerLink]="['About']">About</a> <router-outlet>Loading...</router-outlet> `})@RouteConfig([ { path: '/', name: 'Home', component: Home, useAsDefault: true }, { path: '/about', name: 'About', component: About }])export class App {}

@Component({ selector: 'home', template: ` Home! `})export class Home {}

@Component({ selector: 'about', template: ` About! <router-outlet>Loading...</router-outlet> `})@RouteConfig([ { path: '/detail', name: 'About Detail', component: AboutDetail, useAsDefault: true }])export class About {}

ANIMATION (DRAFT)

➤ Angular 1.x added CSS classes to elements dynamically at key lifecycle states (enter, exit)

➤ CSS selectors could be written to trigger animations

➤ Goal: Organize and improve speed

@Animations("animations.json")

// animations.json{ "my-component.ng-enter" : [ ".fade(5s 1s)", ".slide(1s)", ".rotate(10s)", ".explode(1000ms)" ]}

SPEED

➤ Why is speed important?

➤ Slowdown points in 1.x

➤ $digest, DOM, etc.

➤ How is Angular 2 lightening quick?

➤ One-way binding

➤ Lazy module loading

➤ Server-side rendering (Angular Universal)

➤ Native mobile: Ionic

➤ Web workers

CLI, SCAFFOLDING, AND IDES

➤ Official CLI

➤ Combines many tools into one (Grunt/Gulp, Yeoman, etc.)

➤ Handles complexity of build TypeScript, SASS/LESS, etc.

➤ Official IDE support

➤ JetBrains Webstorm

npm install -g angular-cli

ng new PROJECT_NAMEcd PROJECT_NAMEng serve

ng g component my-new-componentng g service my-new-service

MIGRATING TO ANGULAR 2

NG-FORWARD

➤ Write Angular 1.x applications with Angular 2 syntax

➤ “Flip a switch” to Angular 2 when ready

➤ Advantages

➤ Can slowly update application

➤ No major overhead

➤ Disadvantages

➤ Not all Angular 2 features and syntax supported

➤ Not really Angular 2

➤ Light switch installed in the dark

NG-UPGRADE

➤ Angular 1 and 2.x live side by side

➤ “Upgrade” Angular 1.x services to Angular 2

➤ “Downgrade” Angular 2 services to Angular 1.x

➤ Advantages

➤ Upgrade your application service by service, module by module

➤ Take advantage of Angular 2 features immediately

➤ Leverage open-source Angular 1.x modules

➤ Disadvantages

➤ Two versions of Angular

➤ Not all Angular 2 features supported when downgrading

CONCLUSIONS

HOW DOES ANGULAR 2 FIT INTO THE EQUATION?

1. What’s happening with Angular 1?

2. Existing Angular projects?

3. New projects?

4. Is Ron upgrading?

ADDITIONAL RESOURCES

➤ Angular 2.x Documentation:https://angular.io/docs/ts/latest/

➤ Official Style Guide:https://github.com/johnpapa/angular-styleguide/blob/master/a2/README.md

➤ Typescript Quickstart:https://www.typescriptlang.org/docs/tutorial.html

➤ ng-lightning:http://ng-lightning.github.io/ng-lightning/