angular 2 a traveler's diary

a traveler's diaryBy Shavit Cohen

2

April 3, 2016

angular 2 - a traveler's diary by Shavit Cohen

Shavit Cohenshavit@tikalk.com

About me in a Nutshell...

FullStack Developer for 7.5 years

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

Learning Experience Enthusiastic

angular 2 - a traveler's diary by Shavit Cohen

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

Practical Tips

Code Comparison

The Different Syntax

Me & Angular :)

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

I Misused Angular as a framework

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

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?!

But after the frustration was over

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

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

And then They announced

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

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

2

angular 2 - a traveler's diary by Shavit Cohen

Directive$scope

13

Controller angular.moduleJqLite

angular 2 - a traveler's diary by Shavit Cohen

Labor Pains

14

angular 2 - a traveler's diary by Shavit Cohen

Labor Pains

Documentation is missing

15

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

angular 2 - a traveler's diary by Shavit Cohen

Labor pains

Lots of outdated learning materials

17

Outdated syntaxFrom: angular-tips.com

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

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

So...

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

Iv’e decided to take it for a spin

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

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

Practical Tips

Code Comparison

The Different Syntax

Me & Angular :)

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

angular 2 - a traveler's diary by Shavit Cohen

2

24

angular 2 - a traveler's diary by Shavit Cohen

25

Let’s clarify

extends

extends

So why not Angular2 with ES5 ?With no unfamiliar syntax

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

angular 2 - a traveler's diary by Shavit Cohen

Angular 2 with TypeScript

Angular 2 with ES5(Everything is a class)

27

angular 2 - a traveler's diary by Shavit Cohen

28

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

Practical Tips

Code Comparison

The Syntax

Me & Angular :)

angular 2 - a traveler's diary by Shavit Cohen

31

2

WatchersVs

Change Detection

angular 2 - a traveler's diary by Shavit Cohen

Watchers Change Detection - “Unidirectional Data Flow”

32

12

Watchers vs Change Detection

angular 2 - a traveler's diary by Shavit Cohen

33

2

Controllers, and Directives

VsClass

angular 2 - a traveler's diary by Shavit Cohen

34

1

Controllers And Directives Vs Class

angular 2 - a traveler's diary by Shavit Cohen

35

2

Controllers And Directives Vs Class

angular 2 - a traveler's diary by Shavit Cohen

36

21

Controllers And Directives Vs Class

angular 2 - a traveler's diary by Shavit Cohen

37

1

Controllers And Directives Vs Class

angular 2 - a traveler's diary by Shavit Cohen

38

Controllers And Directive Vs Class

2

angular 2 - a traveler's diary by Shavit Cohen

39

1

Controllers And Directive Vs Class

2

<body> may look:

angular 2 - a traveler's diary by Shavit Cohen

40

Services[registering a service]2

angular 2 - a traveler's diary by Shavit Cohen

41

Services[Injecting a service]2

angular 2 - a traveler's diary by Shavit Cohen

42

2Markup

angular 2 - a traveler's diary by Shavit Cohen

43

1

Markup

2

ng-if vs *ngIf

angular 2 - a traveler's diary by Shavit Cohen

44

1

2

ng-repeat vs *ngFor

Markup

angular 2 - a traveler's diary by Shavit Cohen

45

1

2

ng-show vs [hidden]Markup

angular 2 - a traveler's diary by Shavit Cohen

46

2

Using [Element DOM attribute]Markup

angular 2 - a traveler's diary by Shavit Cohen

47

1

2

ng-class vs [ngClass]

Markup

angular 2 - a traveler's diary by Shavit Cohen

48

1

2

ng-[event] vs (event)Markup

angular 2 - a traveler's diary by Shavit Cohen

49

2

ng-[event] vs (event)Markup

angular 2 - a traveler's diary by Shavit Cohen

50

1

2

2 Direction BindingMarkup

angular 2 - a traveler's diary by Shavit Cohen

51

2Bootstrapping

angular 2 - a traveler's diary by Shavit Cohen

52

1

2

App bootstrappingMarkup

myApp.cmp.ts

main.cmp.ts

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

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

Back to me

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

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!

Practical Tips

Code Comparison

The Syntax

Me & Angular :)

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

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

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

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.

angular 2 - a traveler's diary by Shavit Cohen

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

Embrace TypeScript

angular 2 - a traveler's diary by Shavit Cohen

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

Notice the difference

That’s it (almost)

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

Why now ?

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

2

Thanks.

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