68
a traveler's diary By Shavit Cohen 2 April 3, 2016

Angular 2 a traveler's diary

Embed Size (px)

Citation preview

Page 1: Angular 2   a traveler's diary

a traveler's diaryBy Shavit Cohen

2

April 3, 2016

Page 2: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Shavit [email protected]

About me in a Nutshell...

FullStack Developer for 7.5 years

Angular.js Consultant, currently at HPJS Team Lead at Tikal

Learning Experience Enthusiastic

Page 3: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Page 4: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Myself :) And my journey with Angular

My Love - Hate Relationship with Angular 2

Angular1 vs Angular2 - Code Comparison

Practical Tips for the Angular 2 wannabes

What will I talk about ?

Angular 2 Syntax intro

4

Page 5: Angular 2   a traveler's diary

Practical Tips

Code Comparison

The Different Syntax

Me & Angular :)

Page 6: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Me, Myself and Angular1.x

Hybrid mobile app

Being compiled with Phonegap

Still used worldwide :)

A lot of mistakes while developing

My First Angular App

6

Page 7: Angular 2   a traveler's diary

I Misused Angular as a framework

7 angular 2 - a traveler's diary by Shavit Cohen

Page 8: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

So, looking back, Angular 1 experience felt like...

Frustration level

Time2 direction binding is Cool

ng-repeat is awesome

logic within the html markup is strange

Directives ? WTF is this syntax

What is Transclude ?

Directives - What does scope chars (=,&,@) means ?

Directives - Why using scope without a $

Services are helpful :)

Provider?

Factory?

Constant?

Values?

Why do we need so many ?@#

I’ll just use a service :)

Why there are so many ways to do simple stuff

Why do I have to do $apply for the view to render

The $digest loop is killing the CPU

UI Router is nice and helpful

Switching to UI Router is a pain

Performance issues again

John Papa code styling guide is awesome

Why Just Now?!

Page 9: Angular 2   a traveler's diary

But after the frustration was over

9 angular 2 - a traveler's diary by Shavit Cohen

Page 10: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

We made peace with Angular

We love it (Most of us)Understand itKnows it’s flaws but lives with them

10

Page 11: Angular 2   a traveler's diary

And then They announced

11 angular 2 - a traveler's diary by Shavit Cohen

Page 12: Angular 2   a traveler's diary

12 angular 2 - a traveler's diary by Shavit Cohen

2

Page 13: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Directive$scope

13

Controller angular.moduleJqLite

Page 14: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Labor Pains

14

Page 15: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Labor Pains

Documentation is missing

15

Page 16: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Labor pains

Only limited best practices which based on limited experience

https://github.com/mgechev/angular2-style-guide

16

Page 17: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Labor pains

Lots of outdated learning materials

17

Outdated syntaxFrom: angular-tips.com

Page 18: Angular 2   a traveler's diary

It’s look like the worst time ever for getting into Angular2

18 angular 2 - a traveler's diary by Shavit Cohen

Page 19: Angular 2   a traveler's diary

So...

19 angular 2 - a traveler's diary by Shavit Cohen

Page 20: Angular 2   a traveler's diary

Iv’e decided to take it for a spin

20 angular 2 - a traveler's diary by Shavit Cohen

Page 21: Angular 2   a traveler's diary

I thought of an idea that can provide developers a richer learning experience

via videos

21 angular 2 - a traveler's diary by Shavit Cohen

2

I will share my Idea

Page 22: Angular 2   a traveler's diary

Practical Tips

Code Comparison

The Different Syntax

Me & Angular :)

Page 23: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

2

23

We want to get into Angular 2But Then we see something that looks like this

Page 24: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

2

24

Page 25: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

25

Let’s clarify

extends

extends

Page 26: Angular 2   a traveler's diary

So why not Angular2 with ES5 ?With no unfamiliar syntax

26 angular 2 - a traveler's diary by Shavit Cohen

Page 27: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Angular 2 with TypeScript

Angular 2 with ES5(Everything is a class)

27

Page 28: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

28

Page 29: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Let’s conclude so far

Angular 1 syntax !== Angular 2 syntax

29

Coding Angular 2 with ES5 is doable

Angular 2 is experiencing labor pains

“prepare your code for Angular 2” probably won’t help much

But only little documentation about it is currently available

Page 30: Angular 2   a traveler's diary

Practical Tips

Code Comparison

The Syntax

Me & Angular :)

Page 31: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

31

2

WatchersVs

Change Detection

Page 32: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Watchers Change Detection - “Unidirectional Data Flow”

32

12

Watchers vs Change Detection

Page 33: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

33

2

Controllers, and Directives

VsClass

Page 34: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

34

1

Controllers And Directives Vs Class

Page 35: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

35

2

Controllers And Directives Vs Class

Page 36: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

36

21

Controllers And Directives Vs Class

Page 37: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

37

1

Controllers And Directives Vs Class

Page 38: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

38

Controllers And Directive Vs Class

2

Page 39: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

39

1

Controllers And Directive Vs Class

2

<body> may look:

Page 40: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

40

Services[registering a service]2

Page 41: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

41

Services[Injecting a service]2

Page 42: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

42

2Markup

Page 43: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

43

1

Markup

2

ng-if vs *ngIf

Page 44: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

44

1

2

ng-repeat vs *ngFor

Markup

Page 45: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

45

1

2

ng-show vs [hidden]Markup

Page 46: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

46

2

Using [Element DOM attribute]Markup

Page 47: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

47

1

2

ng-class vs [ngClass]

Markup

Page 48: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

48

1

2

ng-[event] vs (event)Markup

Page 49: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

49

2

ng-[event] vs (event)Markup

Page 50: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

50

1

2

2 Direction BindingMarkup

Page 51: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

51

2Bootstrapping

Page 52: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

52

1

2

App bootstrappingMarkup

myApp.cmp.ts

main.cmp.ts

Page 53: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Summarizing - main changes

• Markup:▪ “Directive” oriented markup.

▪ The use of # (for local template variable).

▪ The use of * when items are being added / removed from the DOM.

▪ The binding are different [DOM property / directive], (event), [(ngModel)]

53

Page 54: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Summarizing - main changes

• Code▪ Unidirectional data-flow approach

▪ Everything is a class

▪ Dependency injection via the constructor

54

Page 55: Angular 2   a traveler's diary

Back to me

Page 56: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

I Learned 3 major things

Angular 1 !== Angular 2

56

Coding with TypeScript can be fun and reduce bugs

Visual Studio Code is a kick ass IDE

Page 57: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Now this is how Angular 2 feels like Frustration

level

Time

It plays well with 3rd party libraries

It not So bad

Ok, I got it but I don’t like it!

WTF is this syntax

OMG, I hate TypeScript! Why is the development so

slow?What are these bindings attributes? is this a valid HTML ?

The router concept is nice

No more $apply OMG, I love

TypeScript!

Page 58: Angular 2   a traveler's diary

Practical Tips

Code Comparison

The Syntax

Me & Angular :)

Page 59: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Dive in - Build a small app from scratch

59 angular 2 - a traveler's diary by Shavit Cohen

Page 60: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Avoid Copy & PasteReally,

Avoid it. Type everything (which is new to you) yourself, it will help you feel comfortable faster.

60 angular 2 - a traveler's diary by Shavit Cohen

Page 61: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

61

Know The DOM

angular 2 - a traveler's diary by Shavit Cohen

Since Events and Dom attributes are being binded Natively

Page 62: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

62

Use Arrow Functions

angular 2 - a traveler's diary by Shavit Cohen

In a ES2015 class you are working with this. Anonymous functions might make you to loose the current scope.

Page 63: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

63 angular 2 - a traveler's diary by Shavit Cohen

Embrace TypeScript

Page 64: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

64 angular 2 - a traveler's diary by Shavit Cohen

Notice the difference

Page 65: Angular 2   a traveler's diary

That’s it (almost)

65 angular 2 - a traveler's diary by Shavit Cohen

Page 66: Angular 2   a traveler's diary

Why now ?

66 angular 2 - a traveler's diary by Shavit Cohen

2

Page 67: Angular 2   a traveler's diary

Thanks.

Page 68: Angular 2   a traveler's diary

angular 2 - a traveler's diary by Shavit Cohen

Sources

Thinking in Angular 2.0Angular 2 documentationChange Detection Reinvented Victor SavkinPluralSight Course by John Papa - Angular 2.0 First LookGet 6 months of PluralSight for free

68