Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TWENTY THOUSAND
LEAGUES UNDER THE
ANGULAR 4
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt
tryshchenko.com
WALT DISNEY'S 20,000
LEAGUES UNDER THE
SEA (1954)
Agenda
1. Why?
2. How?
4
Why?
1. Make an app faster
2. Make a code better
5
DATA BINDING
CHANGE DETECTION STRATEGIES
What Is a Data Binding?
1. The automated way to link template and viewModel values between each other.
2. The automated wa...
Template to Component Binding
View is updated
User changed
view
View triggers
event with
changes
viewModel
subscribed to t...
Template to Component Binding
View is updated
User changed
view
View triggers
event with
changes
viewModel
subscribed to t...
The Most Common Ways:
VirtualDOM Abstract Syntax Tree
12
Component to Template Binding
Angular saves copy
of all values
Variable changes
Angular compares
new and old values
If the...
Component to Component Binding
14
app
sidebar widgets
Component
with changes
header
Component to Component Binding
15
App
let a = 1;
Sidebar,
displays a
widgets
Component
which changes
the variable
header
Component to Component Binding
16
App
let a = 1;
Sidebar, displays
a
widgets
Component
which a changed
variable
header
“I Wanna Update Parent’s Value
After The Children’s One”
17
Bindings Problem Example
⌨️
Passing @Input() as an Object or Array
19
Component Bindings Example
⌨️
…
⌨️
THAT’S A BULLSHIT!
What Are Change Detection Strategies?
23
https://goo.gl/PrMCoS
Change Detection Strategy Example
⌨️
What Can Help Us?
25
Functional Programming
and Immutable Data
Structures
Attention:
My explanations are simplified. I’m
going to talk about general points
not about the details now:
What Is a Functional Programming
• Usage of “Pure functions”
• Usage of Immutable Data Structures
28
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
OnPush Schema
30
Data Structures
1. Mutable
2. Immutable
31
Data Structures
1. Mutable
2. Immutable
32
Data Mutations?
33
Immutable Data Structures We Can Use
1. We can use classic ones J
2. Immutble.js Map and Set
3. Monads
34
Classic Ones?
1. Object.assign()
2. […oldArray, newValue]
35
Immutable
What Are Monads?
1. Monads are containers
37
Idea (Let’s Dream a Little)
Idea (Let’s Dream a Little)
Solution! Monet.js
Avoid Null Pointer Exceptions
Simple Example
Monet
Deeper
1. MarkForCheck
2. Detach
3. Reattach
44
Was That Effective?
1. MarkForCheck
2. Detach
3. Reattach
45
When It Makes a Real Difference?
46
47
REACTIVE FORMS
???
49
Reactive Forms Example
⌨️
Reactive Forms – Filling Manually
1. patchValue vs setValue
2. Reseting form
51
Reactive Forms – Touched
52
Reactive Forms – Valid
53
Reactive Forms – Validators
54
Reactive Forms – Custom Validators
55
Custom Validators Example
⌨️
Reactive Forms – Async Validators
Let’s imagine an email validator. We have to check does it exist in our database.
57
Async Validators Example
⌨️
Reactive Forms – Submitting A Form
59
Reactive Forms – Form Statuses
Adding groups dynamically with FormArray.
60
Reactive Forms – Form Arrays
61
Reactive Forms – Form Arrays
Adding groups dynamically with FormArray.
62
Reactive Forms – Field Observers
Adding groups dynamically with FormArray.
63
ANGULAR ANIMATIONS
Web Animations Api
65
Support
66
What is the Web Animation API?
67
Why Do We Need This?
68
1. We wanna be faster! J
Ok. Performance?
69
1. It triggers CSS animations under the hood.
Angular 2
1. import { trigger, style, transition, animate, group } from '@angular/core';
70
Angular 4
1. import { trigger, style, transition, animate, group } from '@angular/animations’;
71
WAT?
Angular 2
'@angular/core’
Angular 4
'@angular/animations’
72
Examples!
⌨️
ENCAPSULATE!
Stay In Touch!
1.http://tryshchenko.com/
2.https://www.facebook.com/tryshchenko
76
20 000 Leagues Under The Angular 4
20 000 Leagues Under The Angular 4
20 000 Leagues Under The Angular 4
20 000 Leagues Under The Angular 4
Upcoming SlideShare
Loading in …5
×

20 000 Leagues Under The Angular 4

251 views

Published on

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

Published in: Technology
  • Be the first to comment

20 000 Leagues Under The Angular 4

  1. 1. TWENTY THOUSAND LEAGUES UNDER THE ANGULAR 4 Oleksandr Tryshchenko Senior Front-end Developer, DataArt tryshchenko.com
  2. 2. WALT DISNEY'S 20,000 LEAGUES UNDER THE SEA (1954)
  3. 3. Agenda 1. Why? 2. How? 4
  4. 4. Why? 1. Make an app faster 2. Make a code better 5
  5. 5. DATA BINDING
  6. 6. CHANGE DETECTION STRATEGIES
  7. 7. 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
  8. 8. 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
  9. 9. 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.
  10. 10. The Most Common Ways: VirtualDOM Abstract Syntax Tree 12
  11. 11. 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
  12. 12. Component to Component Binding 14 app sidebar widgets Component with changes header
  13. 13. Component to Component Binding 15 App let a = 1; Sidebar, displays a widgets Component which changes the variable header
  14. 14. Component to Component Binding 16 App let a = 1; Sidebar, displays a widgets Component which a changed variable header
  15. 15. “I Wanna Update Parent’s Value After The Children’s One” 17
  16. 16. Bindings Problem Example ⌨️
  17. 17. Passing @Input() as an Object or Array 19
  18. 18. Component Bindings Example ⌨️
  19. 19. … ⌨️
  20. 20. THAT’S A BULLSHIT!
  21. 21. What Are Change Detection Strategies? 23 https://goo.gl/PrMCoS
  22. 22. Change Detection Strategy Example ⌨️
  23. 23. What Can Help Us? 25
  24. 24. Functional Programming and Immutable Data Structures
  25. 25. Attention: My explanations are simplified. I’m going to talk about general points not about the details now:
  26. 26. What Is a Functional Programming • Usage of “Pure functions” • Usage of Immutable Data Structures 28
  27. 27. 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
  28. 28. OnPush Schema 30
  29. 29. Data Structures 1. Mutable 2. Immutable 31
  30. 30. Data Structures 1. Mutable 2. Immutable 32
  31. 31. Data Mutations? 33
  32. 32. Immutable Data Structures We Can Use 1. We can use classic ones J 2. Immutble.js Map and Set 3. Monads 34
  33. 33. Classic Ones? 1. Object.assign() 2. […oldArray, newValue] 35
  34. 34. Immutable
  35. 35. What Are Monads? 1. Monads are containers 37
  36. 36. Idea (Let’s Dream a Little)
  37. 37. Idea (Let’s Dream a Little)
  38. 38. Solution! Monet.js
  39. 39. Avoid Null Pointer Exceptions
  40. 40. Simple Example
  41. 41. Monet
  42. 42. Deeper 1. MarkForCheck 2. Detach 3. Reattach 44
  43. 43. Was That Effective? 1. MarkForCheck 2. Detach 3. Reattach 45
  44. 44. When It Makes a Real Difference? 46
  45. 45. 47
  46. 46. REACTIVE FORMS
  47. 47. ??? 49
  48. 48. Reactive Forms Example ⌨️
  49. 49. Reactive Forms – Filling Manually 1. patchValue vs setValue 2. Reseting form 51
  50. 50. Reactive Forms – Touched 52
  51. 51. Reactive Forms – Valid 53
  52. 52. Reactive Forms – Validators 54
  53. 53. Reactive Forms – Custom Validators 55
  54. 54. Custom Validators Example ⌨️
  55. 55. Reactive Forms – Async Validators Let’s imagine an email validator. We have to check does it exist in our database. 57
  56. 56. Async Validators Example ⌨️
  57. 57. Reactive Forms – Submitting A Form 59
  58. 58. Reactive Forms – Form Statuses Adding groups dynamically with FormArray. 60
  59. 59. Reactive Forms – Form Arrays 61
  60. 60. Reactive Forms – Form Arrays Adding groups dynamically with FormArray. 62
  61. 61. Reactive Forms – Field Observers Adding groups dynamically with FormArray. 63
  62. 62. ANGULAR ANIMATIONS
  63. 63. Web Animations Api 65
  64. 64. Support 66
  65. 65. What is the Web Animation API? 67
  66. 66. Why Do We Need This? 68 1. We wanna be faster! J
  67. 67. Ok. Performance? 69 1. It triggers CSS animations under the hood.
  68. 68. Angular 2 1. import { trigger, style, transition, animate, group } from '@angular/core'; 70
  69. 69. Angular 4 1. import { trigger, style, transition, animate, group } from '@angular/animations’; 71
  70. 70. WAT? Angular 2 '@angular/core’ Angular 4 '@angular/animations’ 72
  71. 71. Examples! ⌨️
  72. 72. ENCAPSULATE!
  73. 73. Stay In Touch! 1.http://tryshchenko.com/ 2.https://www.facebook.com/tryshchenko 76

×