ngPDX
July 27, 2017 at WeWork (Thank you!)
Wifi: WWGuest (open)
Hangout: https://www.youtube.com/watch?v=kEbVy7nqVzE
Bathrooms down the hall.
6-6:20 Beverages & Hanging Out
6:20-6:45 Welcome, Sponsor, & Survey Time!
7-7:40 Jeff Whelpley - The State of Angular
All speakers and attendees agree to abide by the JSConf Code of Conduct. Be nice to each other - thanks!
Next month: Wednesday, 8/23 at ???
Sponsored by Virtual Native
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
- Style Guide (must be SPA with separate files)
- TypeScript & Build Tools
- AngularJS 1.5+
- Component'ify
- ES6'ify
- Dual Boot
- Services to Angular
- Components to Angular
- Routing to Angular (always leave to the end)
- 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
- Official Upgrade Docs
- ng-conf 2017 talks:
- When You Can't Use the Word "Big Bang"
- Addicted to AngularJS? (Succinct Overview)
- Pluralsight Course on Migration
- AngularJS-Webpack Example Config
- Webpack Documentation
- Webpack: The Core Concepts (Larkin @ ngVikings)
- Angular Testing Guide by Gerard Sans
- Angular Unit Testing by Asim Hussain
Thanks!
ngPDX July 2017
By Sam Julien
ngPDX July 2017
Meetup info!
- 809