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.

AzovDevMeetup 2016 | Angular 2: обзор | Александр Шевнин

453 views

Published on

Angular 2 очень сильно изменился по сравнению с первой версией. В этом докладе Александр расскажет об общей архитектуре нового фреймворка, о dependency injection, о взаимодействии компонентов, маршрутизации, о компиляторе, а также о подходах к развёртыванию приложений.

Published in: Software
  • Be the first to comment

  • Be the first to like this

AzovDevMeetup 2016 | Angular 2: обзор | Александр Шевнин

  1. 1. Angular 2 Overview Alexander Shevnin, JSC “Arcadia Inc.”
  2. 2. About myself 2 Alexander Shevnin JSC “Arcadia Inc.” alexander.shevnin@arcadia.spb.ru In Arcadia from 2012, last 3 years work mostly with ASP.NET, C#, AngularJS and TypeScript
  3. 3. Intro  • New major version of Angular framework from Google • Single Page Applications • Built from scratch • Written on Typescript • Can run in web worker or server-side • Npm packages: @angular/* 3
  4. 4. Topics for today: • Core concepts • A bit about Reactive programming • What do I need to use it today (dependencies, browser compatibility and so on)? • JIT vs AOT (brief look at compilation) 4
  5. 5. This is NOT about: • Copying api-documentation • Comparison with other libraries / frameworks (save for ng1 ;) ) 5
  6. 6. Coming from ng1 • Forget everything that you think you know • No more controllers, services, factories, providers • No digest loop (no $scope.$apply() at least) • No $scope at all ;) • Still having directives though. Much easier to deal with. 6
  7. 7. Hello world 7 • https://embed.plnkr.co/?show=preview&show=app%2Fapp.component.ts • https://angular.io/docs/ts/latest/quickstart.html
  8. 8. Same functionality in ES5  8
  9. 9. Data Binding 9 https://plnkr.co/edit/RtrRej?p=preview http://blog.thoughtram.io/angular/2016/10/13/two-way-data- binding-in-angular-2.html
  10. 10. Data Binding 10
  11. 11. Dependency Injection 11
  12. 12. Component lifecycle 12
  13. 13. Components interaction • Shared service (hello ng1 ;) ) • @Input/@Output • ngOnChanges(changes: {[propKey: string]: SimpleChange}) • We can place a local variable on the tag representing the child component <button (click)="timer.start()">Start</button> <countdown-timer #timer> </countdown-timer> • Obtain a link to a child component using @ViewChild: 13 https://angular.io/docs/ts/latest/cookbook/component-communication.html
  14. 14. RxJS • Reactive Programming • Implements https://github.com/tc39/proposal-observable • The Observable type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. • Observables can be composed with higher-order combinators. • Observables do not start emitting data until an observer has subscribed. • ...is a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JavaScript • Observables + Operators + Schedulers • Can wrap promises, observables, events and provides exception handling and cancellation 14 https://www.youtube.com/watch?v=R4sTvHXkToQ you might have seen it already  https://www.youtube.com/watch?v=KOOT7BArVHQ RxJS In-Depth @ AngularConnect
  15. 15. You’ve seen it already 15
  16. 16. Simple example 16
  17. 17. Consider a task • Given input textbox and api (GET /items?<term>) • Call it upon user’s input • Display results 17
  18. 18. Sounds too easy? How about this? 1. Don’t hit the search endpoint on every key stroke 2. Don’t hit the search endpoint with the same query params for subsequent requests 3. Deal with out-of-order responses 4. Cancel requests when they are not needed 18
  19. 19. 19
  20. 20. Change Detection 20
  21. 21. Let’s take a look back 21 http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/
  22. 22. Zone.JS • Execution context • State changes • Events (click, change, submit…) • XMLHttpRequests • Timers (setTimeout, setInterval) • Monkey-patching on globalScope (Zone.setTimeout) • No $digest / $apply • https://www.youtube.com/watch?v=3IqtmUscE_U - good talk about Zones 22
  23. 23. Change detection • https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c#.yd0nbcphd 23
  24. 24. Change detection • https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c#.yd0nbcphd 24
  25. 25. NG2 Compiler • Generated ViewClasses (no need to parse views all the time) • Inline class properties (google for Hidden Classes) 25
  26. 26. Use immutable objects 26 • https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c#.yd0nbcphd
  27. 27. JIT Pipeline 1. Write some TypeScript 2. Compile it 3. Bundle 4. Minify 5. Deploy 1. Download application 2. Bootstrap application 3. Compile / generate each view 4. Render application 27
  28. 28. AOT Pipeline 1. Write some TypeScript 2. Compile templates -> generate TypeScript code 3. Compile TypeScript to JavaScript 4. Bundle 5. Minify 6. Deploy 1. Download application 2. Bootstrap application 3. Render application 28
  29. 29. Why even bother? • Faster page load • Bundle size • Strongly-typed ViewClasses • Can take the best of Google Closure Compiler • https://w3c.github.io/webappsec-csp/ Content Security Policy • Energy efficiency 29 JIT AOT
  30. 30. Routing 30 https://vsavkin.com/angular-2-router-d9e30599f9ea#.gyrajhshr
  31. 31. Dependencies • Core -> Zone.js, Reflect-Metadata, Observables, Promises • Promises -> native / shims (es6-shim) • Observables-> RxJS • Modules -> Module builder / loader (SystemJS, Browserify, Webpack 1/2) • AOT -> Typescript, ES2015 modules (no commonjs, no webpack 1.0) 31
  32. 32. References: • https://angular.io/ • https://github.com/mgechev/angular-seed - Modular starter project for Angular 2 with statically typed build and AoT compilation • https://vsavkin.com/ - site full of useful articles on the topic • https://leanpub.com/router – a book on Angular 2 router • http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in- angular2.html - more on observables example • http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline- precompilation/ ahead-of-time compilation 32
  33. 33. Q & A

×