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.
bullet proof
migration
angular.codecraft.tv — @jawache
• ngUpgrade overview
• why migrations fail
• solution
agenda
angular.codecraft.tv — @jawache
Asim Hussain
@jawache
codecraft.tv
microsoft.com
ngUpgrade
overview
angular.codecraft.tv — @jawache
Angular is BLUE
AngularJS is RED
angular.codecraft.tv — @jawache
Service
List
Card
Spinner
Resource
Edit
Create
Search
JS
5+
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
5+
Resource
Service
List
Card
Spinner
Edit
Create
Search
5+
Resource
why
migrations
failangular.codecraft.tv — @jawache
• other baggage
• clean house
why migrations fail
angular.codecraft.tv — @jawache
other
baggage
angular.codecraft.tv — @jawache
@jawache
other baggage
JS 5+
@jawache
JS 5+
other baggage
@jawache
JS
5+
2.3.2
2.3.2
other baggage
@jawache
JS
5+
2.3.2
other baggage
@jawache
JS
5+4
4
other baggage
@jawache
JS
5+4
2.3.2
other baggage
clean house
angular.codecraft.tv — @jawache
good architecture
bad architecture
clean house
angular.codecraft.tv — @jawache
good architecture
bad architecture
clean house
angular.codecraft.tv — @jawache
angular.codecraft.tv — @jawache
solution
angular.codecraft.tv — @jawache
Angular Angular | AngularJS
AngularJS
iframe
angular.codecraft.tv — @jawache
angular.codecraft.tv — @jawache
@jawache
@jawache
JS 5+
solution
• route ownership
• shared state
core concepts
angular.codecraft.tv — @jawache
route
ownership
angular.codecraft.tv — @jawache
/
/page/1
/page/2
/page/3
/page/4
/page/5
route ownership
angular.codecraft.tv — @jawache
JS
JS
JS
JS
JS
JS
/
/page/1
/page/2
/page/3
/page/4
/page/5
route ownership
angular.codecraft.tv — @jawache
5+
JS
JS
JS
JS
JS
/
/page/1
/page/2
/page/3
/page/4
/page/5
route ownership
angular.codecraft.tv — @jawache
5+
5+
JS
JS
JS
JS
/
/page/1
/page/2
/page/3
/page/4
/page/5
route ownership
angular.codecraft.tv — @jawache
5+
5+
5+
JS
JS
JS
/
/page/1
/page/2
/page/3
/page/4
/page/5
route ownership
angular.codecraft.tv — @jawache
5+
5+
5+
5+
5+
5+
@jawache
/
/page/1
/page/2
/page/3
/page/4
/page/5
AngularJS -> AngularJS
angular.codecraft.tv — @jawache
5+
5+
5+
JS
JS
JS
AngularJS -> AngularJS
/
/page/1
/page/2
/page/3
/page/4
/page/5
Angular -> Angular
angular.codecraft.tv — @jawache
5+
5+
5+
JS
JS
JS
Angular -> Angular
/
/page/1
/page/2
/page/3
/page/4
/page/5
Angular -> AngularJS
angular.codecraft.tv — @jawache
5+
5+
5+
JS
JS
JS
CODE
@jawache
app.routes.ts
angular.codecraft.tv — @jawache
iframe.component.html
angular.codecraft.tv — @jawache
iframe.component.css
angular.codecraft.tv — @jawache
iframe.component.ts
angular.codecraft.tv — @jawache
Angular -> AngularJS
/
/page/1
/page/2
/page/3
/page/4
/page/5
angular.codecraft.tv — @jawache
5+
5+
5+
JS
JS
JS
CODE
@jawache
app.routes.ts
angular.codecraft.tv — @jawache
iframe.component.ts
angular.codecraft.tv — @jawache
AngularJS -> Angular
shared
state
angular.codecraft.tv — @jawache
foo.azurewebsites.net
foo.azurewebsites.net/legacy/
shared state
angular.codecraft.tv — @jawache
CODE
angular.codecraft.tv — @jawache
counter.controller.js
angular.codecraft.tv — @jawache
counter.component.ts
angular.codecraft.tv — @jawache
summary
@jawache
• other baggage & clean house
• iframes baggage clean house
• use with other framworks!
summary
angular.codecraft.tv — @ja...
more info
https://codecraft.tv/blog/2017/09/07/angularjs-to-angular-using-iframes/
Asim Hussain
@jawache
codecraft.tv
microsoft.com
Azure App Services
https://aka.ms/azure-app-service-docs
Bullet Proof Migration using IFrames
https://codecraft.tv/blog/20...
Upcoming SlideShare
Loading in …5
×

From Donkey To Unicorn: An Alternative Approach to AngularJS Migration

234 views

Published on

According to builtwith.com over 400,000 AngularJS apps have been created and released into the wild. In this talk I'll present a new migration approach. One that works for even the most complex and challenging legacy AngularJS applications. One that works even if your AngularJS code is not up to todays standards.

One that works even if you are not already an SPA. One that works when you are migrating a number of other legacy libraries at the same time you are migrating AngularJS. If you have already tried migrating your existing AngularJS application and hit a brick wall, or are overwhelmed with the number of changes you'll have to make to your existing AngularJS app to even begin the process of migration, then this talk is for you.

Published in: Technology
  • Be the first to comment

From Donkey To Unicorn: An Alternative Approach to AngularJS Migration

  1. 1. bullet proof migration angular.codecraft.tv — @jawache
  2. 2. • ngUpgrade overview • why migrations fail • solution agenda angular.codecraft.tv — @jawache
  3. 3. Asim Hussain @jawache codecraft.tv microsoft.com
  4. 4. ngUpgrade overview angular.codecraft.tv — @jawache
  5. 5. Angular is BLUE AngularJS is RED angular.codecraft.tv — @jawache
  6. 6. Service List Card Spinner Resource Edit Create Search JS 5+ angular.codecraft.tv — @jawache
  7. 7. Service List Card Spinner Edit Create Search JS 4+ Resource
  8. 8. Service List Card Spinner Edit Create Search JS 4+ Resource
  9. 9. Service List Card Spinner Edit Create Search JS 5+ Resource
  10. 10. Service List Card Spinner Edit Create Search 5+ Resource
  11. 11. why migrations failangular.codecraft.tv — @jawache
  12. 12. • other baggage • clean house why migrations fail angular.codecraft.tv — @jawache
  13. 13. other baggage angular.codecraft.tv — @jawache
  14. 14. @jawache other baggage JS 5+
  15. 15. @jawache JS 5+ other baggage
  16. 16. @jawache JS 5+ 2.3.2 2.3.2 other baggage
  17. 17. @jawache JS 5+ 2.3.2 other baggage
  18. 18. @jawache JS 5+4 4 other baggage
  19. 19. @jawache JS 5+4 2.3.2 other baggage
  20. 20. clean house angular.codecraft.tv — @jawache
  21. 21. good architecture bad architecture clean house angular.codecraft.tv — @jawache
  22. 22. good architecture bad architecture clean house angular.codecraft.tv — @jawache
  23. 23. angular.codecraft.tv — @jawache
  24. 24. solution angular.codecraft.tv — @jawache
  25. 25. Angular Angular | AngularJS AngularJS iframe angular.codecraft.tv — @jawache
  26. 26. angular.codecraft.tv — @jawache
  27. 27. @jawache
  28. 28. @jawache JS 5+ solution
  29. 29. • route ownership • shared state core concepts angular.codecraft.tv — @jawache
  30. 30. route ownership angular.codecraft.tv — @jawache
  31. 31. / /page/1 /page/2 /page/3 /page/4 /page/5 route ownership angular.codecraft.tv — @jawache JS JS JS JS JS JS
  32. 32. / /page/1 /page/2 /page/3 /page/4 /page/5 route ownership angular.codecraft.tv — @jawache 5+ JS JS JS JS JS
  33. 33. / /page/1 /page/2 /page/3 /page/4 /page/5 route ownership angular.codecraft.tv — @jawache 5+ 5+ JS JS JS JS
  34. 34. / /page/1 /page/2 /page/3 /page/4 /page/5 route ownership angular.codecraft.tv — @jawache 5+ 5+ 5+ JS JS JS
  35. 35. / /page/1 /page/2 /page/3 /page/4 /page/5 route ownership angular.codecraft.tv — @jawache 5+ 5+ 5+ 5+ 5+ 5+
  36. 36. @jawache
  37. 37. / /page/1 /page/2 /page/3 /page/4 /page/5 AngularJS -> AngularJS angular.codecraft.tv — @jawache 5+ 5+ 5+ JS JS JS
  38. 38. AngularJS -> AngularJS
  39. 39. / /page/1 /page/2 /page/3 /page/4 /page/5 Angular -> Angular angular.codecraft.tv — @jawache 5+ 5+ 5+ JS JS JS
  40. 40. Angular -> Angular
  41. 41. / /page/1 /page/2 /page/3 /page/4 /page/5 Angular -> AngularJS angular.codecraft.tv — @jawache 5+ 5+ 5+ JS JS JS
  42. 42. CODE @jawache
  43. 43. app.routes.ts angular.codecraft.tv — @jawache
  44. 44. iframe.component.html angular.codecraft.tv — @jawache
  45. 45. iframe.component.css angular.codecraft.tv — @jawache
  46. 46. iframe.component.ts angular.codecraft.tv — @jawache
  47. 47. Angular -> AngularJS
  48. 48. / /page/1 /page/2 /page/3 /page/4 /page/5 angular.codecraft.tv — @jawache 5+ 5+ 5+ JS JS JS
  49. 49. CODE @jawache
  50. 50. app.routes.ts angular.codecraft.tv — @jawache
  51. 51. iframe.component.ts angular.codecraft.tv — @jawache
  52. 52. AngularJS -> Angular
  53. 53. shared state angular.codecraft.tv — @jawache
  54. 54. foo.azurewebsites.net foo.azurewebsites.net/legacy/ shared state angular.codecraft.tv — @jawache
  55. 55. CODE angular.codecraft.tv — @jawache
  56. 56. counter.controller.js angular.codecraft.tv — @jawache
  57. 57. counter.component.ts angular.codecraft.tv — @jawache
  58. 58. summary @jawache
  59. 59. • other baggage & clean house • iframes baggage clean house • use with other framworks! summary angular.codecraft.tv — @jawache
  60. 60. more info https://codecraft.tv/blog/2017/09/07/angularjs-to-angular-using-iframes/
  61. 61. Asim Hussain @jawache codecraft.tv microsoft.com
  62. 62. Azure App Services https://aka.ms/azure-app-service-docs Bullet Proof Migration using IFrames https://codecraft.tv/blog/2017/09/07/angularjs-to-angular-using-iframes/ Demo http://alt-angularjs-migration-using-iframes-demo.azurewebsites.net/ Source Code https://github.com/jawache/alt-angularjs-migration-using-iframes-demo Links

×