An Intro to Angular 2

An Intro to Angular 2

• 1.
  AN INTRO TOANGULAR 2 Ron Heft - LV Salesforce Developer Group - May 5, 2016
• 2.
  ABOUT RON ➤ Co-founderand CTO of 
 The Social Station ➤ We are Angular-ified at
 The Social Station ➤ Get in touch with me at ronaldheft.com
• 3.
  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)
• 4.
  THE STATE OFANGULAR 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
• 5.
  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:
• 6.
  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>
• 7.
  HTTP MODULE // PeopleService.ts import{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.ts import {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
• 8.
  ROUTING ➤ What isit? ➤ 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 {}
• 9.
  ANIMATION (DRAFT) ➤ Angular1.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)" ] }
• 10.
  SPEED ➤ Why isspeed 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
• 11.
  CLI, SCAFFOLDING, ANDIDES ➤ 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_NAME cd PROJECT_NAME ng serve ng g component my-new-component ng g service my-new-service
• 12.
  MIGRATING TO ANGULAR2
• 13.
  NG-FORWARD ➤ Write Angular1.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
• 14.
  NG-UPGRADE ➤ Angular 1and 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
• 15.
  CONCLUSIONS
• 16.
  HOW DOES ANGULAR2 FIT INTO THE EQUATION? 1. What’s happening with Angular 1? 2. Existing Angular projects? 3. New projects? 4. Is Ron upgrading?
• 17.
  ADDITIONAL RESOURCES ➤ Angular2.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/