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