from angular to angular 2 via the upgradeadapter

Whoami?

• Tony May @_tonymay• Founded my own agency to act as a technical co-

founder for startups (Primary stack ng1 + ng-material + ionic)

• Some corporate consulting Like William Hill (a crazy hybrid 50% iOS + 50% ionic = 110% awesome)

• Currently working at identitii – startup working on blockchain (Ethereum) POCs for correspondent banks (Ng1/2 + Ng Material, Node & Golang)

From Ng1 to Ng2 (and beyond)

• Step 1: Javascript -> Typescript• Step 2: Grunt/Gulp -> Webpack• Step 3: Ng2 Bootstrapping• Step 4: Decide on Strategy

(inside out vs outside in)• Step 5: Optimise + Minimise

A note on comparisons

False dichotomy: a logical fallacy which involves presenting two opposing views, options or outcomes in such a way that they seem to be the only possibilities: that is, if one is true, the other must be false, or, more typically, if you do not accept one then the other must be accepted. The reality in most cases is that there are many in-between or other alternative options, not just two mutually exclusive ones.

Steps to implement

• tsconfig• npm • typings for existing

dependencies

• choose your output directory

• rename *.js -> *.ts • sudo rm -rf /

Step 1: Javascript -> Typescript Why: It’s a SUPERset ;-) of javascriptWhy: Interfaces are awesome (refactor like a boss)

To ng2 (beyond)



Primarily: A different philosophy

Angular• .config()• .decorate()• .$broadcast

Angular 2• Pre-compile via packager• Pre-compile via packager• RXJS LIKE A BOSS!

Step 2: Bower -> NpmWhy: does everything bower does + moreWhy: Seems like everyone is now on-board the npm train

Build Pipeline

Angular1. Packages: Bower2. Build: Grunt/Gulp3. Javascript4. JSLint5. Write Code6. Package7. Optimise/Minimise

Angular 21. Packages: Npm2. Build: Webpack3. Typescript4. Typings5. Package/Transpile6. Write Code7. Optimise/Minimise

Angular1 with Angular2 Angular2 with Angular1

Summary

• ForwardRef is necessary, and you will have a big pita if you try and use export with the Upgrade Adapter

• The debugging is sometimes tricky, especially when you have multiple frameworks nested

• The Ng1 & Ng2 types are IN THE METHOD NAME!!

• app(‘main’).factory(‘blah’, downgradeNg2Provider(Ng2Provider))

To ng2 (beyond)



I Can Has?

• Ng1 with Ng2 children? Yes• Ng2 with Ng1 children? Yes• Ng1 with Ng2 children, with Ng1 children?

Probably not• Ng2 with Ng1 children, with Ng2 children?

Probably not• $broadcast? Hell no, use observables!!

Main Component

(w router)

Search View Detail View

ButtonPredictive Search Menu

Hero Provider

Example Application Structure

Main Component

(w router)



Hero Provider

Outside In Upgrade2

3

1

Main Component

(w router)



Hero Provider

Inside Out Upgrade

32

1

Mistakes, I had had my few

• Tried outside in to start, with my angular material Ng1 app, OMG, DO NOT DO THIS. When I first tried this, it was not rendering, not giving a console message, so I had use the force to debug

• Didn’t know about observables so I implemented ng-redux to replace a component that relied on $rootScope.$broadcast :-P and had to change everything back once I worked out observables

• Thinking you could just “drop in” Angular 1 components, I wish it was that simple.

To Ng2 (and beyond)



Out of TIME!• Basically, the new html syntax can have some issues with webpack 2 beta gulification,

uguficaltoin, uglification. I’ve found that webpack 1 is currently better because you get a smaller bundle size, and better transpile support (espeically if you use Google Closure Compilier)

• You get the best result if you cherry pick the includes, (e.g. // Only import the rxjs bits that you needimport 'rxjs/Observable’;import 'rxjs/add/operator/toPromise’;import 'rxjs/add/operator/map’;import 'rxjs/Subject’;import 'rxjs/BehaviorSubject’;

) then rely on the CommonsChunk webpack plugin to… well.. chunk the common libraries.

• Final size is super important, imho you will need to include Ng2+Rx (~140kB min+compress) Ng1 (~50kB min+compress) + other libraries so you need to get the final bundle as small as possible.

• I’ll post some code examples of each step on github, on Friday!• Join the telegram group, I’m happy to answer any questions you have!

https://telegram.me/joinchat/DhJ-lgmRdB-mkBh5Nk6GHQ



from angular to angular 2 via the upgradeadapter

Technology