Модель компонентов существует уже несколько лет, однако только за последний год она действительно обрела силу, пожалуй, благодаря React. Компоненты играют ключевую роль в Angular 2.0, однако использовать их уже можно и нужно сейчас в существующем коде. В этой лекции мы разберем по косточкам все супер-силы, которые есть у Angular Components и возможности, которые открываются с их использованием на основе реального приложения. После этого, Вам вряд ли захочется возвращаться в обычный мир Angular.

1. Сергей Больщиков
Wix
Angular Components:
все уже за, а вы еще нет?

2. Все уже за,
Angular
Components
А вы еще нет?
github.com/bolshchikov@bolshchikovsergeyb@wix.com
2

3. Quick exercise
Category #1
Who is writing in Angular
1.x?
3

4. Quick exercise
Category #1
Who is writing in Angular
1.x?
Category #2
Who is writing in Angular 2?
4

5. Quick exercise
Category #1
Who is writing in Angular
1.x?
Category #2
Who is writing in Angular 2? Who is writing in React?
Category #3
5

6. You will learn today
Category #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

7. Sergey
Bolshchikov
Developer Advocate @ Wix
Father of YGFL Conference
Maintainer of js-must-watch
7
github.com/bolshchikov
@bolshchikov
sergeyb@wix.com

8. 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
Agenda
8

9. And it all starts from the...
9

10. - Pearl Buck
“ “
10
If you want to
understand today,
You have to
search yesterday.

11. It’s all history
Jan, 2016Aug, 2013May,
2013
Oct, 2011Feb, 2011Oct, 2010
Components
Model
Web
Components
Presentation
Angular
Directives
React
Angular
Components
Ember
Components
11

12. 01 / Problems
12

13. We almost don’t write code,
13

14. We almost don’t write code,
We maintain it.
14

15. Maintain the soup of
services, controllers,
templates, directives,
factories… is freaking hard
15

16. Just for you to visualize what
I am talking about
16

17. 17
ctrl1
s1
d1
с1 с2
ctrl2
s2 s3 s4
d2

18. 18
ctrl1
s1
d1
с1 с2 с3
ctrl2 ctrl3
s2 s3 s4 s5 s6
d2 d3

19. 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. 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

21. This is not a fake,
this is real app
21

22. Ahh, and one more thing -
We need to test all of it.
22

23. 02 / Can we do better?
23

24. Image
app
My Images
24

25. My Images
25

26. My Images
app 26

27. My Images
app
media
item
27

28. My Images
app
media
item
preview
28

29. The component tree
app
media
item
preview
29
1..n

30. Clear API
app
media
item
preview
30
1..n
item item

31. Clear API
app
media
item
preview
31
1..n
item item
on-remove()
on-prev()
on-next()

32. Clear API
app
media
item
preview
32
1..n
item item
on-remove()
on-prev()
on-next()
Smart component
Dumb component Dumb component

33. It scales
33

34. 03 / Angular Components
34

35. @Component({
selector: 'hero-list',
templateUrl: 'app/hero-list.component.html',
directives: [HeroDetailComponent],
providers: [HeroService]
})
Cornerstone @ ng2
35

36. Components are introduced
in Angular 1.5 or with polyfill
even before
36

37. angular
.module('totallyDifferentAngularAppInternal')
.directive('test', () => ({
template: '<div></div>',
controller: Test,
controllerAs: 'test',
scope: {
name: '='
},
bindToController: true,
restrict: 'E'
}));
Directive vs. Component
37
angular
.module('totallyDifferentAngularAppInternal')
.component('test', {
template: `<div></div>`,
controller: Test,
bindings: {
name: '='
}
});

38. class Test {
$onInit() { // initialization code for constructor }
$onDestroy() {}
$postLink() {}
}
angular
.module('totallyDifferentAngularAppInternal')
.component('test', {
template: `<div></div>`,
controller: Test,
bindings: {
name: '='
}
});
Lifecycle hooks
38

39. Now let’s talk about testing.
Scaling is hard without it.
39

40. Are you doing TDD?
40

41. Ahh, OK.
How about just testing?
41

42. Tests’ types
Test Type Speed Amount Check Coupling
Unit
(Karma)
Fast Many Logic Isolated
42

43. Tests’ types
Test Type Speed Amount Check Coupling
Unit
(Karma)
Fast Many Logic Isolated
Integration
(Protractor)
Slow Few UI
Very
Coupled
43

44. Missing something?
44

45. Tests’ types
Test Type Speed Amount Check Coupling
Unit
(Karma)
Fast Many Logic Isolated
Fast Many Logic + UI Some
Integration
(Protractor)
Slow Few UI
Very
Coupled
45

46. Tests’ types
Test 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

47. Meet component test kit!
47

48. 04 / Show us code
48

49. 49
Component Test
Usual tests

50. 50
Component TestDriver
Adding driver

51. 51
Component TestDriver
Sub
Component
Sub
Component
Component and its children

52. 52
Component TestDriver
Sub
Component
Driver
Driver
Sub
Component
Driver and its children

53. This is where you are going to present your final words.
This slide is not meant to have a lot of text.
Problems / Solutions
53
Maintenance
Scaling
Testing
Clear Input/Output
Components tree
Component Test Kit

54. 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

55. 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