View
348
Download
10
Category
Preview:
Citation preview
Сергей БольщиковWix
Angular Components: все уже за, а вы еще нет?
Все уже за,
Angular Component
sА вы еще нет?
github.com/bolshchikov@bolshchikovsergeyb@wix.com
2
Quick exerciseCategory #1
Who is writing in Angular 1.x?
3
Quick exerciseCategory #1
Who is writing in Angular 1.x?
Category #2
Who is writing in Angular 2?
4
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
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
Sergey BolshchikovDeveloper Advocate @ WixFather of YGFL ConferenceMaintainer of js-must-watch
7
github.com/bolshchikov
@bolshchikov
sergeyb@wix.com
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
And it all starts from the...
9
- Pearl Buck
“ “10
If you want to understand today,You have to search yesterday.
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
01 / Problems
12
We almost don’t write code,
13
We almost don’t write code,
We maintain it.
14
Maintain the soup ofservices, controllers, templates, directives, factories… is freaking
hard
15
Just for you to visualize what I am talking about
16
17
ctrl1
s1
d1
с1 с2
ctrl2
s2 s3 s4
d2
18
ctrl1
s1
d1
с1 с2 с3
ctrl2 ctrl3
s2 s3 s4 s5 s6
d2 d3
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
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
This is not a fake, this is real app
21
Ahh, and one more thing -
We need to test all of it.
22
02 / Can we do better?
23
Imageapp
My Images
24
My Images
25
My Images
app 26
My Images
app
media item
27
My Images
app
media item
preview
28
The component treeapp
media item preview
29
1..n
Clear APIapp
media item preview
30
1..n
item item
Clear APIapp
media item preview
31
1..n
item item
on-remove()on-prev()on-next()
Clear APIapp
media item preview
32
1..n
item item
on-remove()on-prev()on-next()
Smart component
Dumb component Dumb component
It scales33
03 / Angular Components
34
@Component({
selector: 'hero-list',
templateUrl: 'app/hero-list.component.html',
directives: [HeroDetailComponent],
providers: [HeroService]
})
Cornerstone @ ng2 35
Components are introduced in Angular
1.5 or with polyfill even before
36
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: '='
}
});
class Test {
$onInit() { // initialization code for constructor }
$onDestroy() {}
$postLink() {}
}
angular
.module('totallyDifferentAngularAppInternal')
.component('test', {
template: `<div></div>`,
controller: Test,
bindings: {
name: '='
}
});
Lifecycle hooks 38
Now let’s talk about testing.
Scaling is hard without it.
39
Are you doing TDD?
40
Ahh, OK.How about just testing?
41
Tests’ typesTest Type Speed Amount Check Coupling
Unit(Karma) Fast Many Logic Isolated
42
Tests’ typesTest Type Speed Amount Check Coupling
Unit(Karma) Fast Many Logic Isolated
Integration(Protractor) Slow Few UI Very
Coupled
43
Missing something?
44
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
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
Meet component test kit!
47
04 / Show us code
48
49
Component Test
Usual tests
50
Component TestDriver
Adding driver
51
Component TestDriver
SubComponent
SubComponent
Component and its children
52
Component TestDriver
SubComponent Driver
DriverSubComponent
Driver and its children
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
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@bolshchikovsergeyb@wix.com
54
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@bolshchikovsergeyb@wix.com
55
Recommended