June 29, 2017 at CDK Global (Thank you!)


L: ?? (hang tight)

P: ??

6-6:30 Food & Networking

6:30-6:40 Phillip Kerman: Lightning Talk

6:45-7:15ish Tara M: IoT PWA IRL FTW (LOL)

All speakers and attendees agree to abide by the JSConf Code of Conduct. Be nice to each other - thanks!

Next month: Thursday, 7/27 at WeWork (Thanks Virtual Native!)

Huge thanks to Progress, Makers of KendoUI

Migrate All the Things

A (Very) Quick Primer

Sam Julien, Energy Trust of Oregon & Freelance



L: Angular_POR

P: ZGUhLr1r

Upgrading to Angular

  • Big Bang
  • ng-upgrade

Dual-Booting Core Concepts

  • "Hybrid mode"
  • "Upgrading" AngularJS pieces
  • "Downgrading" Angular pieces
  • Each bit is controlled by only one version
  • Root is always AngularJS
  • Some things must be re-written, like filters

Plague Concept

Steps to Migration

  1. Style Guide (must be SPA with separate files)
  2. TypeScript & Build Tools
  3. AngularJS 1.5+
  4. Component'ify
  5. ES6'ify
  6. Dual Boot
  7. Services to Angular
  8. Components to Angular
  9. Routing to Angular (always leave to the end)
  10. Remove AngularJS

Steps to Migration

2. TypeScript & Build Tools

Steps to Migration

2. TypeScript & Build Tools Webpack & ES6 Modules

Thoughts on Webpack

  • Build processes are hard.
  • Tasks (Grunt) vs. Streams (Gulp) vs. Bundles (Webpack)
  • ES6 modules are a big bang
  • Look at examples

4. Component-ify

  • Start with each route and work your way down

5. ES6-ify

  • Start with Services
  • Ditch $resource (use $http)
  • Ditch q (use Promise)
  • Fun stuff like let, const

6. Dual Boot

  • Remove ng-app
  • Add Angular
  • Boostrap in AppModule in main.ts
  • platformBrowserDynamic

7. Services to Angular

  • Bottom up upgrading and downgrading
  • downgradeInjectable
  • Deal with 3rd party modules
    • Re-write
    • Find
    • Upgrade

8. Components to Angular

  • Bottom up upgrading and downgrading
  • Just a grind like the ES6 modules...
  • ...but can be done iteratively

9. Routing to Angular

  • "Tiny pop"
  • Bootstrap with Angular
  • Angular Router

10. Remove AngularJS

  • Make sure to remove every single reference (e.g. rogue import statement)

11. Testing!?

  • No one seems to talk about this in talks.
  • Resources on the next slide.



ngPDX June 2017

By Sam Julien

ngPDX June 2017

Meetup info!

  • 521
Loading comments...

More from Sam Julien