The construction of the highway over Dnipro River in Zaporizhia
Angular 2 On Production (IT Talk in Dnipro)
-
Upload
oleksandr-tryshchenko -
Category
Technology
-
view
80 -
download
0
Transcript of Angular 2 On Production (IT Talk in Dnipro)
![Page 1: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/1.jpg)
![Page 2: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/2.jpg)
ONE YEAR OF ANGULAR 2 ON PRODUCTION
Oleksandr Tryshchenko
Senior Front-end Developer, Dataart
![Page 3: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/3.jpg)
29 April 2017
Agenda
• Why?
• How?
• Problems
• How to solve problems
• Examples
• Q&A
![Page 4: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/4.jpg)
![Page 5: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/5.jpg)
What we expected from 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
![Page 6: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/6.jpg)
What we wanted from technology
• High performance.
• Compatibility with old browsers.
• Long product lifecycle.
29 April 2017 6
![Page 7: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/7.jpg)
29 April 2017
Web Components
• Shadow DOM
• Templates
• Imports
• Custom Elements
![Page 8: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/8.jpg)
29 April 2017
Web Components
• Shadow DOM
• Templates
• Imports
• Custom Elements
![Page 9: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/9.jpg)
29 April 2017
Shadow DOM
![Page 10: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/10.jpg)
Shadow DOM
29 April 2017 10
![Page 11: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/11.jpg)
Shadow DOM
29 April 2017 11
![Page 12: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/12.jpg)
Shadow DOM – Emulated
29 April 2017 12
![Page 13: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/13.jpg)
Shadow DOM – Emulated
29 April 2017 13
![Page 14: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/14.jpg)
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
![Page 15: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/15.jpg)
Shadow DOM – Pseudoselectors
:host
/deep/
29 April 2017 15
![Page 16: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/16.jpg)
viewEncapsulation
• None – don’t use Shadow DOM.
• Emulated – emulate Shadow DOM behavior (Default).
• Native – turn on the native implementation.
29 April 2017 16
![Page 17: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/17.jpg)
Component Declaration
29 April 2017 17
![Page 18: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/18.jpg)
![Page 19: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/19.jpg)
29 April 2017
Angular CLI
• Official tool.
• Standardization and totalitarism.
• Achieves time on routine.
• Configures Webpack instead of you .
• Expect unit tests from developer.
![Page 20: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/20.jpg)
29 April 2017
Angular CLI – possibilities
It can:
• Scaffold an empty project
• Generate components, services, pipess
• Generate infrastructure: tests, builds
• Syntax code analysis
• Development environment
• Code formatting
![Page 21: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/21.jpg)
Angular CLI ?
29 April 2017 21
![Page 22: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/22.jpg)
29 April 2017
Angular CLI - Webpack
![Page 23: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/23.jpg)
29 April 2017
Anders Hejlsberg
Was working on:
• Turbo Pascal
• Delphi
• C#
• TypeScript
![Page 24: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/24.jpg)
29 April 2017
TypeScript
• Very flexible transpiler
• Types control
• Interfaces
• Mixins
• Namespaces
![Page 25: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/25.jpg)
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
![Page 26: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/26.jpg)
private models = new Observable<Correlation[]>();
29 April 2017 F O O T E R H E R E 26
![Page 27: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/27.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() { }
}
![Page 28: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/28.jpg)
Decorators
29 April 2017 28
![Page 29: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/29.jpg)
Decorators
29 April 2017 29
![Page 30: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/30.jpg)
Decorators
29 April 2017 H 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
![Page 31: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/31.jpg)
TS typing
xxxx.d.ts
declare namespace d3 {
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
![Page 32: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/32.jpg)
29 April 2017
Binding
One-direction «inside»:
• {{expression}}
• [target] = "expression"
• bind-target = "expression"
![Page 33: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/33.jpg)
29 April 2017
Binding
One-direction «внаружу»:
• (target) = "statement"
• on-target = "statement"
![Page 34: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/34.jpg)
29 April 2017
Binding
Two-way
• [(target)] = "expression"
• bindon-target = "expression"
![Page 35: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/35.jpg)
Key Value Differs
29 April 2017 35
![Page 36: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/36.jpg)
29 April 2017
ReactiveX (Rx.js)
• Another way to organize async actions
• Cause the new way of component
composition
![Page 37: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/37.jpg)
Using flatMap and switchMap
29 April 2017 37
![Page 38: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/38.jpg)
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
![Page 39: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/39.jpg)
Composition of components
29 April 2017 39
![Page 40: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/40.jpg)
Rx.js
29 April 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 = W W R 9 N X V X 1 E C 40
ROB WORMALD
(@ROBWORMALD):
ANGULAR & RXJS AT
NG-EUROPE 2016
![Page 41: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/41.jpg)
Zone.js
• Cool errors trace.
• Dirty-checking.
• You can stop all the async actions after component
destruction
29 April 2017 41
![Page 42: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/42.jpg)
Web Animations API
29 April 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
![Page 43: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/43.jpg)
Angular 2 Forms
29 April 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
![Page 44: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/44.jpg)
Compatibility
• App particulary compiles into ES5.
• CLI generates polyfills.brower.ts.
• Won’t work on Safari and IE .
• We need to include intl polyfill.
29 April 2017 44
![Page 45: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/45.jpg)
Debugging of Angular 2 applications
29 April 2017 45
![Page 46: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/46.jpg)
@angular/core/testing
- Jasmine
- Karma
- Protractor (e2e)
29 April 2017 46
![Page 47: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/47.jpg)
29 April 2017
Augury
• Official tool from A2 team.
• Don’t need any efforts from developer.
• Works well with an built app.
![Page 48: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/48.jpg)
29 April 2017 48
![Page 49: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/49.jpg)
29 April 2017
Visual Studio Code
• Syntax analysis and smart suggestions
based on types and interfaces
• Built-in transpiler
![Page 50: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/50.jpg)
Personal
• Components. Only one type of components.
• Directives. Only one type of directives.
• Services. Only one type of services.
29 April 2017 50
![Page 51: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/51.jpg)
Thanks!
29 April 2017 51
![Page 52: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/52.jpg)
What’s after?
29 April 2017 52
![Page 53: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/53.jpg)
29 April 2017
Angular 2 Universal
• Official tool.
• Renders static pages on server side.
• Pre-render and re-render.
• Cool API reference.
![Page 54: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/54.jpg)
29 April 2017
NativeScript
![Page 55: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/55.jpg)
29 April 2017
angular
![Page 56: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/56.jpg)
29 April 2017
angular-react
![Page 57: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/57.jpg)
29 April 2017
angular-react-native
![Page 58: Angular 2 On Production (IT Talk in Dnipro)](https://reader036.fdocuments.us/reader036/viewer/2022070605/5a64b1f57f8b9ac21c8b4775/html5/thumbnails/58.jpg)
29 April 2017
angular-react-native-renderer