ngPDX

May 17, 2017 at CDK Global (Thanks!)

Network: CDKGUEST

L: Angular_POR

P: ZGUhLr1r

5-5:30 Food & Networking

5:30-5:40 Sam Julien Lightning Talk

5:45-7 ng-upgrade Hacking

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

https://github.com/codecraftpro/angularjs-migration-workshop

Next month: Thursday, 6/29 starring Tara from KendoUI

Migrate All the Things

A (Very) Quick Primer

Sam Julien, Energy Trust of Oregon & Freelance

WiFi

Network: CDKGUEST

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.

Resources

Thanks!

ngPDX May 2017

By Sam Julien

ngPDX May 2017

Meetup info & my lightning talk on the ng-upgrade process based on Asim Hussain's "plague" concept.

  • 135
Loading comments...

More from Sam Julien