angular 2 + typescript = true. let's play!

74
ANGULAR 2 + TYPESCRIPT = TRUE SIRAR SALIH SENIOR SOFTWARE ENGINEER LET’S PLAY!

Upload: sirar-salih

Post on 18-Jan-2017

616 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Angular 2 + TypeScript = true. Let's Play!

ANGULAR 2 + TYPESCRIPT = TRUE

SIRAR SALIH SENIOR SOFTWARE ENGINEER

LET’S PLAY!

Page 2: Angular 2 + TypeScript = true. Let's Play!

Last year

Page 3: Angular 2 + TypeScript = true. Let's Play!
Page 4: Angular 2 + TypeScript = true. Let's Play!
Page 5: Angular 2 + TypeScript = true. Let's Play!
Page 6: Angular 2 + TypeScript = true. Let's Play!
Page 7: Angular 2 + TypeScript = true. Let's Play!
Page 8: Angular 2 + TypeScript = true. Let's Play!

“Let this mark the day that I decided to get the hell out of web dev.”

“Is this a joke?”

“Breaking changes and no migration path from 1.x to 2.0. Wait, WHAT?”

“People thought that Python 2.7 -> 3 was bad, but this is much worse.”

Page 9: Angular 2 + TypeScript = true. Let's Play!
Page 10: Angular 2 + TypeScript = true. Let's Play!
Page 11: Angular 2 + TypeScript = true. Let's Play!

Directives

Model Binding

Controllers

Validation

Localization

Testability

Page 12: Angular 2 + TypeScript = true. Let's Play!

Directives

Model Binding

Controllers

Validation

Localization

Testability

Page 13: Angular 2 + TypeScript = true. Let's Play!
Page 14: Angular 2 + TypeScript = true. Let's Play!
Page 15: Angular 2 + TypeScript = true. Let's Play!

Two things

Page 16: Angular 2 + TypeScript = true. Let's Play!

Template Component

Page 17: Angular 2 + TypeScript = true. Let's Play!

Template Component

Forward binding

Page 18: Angular 2 + TypeScript = true. Let's Play!

Template Component

Forward binding

Reverse binding

Page 19: Angular 2 + TypeScript = true. Let's Play!
Page 20: Angular 2 + TypeScript = true. Let's Play!
Page 21: Angular 2 + TypeScript = true. Let's Play!

Data Sharing

Page 22: Angular 2 + TypeScript = true. Let's Play!
Page 23: Angular 2 + TypeScript = true. Let's Play!

Binding

Page 24: Angular 2 + TypeScript = true. Let's Play!
Page 25: Angular 2 + TypeScript = true. Let's Play!
Page 26: Angular 2 + TypeScript = true. Let's Play!

Dependency Injection

Page 27: Angular 2 + TypeScript = true. Let's Play!

Angular 1 has a single root injector

Page 28: Angular 2 + TypeScript = true. Let's Play!

Angular 2 has a hierarchical injector- Lazy loading

- No more string tokens- No more minification issues

- Cleaner and more flexible interface

Page 29: Angular 2 + TypeScript = true. Let's Play!
Page 30: Angular 2 + TypeScript = true. Let's Play!

Built-in Components

Page 31: Angular 2 + TypeScript = true. Let's Play!
Page 32: Angular 2 + TypeScript = true. Let's Play!
Page 33: Angular 2 + TypeScript = true. Let's Play!
Page 34: Angular 2 + TypeScript = true. Let's Play!
Page 35: Angular 2 + TypeScript = true. Let's Play!
Page 36: Angular 2 + TypeScript = true. Let's Play!
Page 37: Angular 2 + TypeScript = true. Let's Play!

You can still use ng-model, but you shouldn’t!

Page 38: Angular 2 + TypeScript = true. Let's Play!

Forms

Page 39: Angular 2 + TypeScript = true. Let's Play!
Page 40: Angular 2 + TypeScript = true. Let's Play!
Page 41: Angular 2 + TypeScript = true. Let's Play!
Page 42: Angular 2 + TypeScript = true. Let's Play!
Page 43: Angular 2 + TypeScript = true. Let's Play!
Page 44: Angular 2 + TypeScript = true. Let's Play!
Page 45: Angular 2 + TypeScript = true. Let's Play!
Page 46: Angular 2 + TypeScript = true. Let's Play!
Page 47: Angular 2 + TypeScript = true. Let's Play!
Page 48: Angular 2 + TypeScript = true. Let's Play!
Page 49: Angular 2 + TypeScript = true. Let's Play!
Page 50: Angular 2 + TypeScript = true. Let's Play!
Page 51: Angular 2 + TypeScript = true. Let's Play!
Page 52: Angular 2 + TypeScript = true. Let's Play!
Page 53: Angular 2 + TypeScript = true. Let's Play!

Component Router- Async loading of components

Page 54: Angular 2 + TypeScript = true. Let's Play!

Migration

Page 55: Angular 2 + TypeScript = true. Let's Play!

• Angular 1 and Angular 2 can run together• ng-upgrade libraries• (Re)Write your Angular 1 app to a component-

like structure- Directive -> Component

• Step-by-step guide:http://angularjs.blogspot.no/2015/08/angular-1-and-angular-2-coexistence.html

Page 56: Angular 2 + TypeScript = true. Let's Play!

• Better performance- 3 to 5 times faster rendering- Template precompilation- View caching- Lower memory usage

• Faster, powerful templating• DI with Lazy loading• Server-side rendering• Web workers

- Isolated threads• Mobile app support• And more to come!

Page 57: Angular 2 + TypeScript = true. Let's Play!

So should you upgrade?The answer is: yes!

Page 58: Angular 2 + TypeScript = true. Let's Play!
Page 59: Angular 2 + TypeScript = true. Let's Play!
Page 60: Angular 2 + TypeScript = true. Let's Play!
Page 61: Angular 2 + TypeScript = true. Let's Play!

Angular 2 SurveryBy Jeff Whelpley & Patrick Stapleton

2100+ ng devs across the world

Page 62: Angular 2 + TypeScript = true. Let's Play!
Page 63: Angular 2 + TypeScript = true. Let's Play!
Page 64: Angular 2 + TypeScript = true. Let's Play!
Page 65: Angular 2 + TypeScript = true. Let's Play!
Page 66: Angular 2 + TypeScript = true. Let's Play!
Page 67: Angular 2 + TypeScript = true. Let's Play!
Page 68: Angular 2 + TypeScript = true. Let's Play!
Page 69: Angular 2 + TypeScript = true. Let's Play!
Page 70: Angular 2 + TypeScript = true. Let's Play!
Page 71: Angular 2 + TypeScript = true. Let's Play!
Page 72: Angular 2 + TypeScript = true. Let's Play!
Page 73: Angular 2 + TypeScript = true. Let's Play!
Page 74: Angular 2 + TypeScript = true. Let's Play!

@[email protected]

https://github.com/sirarsalihhttp://www.sirarsalih.com/