angular migration
TRANSCRIPT
![Page 1: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/1.jpg)
Migrating to Angular
Fullstack as a
service
Ran Wahle
![Page 2: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/2.jpg)
Migrating to Angular
![Page 3: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/3.jpg)
A little about me
• Javascript developer @Tikal• Front-end developer @SentinelOne • Arabic speaking Ashkenazi• People often get my last name mistaken
![Page 4: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/4.jpg)
You have to be bold to migrate
• It is not a migration, it is a rewrite• You have a rather large project • You will deliver less at the short term
![Page 5: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/5.jpg)
But, what made them take this bold decision?
• Performance• Long term delivery• Keeping your developers happy
![Page 6: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/6.jpg)
Unless you want to
![Page 7: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/7.jpg)
At the end we should have
• One, angular app,• contains all features previously developed• The code needs to be entirely rewritten
![Page 8: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/8.jpg)
While doing so we
● Must have one site
● Mid-stage production should have both old and new
code
● New features needs to be developed
![Page 9: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/9.jpg)
Official solution (NgUpgrade)
● Lots of prerarations
Use module loader Refactor almost all of our code
● It is one hybrid application
User experience almost won’t be compromised
![Page 10: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/10.jpg)
Pros
• One application• Good user experience
![Page 11: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/11.jpg)
Cons
• Lot’s of refactoring could lead to lot’s of bugs• Poor delivery on the short term• Code could get messy
![Page 12: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/12.jpg)
Two applications on the same site
• Independent new application
• Share the same cookies / storage with the old app
• Using a reverse proxy in front of them
![Page 13: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/13.jpg)
Pros
• Clean code on the new app• Opportunity to redesign• Nicer context switches
![Page 14: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/14.jpg)
Cons
• Poor user experience• Double coding (is it really a downside?)
![Page 15: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/15.jpg)
The process we’re doing
Start new
application
Rewrite features in the
new application
Maintain & develop
the old one while
removing features
Put them on the same
site with nginxEnd up with the
angular app
![Page 16: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/16.jpg)
Things to take care of
• Look & fill should be (almost) identical• Security process• URL referencing
![Page 17: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/17.jpg)
Security
• Make sure both applications get the same authentication method
• Authentication token must be kept at the same place
![Page 18: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/18.jpg)
URL referencing
const API_ADDRESS = `${window.location.pathname}base_api_url`
• HTML5 history pushstate• Static assets references that people got away
with`../../../../../../images/sprite.png`
or `/images/sprite.png`
![Page 19: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/19.jpg)
Summary
• Migration is a bold decision to take • It eventually becomes a must• NgUpgrade has huge user-experience
advantage• It may cause the code to get messy
![Page 20: Angular migration](https://reader031.vdocuments.site/reader031/viewer/2022021815/5a6654a87f8b9a44398b4917/html5/thumbnails/20.jpg)
And the whale returns to the sea