TWENTY THOUSAND LEAGUES UNDER THEANGULAR 4

Oleksandr TryshchenkoSenior Front-end Developer, DataArttryshchenko.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 way to link two and more viewModels between each other.

9

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

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.

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 there are differences – it

updates the view. Otherwise skips it

13

Component to Component Binding

14

app

sidebar widgets Componentwith changes

header

Component to Component Binding

15

Applet a = 1;

Sidebar, displays a widgets

Componentwhich changes

the variable

header

Component to Component Binding

16

Applet a = 1;

Sidebar, displays a widgets

Componentwhich a changed

variable

header

“I Wanna Update Parent’s ValueAfter 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