Сергей Больщиков "angular components: все уже за, а вы еще...
TRANSCRIPT
![Page 1: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/1.jpg)
Сергей БольщиковWix
Angular Components: все уже за, а вы еще нет?
![Page 3: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/3.jpg)
Quick exerciseCategory #1
Who is writing in Angular 1.x?
3
![Page 4: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/4.jpg)
Quick exerciseCategory #1
Who is writing in Angular 1.x?
Category #2
Who is writing in Angular 2?
4
![Page 5: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/5.jpg)
Quick exerciseCategory #1
Who is writing in Angular 1.x?
Category #2
Who is writing in Angular 2?
Who is writing in React?
Category #3
5
![Page 6: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/6.jpg)
You will learn todayCategory #1
Who is writing in Angular 1.x?
Category #2
Who is writing in Angular 2?
Who is writing in React?
Category #3
6
● Current problems● Components
architecture● Components are
essentials for Angular 2● Components
architecture● Missing components test
kit
● Current problems● Components
architecture● Cleaner code● Components in Angular
1.x ● Components test kit
● You know that components are great
● Learn to test components
● Missing components test kit
![Page 7: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/7.jpg)
Sergey BolshchikovDeveloper Advocate @ WixFather of YGFL ConferenceMaintainer of js-must-watch
7
github.com/bolshchikov
@bolshchikov
![Page 8: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/8.jpg)
A bit about myself
What are the problems?How can we solve them with components?
Can they make our code better?How Angular Components solve them?
You Are Here
Agenda8
![Page 9: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/9.jpg)
And it all starts from the...
9
![Page 10: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/10.jpg)
- Pearl Buck
“ “10
If you want to understand today,You have to search yesterday.
![Page 11: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/11.jpg)
It’s all history
Jan, 2016
Aug, 2013
May, 2013
Oct, 2011
Feb, 2011
Oct, 2010
Components Model
Web Component
s Presentatio
nAngularDirectives
React
AngularComponent
sEmber Component
s
11
![Page 12: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/12.jpg)
01 / Problems
12
![Page 13: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/13.jpg)
We almost don’t write code,
13
![Page 14: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/14.jpg)
We almost don’t write code,
We maintain it.
14
![Page 15: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/15.jpg)
Maintain the soup ofservices, controllers, templates, directives, factories… is freaking
hard
15
![Page 16: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/16.jpg)
Just for you to visualize what I am talking about
16
![Page 17: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/17.jpg)
17
ctrl1
s1
d1
с1 с2
ctrl2
s2 s3 s4
d2
![Page 18: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/18.jpg)
18
ctrl1
s1
d1
с1 с2 с3
ctrl2 ctrl3
s2 s3 s4 s5 s6
d2 d3
![Page 19: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/19.jpg)
19
ctrl1
s1
d1
с1 с2 с3 с4 с5
ctrl2 ctrl3 ctrl4 ctrl5
s2 s3 s4 s5 s6 s7 s8 s9 10 11
d2 d3 d4 d5 d6 d7
ctrl6
![Page 20: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/20.jpg)
20
ctrl1
s1
d1
с1 с2 с3 с4 с5
ctrl2 ctrl3 ctrl4 ctrl5
s2 s3 s4 s5 s6 s7 s8 s9 10 11
d2 d3 d4 d5 d6 d7
ctrl6
![Page 21: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/21.jpg)
This is not a fake, this is real app
21
![Page 22: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/22.jpg)
Ahh, and one more thing -
We need to test all of it.
22
![Page 23: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/23.jpg)
02 / Can we do better?
23
![Page 24: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/24.jpg)
Imageapp
My Images
24
![Page 25: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/25.jpg)
My Images
25
![Page 26: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/26.jpg)
My Images
app 26
![Page 27: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/27.jpg)
My Images
app
media item
27
![Page 28: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/28.jpg)
My Images
app
media item
preview
28
![Page 29: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/29.jpg)
The component treeapp
media item preview
29
1..n
![Page 30: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/30.jpg)
Clear APIapp
media item preview
30
1..n
item item
![Page 31: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/31.jpg)
Clear APIapp
media item preview
31
1..n
item item
on-remove()on-prev()on-next()
![Page 32: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/32.jpg)
Clear APIapp
media item preview
32
1..n
item item
on-remove()on-prev()on-next()
Smart component
Dumb component Dumb component
![Page 33: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/33.jpg)
It scales33
![Page 34: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/34.jpg)
03 / Angular Components
34
![Page 35: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/35.jpg)
@Component({
selector: 'hero-list',
templateUrl: 'app/hero-list.component.html',
directives: [HeroDetailComponent],
providers: [HeroService]
})
Cornerstone @ ng2 35
![Page 36: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/36.jpg)
Components are introduced in Angular
1.5 or with polyfill even before
36
![Page 37: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/37.jpg)
angular
.module('totallyDifferentAngularAppInterna
l')
.directive('test', () => ({
template: '<div></div>',
controller: Test,
controllerAs: 'test',
scope: {
name: '='
},
bindToController: true,
restrict: 'E'
}));
Directive vs. Component 37
angular
.module('totallyDifferentAngularAppInterna
l')
.component('test', {
template: `<div></div>`,
controller: Test,
bindings: {
name: '='
}
});
![Page 38: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/38.jpg)
class Test {
$onInit() { // initialization code for constructor }
$onDestroy() {}
$postLink() {}
}
angular
.module('totallyDifferentAngularAppInternal')
.component('test', {
template: `<div></div>`,
controller: Test,
bindings: {
name: '='
}
});
Lifecycle hooks 38
![Page 39: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/39.jpg)
Now let’s talk about testing.
Scaling is hard without it.
39
![Page 40: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/40.jpg)
Are you doing TDD?
40
![Page 41: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/41.jpg)
Ahh, OK.How about just testing?
41
![Page 42: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/42.jpg)
Tests’ typesTest Type Speed Amount Check Coupling
Unit(Karma) Fast Many Logic Isolated
42
![Page 43: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/43.jpg)
Tests’ typesTest Type Speed Amount Check Coupling
Unit(Karma) Fast Many Logic Isolated
Integration(Protractor) Slow Few UI Very
Coupled
43
![Page 44: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/44.jpg)
Missing something?
44
![Page 45: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/45.jpg)
Tests’ typesTest Type Speed Amount Check Coupling
Unit(Karma) Fast Many Logic Isolated
Fast Many Logic + UI Some
Integration(Protractor) Slow Few UI Very
Coupled
45
![Page 46: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/46.jpg)
Tests’ typesTest Type Speed Amount Check Coupling
Unit(Karma) Fast Many Logic Isolated
Component(Karma) Fast Many Logic + UI Some
Integration(Protractor) Slow Few UI Very
Coupled
46
![Page 47: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/47.jpg)
Meet component test kit!
47
![Page 48: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/48.jpg)
04 / Show us code
48
![Page 49: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/49.jpg)
49
Component Test
Usual tests
![Page 50: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/50.jpg)
50
Component TestDriver
Adding driver
![Page 51: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/51.jpg)
51
Component TestDriver
SubComponent
SubComponent
Component and its children
![Page 52: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/52.jpg)
52
Component TestDriver
SubComponent Driver
DriverSubComponent
Driver and its children
![Page 53: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/53.jpg)
This is where you are going to present your final words.This slide is not meant to have a lot of text.
Problems / Solutions53
Maintenance
Scaling
Testing
Clear Input/Output
Components tree
Component Test Kit
![Page 54: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/54.jpg)
This is where you are going to present your final words.This slide is not meant to have a lot of text.Exciting news!We are hiring in Kiev!http://bolshchikov.net
Sergey Bolshchikov
github.com/bolshchikov@[email protected]
54
![Page 55: Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"](https://reader036.vdocuments.pub/reader036/viewer/2022062316/58a100921a28abbf248b655f/html5/thumbnails/55.jpg)
This is where you are going to present your final words.This slide is not meant to have a lot of text.Thank You!Any Questions?http://bolshchikov.net
Sergey Bolshchikov
github.com/bolshchikov@[email protected]
55