26
Getting Ready for Angular2 NGULAR [email protected]

Angular2 - getting-ready

Embed Size (px)

Citation preview

Page 1: Angular2 - getting-ready

Getting Ready for Angular2

NGULAR

[email protected]

Page 2: Angular2 - getting-ready

Nir Kaufman

AngularJS developer @ 500tech

[email protected]

we develop, consult & train AngularJS for startups & enterprises

Page 3: Angular2 - getting-ready

Angular2 is just around the corner

[email protected]

START HERE

Page 4: Angular2 - getting-ready

can we get ready today for the framework of tomorrow?

[email protected]

Page 5: Angular2 - getting-ready

Angular2 is a new framework not an update to 1.x

[email protected]

Page 6: Angular2 - getting-ready

migration to Angular2 will require significant refactoring

[email protected]

Page 7: Angular2 - getting-ready

is there anything we can do with our existing code that will make the

migration less painful?

[email protected]

Page 8: Angular2 - getting-ready

let’s take a working app and make it Angular2 ready

[email protected]

Page 9: Angular2 - getting-ready

we will use the todoMVC Angular version as our

example app

[email protected]

http://todomvc.com/

Page 10: Angular2 - getting-ready

CODE

https://github.com/nirkaufman/migration-to-angular2

http://tinyurl.com/qjt68mw

[email protected]

Page 11: Angular2 - getting-ready

quick overview of our application code

[email protected]

checkout step-0

Page 12: Angular2 - getting-ready

improve your code

[email protected]

1

Page 13: Angular2 - getting-ready

in the following examples we will treat our small app as

multi-component large one

[email protected]

Page 14: Angular2 - getting-ready

a well-written Angular code makes a good start

[email protected]

adapt common code style and conventions avoid using $scope as much as you can break your app into components prefer services over factories

checkout step-1

Page 15: Angular2 - getting-ready

upgrade to ES6

[email protected]

2

Page 16: Angular2 - getting-ready

[email protected]

integrate a compiler into the build system use ES6 modules for dependencies use the class syntax (and anything else..)

checkout step-2-modules

every modern framework / library is already there

checkout step-2-classes

Page 17: Angular2 - getting-ready

our example app is a one-component small app

[email protected]

checkout step-2-oneComponent

Page 18: Angular2 - getting-ready

stay tuned

[email protected]

3

Page 19: Angular2 - getting-ready

[email protected]

follow the documents on angular.io site play with the Angular2 developer preview learn ES6 first, take a look at TypeScript after. subscribe to Angular newsletters, blogs etc..

check out the resources.md

checkout step-3-links

learn today = less surprises tomorrow

Page 20: Angular2 - getting-ready

migrate to Angular2

[email protected]

4

Page 21: Angular2 - getting-ready

[email protected]

migration paths and hopefully some tools probably will be available.

if it possible, clone your app into a separate repository, and dive in…

checkout step-4

take advantage of Angular2 ASAP

Page 22: Angular2 - getting-ready

final thoughts

[email protected]

ENDSUMMARY

Page 23: Angular2 - getting-ready

[email protected]

Angular2 is gonna be awesome

Page 24: Angular2 - getting-ready

[email protected]

instead of being concerned about the migration day

Page 25: Angular2 - getting-ready

[email protected]

keep your current Angular code clean & up to date

Page 26: Angular2 - getting-ready

[email protected]

Thank you!Q&A