Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 2 - SSD 2016 London

402 views

Published on

Angular 2 - SSD 2016 London

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Angular 2 - SSD 2016 London

  1. 1. 1 What does Angular 2.0 hold in store? Manfred Steyer ManfredSteyer About me … Manfred Steyer Trainer & Consultant Angular & .NET Page  2
  2. 2. 2 Contents Overview about Angular 2 Sample with Visual Studio Code (Live-Coding) Folie 3 MOTIVATION Page  4
  3. 3. 3 Platforms and Usability HTML + JavaScript Single Page Application High-Level Architecture Page  6 Services HTML/ JavaScript-Client HTTP Single Page Application (SPA)
  4. 4. 4 Page  7 HTML + JavaScript => Complexity Page  8 HTML + JavaScript + jQuery => Complexity
  5. 5. 5 Page  9 Several SPA-Frameworks AngularJS 1.x Page  10 Community Dispersion Eco- System
  6. 6. 6 Angular 1 1.1 Million Developers angular-connect, Autumn 2015, London Folie 12
  7. 7. 7 angular-connect, Autumn 2015, London Folie 13 ANGULAR 2 Page  14
  8. 8. 8 Focus Folie 15 Performance Mobile Components Modern Web State RC since May 2016 Folie 16
  9. 9. 9 TypeScriptES 6 Languages Page  17 ES 5 Folie 18 Performance
  10. 10. 10 Angular Universal Web Workers HTML Template JavaScript Template Compiler Performance 1 4 3 2 Via routes! Lazy Loading
  11. 11. 11 ECO-SYSTEM Page  21 Installed Mobile
  12. 12. 12 Chrome Node Electron Installed Desktop Angular CLI Folie 24
  13. 13. 13 Augury Folie 25 Mobile Toolkit Folie 26
  14. 14. 14 Component Toolkits Folie 27 SELECTED PROJECTS Page  28
  15. 15. 15 70 developers 300K LOC 500 components 100s developers Millions of LOC
  16. 16. 16 COMPONENTS WITH ANGULAR 2 Page  31 Component Controller Page  32 @Component({ selector: 'flight-list', templateUrl: 'flight-list.html' }) export class FlightListComponent { from: string; to: string; flights: Array<Flight>; constructor(flightService: FlightService) { } search() { [...] } select(flight: Flight) { [...] } }
  17. 17. 17 Template Page  33 <input [(ngModel)]="from"> <input [(ngModel)]="to"> <button [disabled]="!from || !to" (click)="search()"> Search </button> <table> <tr *ngFor="let flight of flights"> <td>{{flight.id}}</td> <td>{{flight.datum}}</td> <td>{{flight.von}}</td> <td>{{flight.zu}}</td> </tr> </table> DEMO Page  35
  18. 18. 18 DEMO Page  38 Summary Folie 40 Components ES6 & TypeScript Performance Ecosystem Browser Installed Mobile Installed Desktop
  19. 19. 19 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Contact Credits Brad Green, Jules Kremer: Keynote, ngconf 2016, https://docs.google.com/presentation/d/1GII- DABSG5D7Yhik4Be5RvL6IXPt- Kg8lXFLnxkhKsU/edit?pref=2&pli=1 Brad Green, Igor Minar, Jules Kremer: Keynote, AngularConnect 2015: https://docs.google.com/presentation/d/1r1ffV- shRXHXct9DbJRVesNs6oLLk8PFGQvlE1zLpRE/edi t?pref=2&pli=1#slide=id.ge4d624f6e_1_0 Folie 42

×