Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to migrate from
AngularJS
When you can’t use the
word “Big Bang”
?
How is this structured?
• Mental Model
• Plan
• Case Study
How is this structured?
https://github.com/codecraftpro/ang
ularjs-migration-workshop
How is this structured?
Who am I?
Asim Hussain
@jawache
asim@codecraft.tv
Angular:
From Theory to Practice
angular.codecraft.tv
Kickstarter Funded - FREE
angular.codecraft.tv — @jawache
Terminology
angular.codecraft.tv — @jawache
Angular = Angular 4+
angular.codecraft.tv — @jawache
AngularJS = Angular 1.x
angular.codecraft.tv — @jawache
Filters = Pipes
angular.codecraft.tv — @jawache
Controllers = Components
angular.codecraft.tv — @jawache
Directives + HTML = Components
angular.codecraft.tv — @jawache
Directives - HTML = Directives
angular.codecraft.tv — @jawache
Service/Factory = Service
angular.codecraft.tv — @jawache
Entity?
angular.codecraft.tv — @jawache
Angular is BLUE
AngularJS is RED
angular.codecraft.tv — @jawache
DEMO
ui-router
angular.codecraft.tv — @jawache
Mental Model
angular.codecraft.tv — @jawache
Dual Booting
angular.codecraft.tv — @jawache
Service
List
Card
Spinner
Resource
Edit
Create
Search
JS
angular.codecraft.tv — @jawache
Service
List
Card
Spinner
Resource
Edit
Create
Search
JS
4+
angular.codecraft.tv — @jawache
Service
List
Card
Spinner
Resource
Edit
Create
Search
JS
4+
angular.codecraft.tv — @jawache
Zones ➡ $scope.$apply(…)
angular.codecraft.tv — @jawache
Chameleon
angular.codecraft.tv — @jawache
List
List
AngularJS
Downgraded
Angular
Angular
Upgraded
AngularJS
List ⬆
List ⬇
Service ⬇
List
Edit
Service
angular.codecraft.tv — @jawache
Control Freak
angular.codecraft.tv — @jawache
<card>
<body>
<spinner>
<card>
<body>
<spinner>
<card> ⬇
<body>
<spinner>
<body>
<spinner> ⬆
<card> ⬇
Root Component is AngularJS
angular.codecraft.tv — @jawache
Plague
angular.codecraft.tv — @jawache
Service
List
Card
Spinner
Edit
Create
Search
JS
4+
Resource ⬇
Service ⬇
List
Card
Spinner
Edit
Create
Search
JS
4+
Resource
Service ⬇
List
Card ⬇
Spinner
Edit
Create
Search
JS
4+
Resource
Service ⬇
List
Card ⬇
Spinner ⬇
Edit
Create
Search
JS
4+
Resource
Service ⬇
List ⬇
Card
Spinner
Edit
Create
Search
JS
4+
Resource
Service
List ⬇
Card
Spinner
Edit ⬇
Create ⬇
Search ⬇
JS
4+
Resource
Service
List
Card
Spinner
Edit
Create
Search
4+
Resource
But…
• Filters
• (some) Directives
10 Step Plan
angular.codecraft.tv — @jawache
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual Boot
7. Services to Angul...
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual Boot
7. Services to Angul...
Top Tips!
Start with the Router
angular.codecraft.tv — @jawache
CODE!
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual Boot
7. Services to Angul...
Top Tips!
Start with the Service/Factories
angular.codecraft.tv — @jawache
$resource use $http
angular.codecraft.tv — @jawache
.factory(..) use .service(..)
angular.codecraft.tv — @jawache
$q use Promise
angular.codecraft.tv — @jawache
angular.forEach use for…of
angular.codecraft.tv — @jawache
CODE!
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual Boot
7. Services to Angul...
Service
List
Card
Spinner
Resource
Edit
Create
Search
JS
angular.codecraft.tv — @jawache
Service
List
Card
Spinner
Resource
Edit
Create
Search
JS
4+
angular.codecraft.tv — @jawache
Top Tips!
Remove ng-app
angular.codecraft.tv — @jawache
CODE!
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual Boot
7. Services to Angul...
Service ⬇
List
Card
Spinner
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
Top Tips!
• Re-write
• Find
• Upgrade
angular.codecraft.tv — @jawache
CODE!
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual Boot
7. Services to Angul...
Service ⬇
List
Card ⬇
Spinner ⬇
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
Service ⬇
List ⬇
Card
Spinner
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
Service ⬇
List ⬇
Card
Spinner
Edit ⬇
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
CODE!
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual Boot
7. Services to Angul...
Tiny Pop
• Bootstrap with Angular
• Angular Router
angular.codecraft.tv — @jawache
CODE!
1. Style guide
2. TypeScript & build tools
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Dual boot
7. Services to Angul...
Service
List
Card
Spinner
Edit
Create
Search
4+
Resource
angular.codecraft.tv — @jawache
Finished
Questions?
asim@codecraft.tv
@jawache
github.com/jawache/ama
Migrating from AngularJS when you can't use the word "Big Bang@
Migrating from AngularJS when you can't use the word "Big Bang@
Upcoming SlideShare
Loading in …5
×

Migrating from AngularJS when you can't use the word "Big Bang@

1,378 views

Published on

According to builtwith.com over 400,000 Angular 1 apps have been created and released into the wild. Moving to Angular 4 is a daunting prospect.

Most content online talks about how to migrate from 1 to 2 or 4 in a “big bang” approach. When your product processes millions every day, using the word “big bang” doesn’t engender a lot of support from senior managers or stakeholders.

In this talk, I’ll go through a real Angular 1 application and upgrade it “iteratively” to Angular 4. By the end, the Audience will have a step by step roadmap for how to upgrade.

Published in: Technology
  • Be the first to comment

Migrating from AngularJS when you can't use the word "Big Bang@

  1. 1. How to migrate from AngularJS
  2. 2. When you can’t use the word “Big Bang”
  3. 3. ?
  4. 4. How is this structured?
  5. 5. • Mental Model • Plan • Case Study How is this structured?
  6. 6. https://github.com/codecraftpro/ang ularjs-migration-workshop How is this structured?
  7. 7. Who am I?
  8. 8. Asim Hussain @jawache asim@codecraft.tv
  9. 9. Angular: From Theory to Practice angular.codecraft.tv Kickstarter Funded - FREE angular.codecraft.tv — @jawache
  10. 10. Terminology angular.codecraft.tv — @jawache
  11. 11. Angular = Angular 4+ angular.codecraft.tv — @jawache
  12. 12. AngularJS = Angular 1.x angular.codecraft.tv — @jawache
  13. 13. Filters = Pipes angular.codecraft.tv — @jawache
  14. 14. Controllers = Components angular.codecraft.tv — @jawache
  15. 15. Directives + HTML = Components angular.codecraft.tv — @jawache
  16. 16. Directives - HTML = Directives angular.codecraft.tv — @jawache
  17. 17. Service/Factory = Service angular.codecraft.tv — @jawache
  18. 18. Entity? angular.codecraft.tv — @jawache
  19. 19. Angular is BLUE AngularJS is RED angular.codecraft.tv — @jawache
  20. 20. DEMO
  21. 21. ui-router angular.codecraft.tv — @jawache
  22. 22. Mental Model angular.codecraft.tv — @jawache
  23. 23. Dual Booting angular.codecraft.tv — @jawache
  24. 24. Service List Card Spinner Resource Edit Create Search JS angular.codecraft.tv — @jawache
  25. 25. Service List Card Spinner Resource Edit Create Search JS 4+ angular.codecraft.tv — @jawache
  26. 26. Service List Card Spinner Resource Edit Create Search JS 4+ angular.codecraft.tv — @jawache
  27. 27. Zones ➡ $scope.$apply(…) angular.codecraft.tv — @jawache
  28. 28. Chameleon angular.codecraft.tv — @jawache
  29. 29. List List AngularJS Downgraded Angular Angular Upgraded AngularJS List ⬆ List ⬇
  30. 30. Service ⬇ List Edit Service angular.codecraft.tv — @jawache
  31. 31. Control Freak angular.codecraft.tv — @jawache
  32. 32. <card> <body> <spinner>
  33. 33. <card> <body> <spinner>
  34. 34. <card> ⬇ <body> <spinner>
  35. 35. <body> <spinner> ⬆ <card> ⬇
  36. 36. Root Component is AngularJS angular.codecraft.tv — @jawache
  37. 37. Plague angular.codecraft.tv — @jawache
  38. 38. Service List Card Spinner Edit Create Search JS 4+ Resource ⬇
  39. 39. Service ⬇ List Card Spinner Edit Create Search JS 4+ Resource
  40. 40. Service ⬇ List Card ⬇ Spinner Edit Create Search JS 4+ Resource
  41. 41. Service ⬇ List Card ⬇ Spinner ⬇ Edit Create Search JS 4+ Resource
  42. 42. Service ⬇ List ⬇ Card Spinner Edit Create Search JS 4+ Resource
  43. 43. Service List ⬇ Card Spinner Edit ⬇ Create ⬇ Search ⬇ JS 4+ Resource
  44. 44. Service List Card Spinner Edit Create Search 4+ Resource
  45. 45. But…
  46. 46. • Filters • (some) Directives
  47. 47. 10 Step Plan angular.codecraft.tv — @jawache
  48. 48. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  49. 49. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  50. 50. Top Tips!
  51. 51. Start with the Router angular.codecraft.tv — @jawache
  52. 52. CODE!
  53. 53. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  54. 54. Top Tips!
  55. 55. Start with the Service/Factories angular.codecraft.tv — @jawache
  56. 56. $resource use $http angular.codecraft.tv — @jawache
  57. 57. .factory(..) use .service(..) angular.codecraft.tv — @jawache
  58. 58. $q use Promise angular.codecraft.tv — @jawache
  59. 59. angular.forEach use for…of angular.codecraft.tv — @jawache
  60. 60. CODE!
  61. 61. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  62. 62. Service List Card Spinner Resource Edit Create Search JS angular.codecraft.tv — @jawache
  63. 63. Service List Card Spinner Resource Edit Create Search JS 4+ angular.codecraft.tv — @jawache
  64. 64. Top Tips!
  65. 65. Remove ng-app angular.codecraft.tv — @jawache
  66. 66. CODE!
  67. 67. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  68. 68. Service ⬇ List Card Spinner Edit Create Search JS 4+ Resource angular.codecraft.tv — @jawache
  69. 69. Top Tips!
  70. 70. • Re-write • Find • Upgrade angular.codecraft.tv — @jawache
  71. 71. CODE!
  72. 72. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  73. 73. Service ⬇ List Card ⬇ Spinner ⬇ Edit Create Search JS 4+ Resource angular.codecraft.tv — @jawache
  74. 74. Service ⬇ List ⬇ Card Spinner Edit Create Search JS 4+ Resource angular.codecraft.tv — @jawache
  75. 75. Service ⬇ List ⬇ Card Spinner Edit ⬇ Create Search JS 4+ Resource angular.codecraft.tv — @jawache
  76. 76. CODE!
  77. 77. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  78. 78. Tiny Pop
  79. 79. • Bootstrap with Angular • Angular Router angular.codecraft.tv — @jawache
  80. 80. CODE!
  81. 81. 1. Style guide 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 10.Remove AngularJS angular.codecraft.tv — @jawache
  82. 82. Service List Card Spinner Edit Create Search 4+ Resource angular.codecraft.tv — @jawache
  83. 83. Finished
  84. 84. Questions? asim@codecraft.tv @jawache github.com/jawache/ama

×