During the presentation I've explained how to work with - Change Detection Strategies - Reactive Forms - Angular Animations and Web Animations API

2. TWENTY THOUSAND
LEAGUES UNDER THE
ANGULAR 4
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt
tryshchenko.com

3. WALT DISNEY'S 20,000
LEAGUES UNDER THE
SEA (1954)

4. Agenda
1. Why?
2. How?
4

5. Why?
1. Make an app faster
2. Make a code better
5

6. DATA BINDING

8. CHANGE DETECTION STRATEGIES

9. What Is a Data Binding?
1. The automated way to link template and viewModel values between each other.
2. The automated way to link two and more viewModels between each other.
9

10. Template to Component Binding
View is updated
User changed
view
View triggers
event with
changes
viewModel
subscribed to the
events gets values
viewModel
modifies view in
some way
10

11. Template to Component Binding
View is updated
User changed
view
View triggers
event with
changes
viewModel
subscribed to the
events gets values
viewModel
modifies view in
some way
11
Almost all frameworks are
tracking changes and
doesn’t refresh HTML if
there’s no changes.

12. The Most Common Ways:
VirtualDOM Abstract Syntax Tree
12

13. Component to Template Binding
Angular saves copy
of all values
Variable changes
Angular compares
new and old values
If there are
differences – it
updates the view.
Otherwise skips it
13

14. Component to Component Binding
14
app
sidebar widgets
Component
with changes
header

15. Component to Component Binding
15
App
let a = 1;
Sidebar,
displays a
widgets
Component
which changes
the variable
header

16. Component to Component Binding
16
App
let a = 1;
Sidebar, displays
a
widgets
Component
which a changed
variable
header

17. “I Wanna Update Parent’s Value
After The Children’s One”
17

18. Bindings Problem Example
⌨️

19. Passing @Input() as an Object or Array
19

20. Component Bindings Example
⌨️

21. …
⌨️

22. THAT’S A BULLSHIT!

23. What Are Change Detection Strategies?
23
https://goo.gl/PrMCoS

24. Change Detection Strategy Example
⌨️

25. What Can Help Us?
25

26. Functional Programming
and Immutable Data
Structures

27. Attention:
My explanations are simplified. I’m
going to talk about general points
not about the details now:

28. What Is a Functional Programming
• Usage of “Pure functions”
• Usage of Immutable Data Structures
28

29. OnPush
1. It’s faster for big data structures
2. It won’t fix your code instead of you
3. You’ll probably won’t need it
29

30. OnPush Schema
30

31. Data Structures
1. Mutable
2. Immutable
31

32. Data Structures
1. Mutable
2. Immutable
32

33. Data Mutations?
33

34. Immutable Data Structures We Can Use
1. We can use classic ones J
2. Immutble.js Map and Set
3. Monads
34

35. Classic Ones?
1. Object.assign()
2. […oldArray, newValue]
35

36. Immutable

37. What Are Monads?
1. Monads are containers
37

38. Idea (Let’s Dream a Little)

39. Idea (Let’s Dream a Little)

40. Solution! Monet.js

41. Avoid Null Pointer Exceptions

42. Simple Example

43. Monet

44. Deeper
1. MarkForCheck
2. Detach
3. Reattach
44

45. Was That Effective?
1. MarkForCheck
2. Detach
3. Reattach
45

46. When It Makes a Real Difference?
46

47. 47

48. REACTIVE FORMS

49. ???
49

50. Reactive Forms Example
⌨️

51. Reactive Forms – Filling Manually
1. patchValue vs setValue
2. Reseting form
51

52. Reactive Forms – Touched
52

53. Reactive Forms – Valid
53

54. Reactive Forms – Validators
54

55. Reactive Forms – Custom Validators
55

56. Custom Validators Example
⌨️

57. Reactive Forms – Async Validators
Let’s imagine an email validator. We have to check does it exist in our database.
57

58. Async Validators Example
⌨️

59. Reactive Forms – Submitting A Form
59

60. Reactive Forms – Form Statuses
Adding groups dynamically with FormArray.
60

61. Reactive Forms – Form Arrays
61

62. Reactive Forms – Form Arrays
Adding groups dynamically with FormArray.
62

63. Reactive Forms – Field Observers
Adding groups dynamically with FormArray.
63

64. ANGULAR ANIMATIONS

65. Web Animations Api
65

66. Support
66

67. What is the Web Animation API?
67

68. Why Do We Need This?
68
1. We wanna be faster! J

69. Ok. Performance?
69
1. It triggers CSS animations under the hood.

70. Angular 2
1. import { trigger, style, transition, animate, group } from '@angular/core';
70

71. Angular 4
1. import { trigger, style, transition, animate, group } from '@angular/animations’;
71

72. WAT?
Angular 2
'@angular/core’
Angular 4
'@angular/animations’
72

73. Examples!
⌨️

74. ENCAPSULATE!

76. Stay In Touch!
1.http://tryshchenko.com/
2.https://www.facebook.com/tryshchenko
76