Angular & Rx.JS & NgRx - 3 years of experience in 5 lessons

1. Angular Rx.js NgRx
3 years of experience in 5 lessons
1

2. Korniychuk Anton
JavaScript Developer
Dev-Pro
2

3. What will be
discussed
?
3

4. 1. Lesson
4

5. 1. Lesson
Smart & Dumb Components
5

6. Smart & Dumb Components
Smart & Stupid Components
Smart & Presentational Components
Container & Presentational Components
Controller & Presentational Components
The same:
1. Lesson 6

7. Smart & Dumb Components
Smart & Stupid Components
Smart & Presentational Components
Container & Presentational Components
Controller & Presentational Components
The same:
1. Lesson 7

8. ● What types of components are there?
○ How many component types do we need?
○ For example, there is atomic design architecture
Smart & Dumb
Components
1. Lesson 8

9. ● What types of components are there?
○ How many component types do we need?
○ For example, there is atomic design architecture
● How should components interact?
○ Input()/Output()
○ ViewChild()/Host()
○ Services
Smart & Dumb
Components
1. Lesson 9

10. ● What types of components are there?
○ How many component types do we need?
○ For example, there is atomic design architecture
● How should components interact?
○ Input()/Output()
○ ViewChild()/Host()
○ Services
● Should I inject services into any component?
○ If yes - how to avoid a mess and excessive relationships?
○ If no - which ones can we do it to?
Smart & Dumb
Components
1. Lesson 10

11. ● What types of components are there?
○ How many component types do we need?
○ For example, there is atomic design architecture
● How should components interact?
○ Input()/Output()
○ ViewChild()/Host()
○ Services
● Should I inject services into any component?
○ If yes - how to avoid a mess and excessive relationships?
○ If no - which ones can we do it to?
● How do I make my components reusable across views?
○ What components should be reusable and which ones should not?
Smart & Dumb
Components
1. Lesson 11

12. Simple Example
Smart & Dumb
Components
1. Lesson 12

13. Smart & Dumb
Components
1. Lesson 13

14. Smart & Dumb
Components
1. Lesson 14

15. Smart & Dumb
Components
1. Lesson 15

16. Smart & Dumb
Components
1. Lesson 16

17. Smart & Dumb
Components
1. Lesson 17

18. Smart & Dumb
Components
1. Lesson 18

19. Smart & Dumb
Components
1. Lesson 19

20. Smart & Dumb
Components
1. Lesson 20

21. Smart & Dumb
Components
1. Lesson 21

22. Smart & Dumb
Components
1. Lesson 22

23. Smart & Dumb
Components
1. Lesson 23

24. Dumb
Smart
Smart & Dumb
Components
1. Lesson 24

25. Smart & Dumb
Components
1. Lesson 25

26. Smart & Dumb
Components
1. Lesson 26

27. Smart & Dumb
Components
1. Lesson 27

28. Smart & Dumb
Components
1. Lesson 28

29. Smart & Dumb
Components
1. Lesson 29

30. Smart & Dumb
Components
1. Lesson 30

31. Smart & Dumb
Components
1. Lesson 31

32. Smart & Dumb
Components
1. Lesson 32

33. Advanced Example
Smart & Dumb
Components
1. Lesson 33

34. Smart & Dumb
Components
1. Lesson 34

35. Smart & Dumb
Components
1. Lesson 35

36. Smart & Dumb
Components
1. Lesson 36

37. Smart & Dumb
Components
1. Lesson 37

38. Smart & Dumb
Components
1. Lesson 38

39. Smart & Dumb
Components
1. Lesson 39

40. Smart & Dumb
Components
1. Lesson 40

41. Smart & Dumb
Components
1. Lesson 41

42. Smart & Dumb
Components
1. Lesson 42

43. Smart & Dumb
Components
1. Lesson 43

44. Smart & Dumb
Components
1. Lesson 44

45. Smart & Dumb
Components
1. Lesson 45

46. Smart & Dumb
Components
1. Lesson 46

47. Smart & Dumb
Components
1. Lesson 47

48. Smart & Dumb
Components
1. Lesson 48

49. Partially Smart Component
Smart & Dumb
Components
1. Lesson 49

50. Smart & Dumb
Components
Dumb
Component
1. Lesson 50

51. Smart & Dumb
Components
1. Lesson 51

52. Smart & Dumb
Components
1. Lesson 52

53. Smart & Dumb
Components
1. Lesson 53

54. Smart & Dumb
Components
1. Lesson 54

55. Smart & Dumb
Components
Dumb
Component
1. Lesson 55

56. Smart
Component
Smart & Dumb
Components
1. Lesson 56

57. 1 Case
Smart & Dumb
Components
57

58. Smart & Dumb
Components
1. Lesson 58

59. Smart & Dumb
Components
1. Lesson 59

60. 1. Lesson
Smart & Dumb
Components
60

61. Smart & Dumb
Components
1. Lesson 61

62. 1. Lesson
Smart & Dumb
Components
Smart
Component
62

63. 2. Lesson
63

64. 2. Lesson
Do a forced cast
of data from outside
64

65. Do a forced
data casting
2. Lesson 65

66. Do a forced
data casting
2. Lesson 66

67. Do a forced
data casting
2. Lesson 67

68. Do a forced
data castingstring
2. Lesson 68

69. Do a forced
data castingstring
2. Lesson 69

70. Do a forced
data casting
2. Lesson 70

71. Do a forced
data casting
number
2. Lesson 71

72. Do a forced
data casting
2. Lesson 72

73. Do a forced
data casting
2. Lesson 73

74. Do a forced
data casting
2. Lesson 74

75. Do a forced
data casting
2. Lesson 75

76. Do a forced
data casting
2. Lesson 76

77. Do a forced
data casting
2. Lesson 77

78. Do a forced
data casting
2. Lesson 78

79. Do a forced
data casting
2. Lesson 79

80. 2. Lesson
Do a forced
data casting
80

81. 3. Lesson
81

82. 3. Lesson
About strict
TypeScript
82

83. About Strict
TypeScript
3. Lesson 83

84. About Strict
TypeScript
3. Lesson 84

85. About Strict
TypeScript
3. Lesson 85

86. About Strict
TypeScript
3. Lesson 86

87. About Strict
TypeScript
3. Lesson 87

88. About Strict
TypeScript
3. Lesson 88

89. About Strict
TypeScript
3. Lesson 89

90. About Strict
TypeScript
3. Lesson 90

91. About Strict
TypeScript
3. Lesson 91

92. About Strict
TypeScript
3. Lesson 92

93. About Strict
TypeScript
3. Lesson 93

94. About Strict
TypeScript
3. Lesson 94

95. About Strict
TypeScript
Other Strict Operators
--alwaysStrict
--noImplicitAny
--noImplicitThis
--strictFunctionTypes
--strictPropertyInitialization
--strictNullChecks
3. Lesson 95

96. About Strict
TypeScript
Other Strict Operators
--alwaysStrict
--noImplicitAny
--noImplicitThis
--strictFunctionTypes
--strictPropertyInitialization
--strictNullChecks
--strict
3. Lesson 96

97. About Strict
TypeScript
Other Strict Operators
--alwaysStrict // ts 2.1+
--noImplicitAny // ts 2.0+
--noImplicitThis // ts 2.0+
--strictFunctionTypes // ts 2.6+
--strictPropertyInitialization // ts 2.7+
--strictNullChecks // ts 2.0+
--strict // ts 2.3+
3. Lesson 97

98. About Strict
TypeScript
3. Lesson
Other Strict Operators
--alwaysStrict // ts 2.1+
--noImplicitAny // ts 2.0+
--noImplicitThis // ts 2.0+
--strictFunctionTypes // ts 2.6+
--strictPropertyInitialization // ts 2.7+
--strictNullChecks // ts 2.0+
--strict // ts 2.3+
98

99. 4. Lesson
99

100. 4. Lesson
Angular without Rx.js
vs
Too much tricky Rx.js
100

101. Without Rx.js
vs
Too much Rx.jsWhy do we need to use Rx.js ?
4. Lesson 101

102. Without Rx.js
vs
Too much Rx.jsWhy do we need to use Rx.js ?
4. Lesson 102

103. Without Rx.js
vs
Too much Rx.jsWhy do we need to use Rx.js ?
4. Lesson 103

104. Without Rx.js
vs
Too much Rx.jsWhy do we need to use Rx.js ?
4. Lesson 104

105. Without Rx.js
vs
Too much Rx.jsWhy do we need to use Rx.js ?
4. Lesson 105

106. Without Rx.js
vs
Too much Rx.jsWhy do we need to use Rx.js ?
4. Lesson 106

107. Without Rx.js
vs
Too much Rx.jsWhy do we need to use Rx.js ?
4. Lesson 107

108. Without Rx.js
vs
Too much Rx.jsRx.JS Subject’s
&
Multicasting operators
4. Lesson
https://www.youtube.com/watch
?v=Q28-P5jpzUs
108

109. Without Rx.js
vs
Too much Rx.js
Could there be too much Rx.js?
4. Lesson 109

110. Without Rx.js
vs
Too much Rx.js
4. Lesson
Could there be too much Rx.js?
Yes!
110

111. Without Rx.js
vs
Too much Rx.js
4. Lesson
Could there be too much Rx.js?
Yes!
Use NgRx for manipulating data
111

112. 4. Lesson
Without Rx.js
vs
Too much Rx.js
112

113. 4. Lesson
Without Rx.js
vs
Too much Rx.js
Dangerous!
113

114. 4. Lesson
Without Rx.js
vs
Too much Rx.js
Dangerous!
Happiness!
114

115. 5. Lesson
115

116. 5. Lesson
Rx.js
.unsubscribe()
better way
116

117. .unsubscribe()
better way
5. Lesson 117

118. 5. Lesson
.unsubscribe()
better way
118

119. 5. Lesson
.unsubscribe()
better way
119

120. 5. Lesson
.unsubscribe()
better way
120

121. 5. Lesson
.unsubscribe()
better way
121

122. 5. Lesson
.unsubscribe()
better way
122

123. 5. Lesson
.unsubscribe()
better way
123

124. 5. Lesson
.unsubscribe()
better way
124

125. 5. Lesson
.unsubscribe()
better way
125

126. 5. Lesson
.unsubscribe()
better way
126

127. 5. Lesson
.unsubscribe()
better way
127

128. 5. Lesson
.unsubscribe()
better way
128

129. 5. Lesson
.unsubscribe()
better way
129

130. 5. Lesson
.unsubscribe()
better way
130

131. 5. Lesson
.unsubscribe()
better way
131

132. 5. Lesson
.unsubscribe()
better way
132

133. 5. Lesson
.unsubscribe()
better way
133

134. 5. Lesson
.unsubscribe()
better way
CAN BE BETTER!
134

135. 5. Lesson
.unsubscribe()
better way
135

136. 5. Lesson
.unsubscribe()
better way
136

137. 5. Lesson
.unsubscribe()
better way
137

138. 5. Lesson
.unsubscribe()
better way
Dangerous!
138

139. 5. Lesson
.unsubscribe()
better way
Warning! Memory leaks!
139

140. 5. Lesson
.unsubscribe()
better way
Warning! No memory leaks!
140

141. 5. Lesson
.unsubscribe()
better way
Warning! No memory leaks!
141

142. 5. Lesson
.unsubscribe()
better way
142

143. 5. Lesson
.unsubscribe()
better way
143

144. Summary
1. Smart & Dumb Components.
2. Do a forced cast of data from outside.
3. Use strict TypeScript.
4. Learn Rx.js & use NgRx in your app.
5. Do .unsubscribe() correctly.
144

145. 145

146. 146
https://www.slideshare.net/ssuser71
a6d2/ngrx-angular-rxjs-3-years-of-e
xperience-in-5-lessons
The presentation URL: