Angular 2 очень сильно изменился по сравнению с первой версией. В этом докладе Александр расскажет об общей архитектуре нового фреймворка, о dependency injection, о взаимодействии компонентов, маршрутизации, о компиляторе, а также о подходах к развёртыванию приложений.
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. 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. 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. This is NOT about:
• Copying api-documentation
• Comparison with other libraries / frameworks (save for ng1 ;) )
5
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
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. 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
17. Consider a task
• Given input textbox and api (GET /items?<term>)
• Call it upon user’s input
• Display results
17
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
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
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