Download to read offline
![private models = new Observable<Correlation[]>();
29 April 2017 F O O T E R H E R E 26](https://image.slidesharecdn.com/a2prodeng-170429113133/85/Angular-2-On-Production-IT-Talk-in-Dnipro-26-320.jpg)
![TS Decorators
(ESXXXX Decorators)
29 April 2017 27
import { Component, Input, Output, EventEmitter } from
'@angular/core';
@Component({
selector: 'conditional-formating',
templateUrl: './conditional-formating.component.html',
styleUrls: ['./conditional-formating.component.scss'],
providers: []
})
export class ConditionalFormatingComponent {
@Input() value: Number = 0;
@Input() label: String = ‘No Value';
constructor() { }
}](https://image.slidesharecdn.com/a2prodeng-170429113133/85/Angular-2-On-Production-IT-Talk-in-Dnipro-27-320.jpg)
![29 April 2017
Binding
One-direction «inside»:
• {{expression}}
• [target] = "expression"
• bind-target = "expression"](https://image.slidesharecdn.com/a2prodeng-170429113133/85/Angular-2-On-Production-IT-Talk-in-Dnipro-32-320.jpg)
![29 April 2017
Binding
Two-way
• [(target)] = "expression"
• bindon-target = "expression"](https://image.slidesharecdn.com/a2prodeng-170429113133/85/Angular-2-On-Production-IT-Talk-in-Dnipro-34-320.jpg)
![private models = new Observable<Correlation[]>();
29 April 2017 F O O T E R H E R E 26](https://image.slidesharecdn.com/a2prodeng-170429113133/75/Angular-2-On-Production-IT-Talk-in-Dnipro-26-2048.jpg)
![TS Decorators
(ESXXXX Decorators)
29 April 2017 27
import { Component, Input, Output, EventEmitter } from
'@angular/core';
@Component({
selector: 'conditional-formating',
templateUrl: './conditional-formating.component.html',
styleUrls: ['./conditional-formating.component.scss'],
providers: []
})
export class ConditionalFormatingComponent {
@Input() value: Number = 0;
@Input() label: String = ‘No Value';
constructor() { }
}](https://image.slidesharecdn.com/a2prodeng-170429113133/75/Angular-2-On-Production-IT-Talk-in-Dnipro-27-2048.jpg)
![29 April 2017
Binding
One-direction «inside»:
• {{expression}}
• [target] = "expression"
• bind-target = "expression"](https://image.slidesharecdn.com/a2prodeng-170429113133/75/Angular-2-On-Production-IT-Talk-in-Dnipro-32-2048.jpg)
![29 April 2017
Binding
Two-way
• [(target)] = "expression"
• bindon-target = "expression"](https://image.slidesharecdn.com/a2prodeng-170429113133/75/Angular-2-On-Production-IT-Talk-in-Dnipro-34-2048.jpg)
Uploaded byOleksandr Tryshchenko
Angular 2 On Production (IT Talk in Dnipro)
This document discusses the author's experience using Angular 2 in production for one year. It covers what they expected from the framework, including high performance, compatibility with old browsers, and a long product lifecycle. It also discusses key Angular 2 concepts like Web Components, TypeScript, bindings, reactive programming with RxJS, debugging tools, and forms. The author concludes by discussing future directions like Angular Universal for server-side rendering and using Angular with other technologies like NativeScript.
More Related Content
Similar to Angular 2 On Production (IT Talk in Dnipro)
Angular 2 On Production (IT Talk in Dnipro)
- 2. ONE YEAR OFANGULAR 2 ON PRODUCTION Oleksandr Tryshchenko Senior Front-end Developer, Dataart
- 3. 29 April 2017 Agenda •Why? • How? • Problems • How to solve problems • Examples • Q&A
- 5. What we expectedfrom technology • It doesn’t force you to write infrastructure code • Stable framework with active community • Simple team complectation • Consistent ecosystem and similar architecture for all projects • High level of abstraction and real boost for developent • Low coupling • Testability. 29 April 2017 5
- 6. What we wantedfrom technology • High performance. • Compatibility with old browsers. • Long product lifecycle. 29 April 2017 6
- 7. 29 April 2017 WebComponents • Shadow DOM • Templates • Imports • Custom Elements
- 8. 29 April 2017 WebComponents • Shadow DOM • Templates • Imports • Custom Elements
- 9.
- 10. Shadow DOM 29 April2017 10
- 11. Shadow DOM 29 April2017 11
- 12. Shadow DOM –Emulated 29 April 2017 12
- 13. Shadow DOM –Emulated 29 April 2017 13
- 14. Shadow DOM –Emulated barny-bear - - barny-bear.component.ts - - barny-bear.component.spec.ts - - barny-bear.component.scss - - barny-bear.component.html - - barny-bear.module.ts 29 April 2017 14
- 15. Shadow DOM –Pseudoselectors :host /deep/ 29 April 2017 15
- 16. viewEncapsulation • None –don’t use Shadow DOM. • Emulated – emulate Shadow DOM behavior (Default). • Native – turn on the native implementation. 29 April 2017 16
- 17.
- 19. 29 April 2017 AngularCLI • Official tool. • Standardization and totalitarism. • Achieves time on routine. • Configures Webpack instead of you . • Expect unit tests from developer.
- 20. 29 April 2017 AngularCLI – possibilities It can: • Scaffold an empty project • Generate components, services, pipess • Generate infrastructure: tests, builds • Syntax code analysis • Development environment • Code formatting
- 21. Angular CLI ? 29April 2017 21
- 22. 29 April 2017 AngularCLI - Webpack
- 23. 29 April 2017 AndersHejlsberg Was working on: • Turbo Pascal • Delphi • C# • TypeScript
- 24. 29 April 2017 TypeScript •Very flexible transpiler • Types control • Interfaces • Mixins • Namespaces
- 25. TS Type handling •Interfaces • Check function types and arguments • Check types of object properties • Check function return values • Possibility to declare your own types • Enum 29 April 2017 25
- 26. private models =new Observable<Correlation[]>(); 29 April 2017 F O O T E R H E R E 26
- 27. TS Decorators (ESXXXX Decorators) 29April 2017 27 import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'conditional-formating', templateUrl: './conditional-formating.component.html', styleUrls: ['./conditional-formating.component.scss'], providers: [] }) export class ConditionalFormatingComponent { @Input() value: Number = 0; @Input() label: String = ‘No Value'; constructor() { } }
- 28.
- 29.
- 30. Decorators 29 April 2017H T T P S : / / G I T H U B . C O M / W Y C A T S / J A V A S C R I P T - D E C O R A T O R S 30
- 31. TS typing xxxx.d.ts declare namespaced3 { type TooltipDirection = ("n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se"); interface Tooltip { hide(): Tooltip; show(target: SVGElement): Tooltip; attr(name: string, value: Primitive): Tooltip; style(name: string, value: Primitive, priority?: string): Tooltip; destroy(): Tooltip; } export function tip(): Tooltip; } 29 April 2017 31
- 32. 29 April 2017 Binding One-direction«inside»: • {{expression}} • [target] = "expression" • bind-target = "expression"
- 33. 29 April 2017 Binding One-direction«внаружу»: • (target) = "statement" • on-target = "statement"
- 34. 29 April 2017 Binding Two-way •[(target)] = "expression" • bindon-target = "expression"
- 35. Key Value Differs 29April 2017 35
- 36. 29 April 2017 ReactiveX(Rx.js) • Another way to organize async actions • Cause the new way of component composition
- 37. Using flatMap andswitchMap 29 April 2017 37
- 38. Rx.js + A2 PROS -Allows us to remove http logic from components - Can be used with an async pipe CONS - Require composition changes - Implements toPromise() method 29 April 2017 38
- 39. Composition of components 29April 2017 39
- 40. Rx.js 29 April 2017H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = W W R 9 N X V X 1 E C 40 ROB WORMALD (@ROBWORMALD): ANGULAR & RXJS AT NG-EUROPE 2016
- 41. Zone.js • Cool errorstrace. • Dirty-checking. • You can stop all the async actions after component destruction 29 April 2017 41
- 42. Web Animations API 29April 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = 4 V D M I V R M L 3 4 42 ANGULAR 2 0 ANIMATIONS MATIAS NIEMELA ANGULARCONNECT
- 43. Angular 2 Forms 29April 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = X Y V 9 L S R V 0 S 4 43 ANGULAR 2 FORMS KARA ERICKSON
- 44. Compatibility • App particularycompiles into ES5. • CLI generates polyfills.brower.ts. • Won’t work on Safari and IE . • We need to include intl polyfill. 29 April 2017 44
- 45. Debugging of Angular2 applications 29 April 2017 45
- 46. @angular/core/testing - Jasmine - Karma -Protractor (e2e) 29 April 2017 46
- 47. 29 April 2017 Augury •Official tool from A2 team. • Don’t need any efforts from developer. • Works well with an built app.
- 48.
- 49. 29 April 2017 VisualStudio Code • Syntax analysis and smart suggestions based on types and interfaces • Built-in transpiler
- 50. Personal • Components. Onlyone type of components. • Directives. Only one type of directives. • Services. Only one type of services. 29 April 2017 50
- 51.
- 52. What’s after? 29 April2017 52
- 53. 29 April 2017 Angular2 Universal • Official tool. • Renders static pages on server side. • Pre-render and re-render. • Cool API reference.
- 54.
- 55.
- 56.
- 57.
- 58.