Angular migration experience, from Angular-IL meetup. Our story about on-going migration from angularJs to Angulat

1. Migrating to Angular
Fullstack as a
service
Ran Wahle

2. Migrating to
Angular

3. A little about me
• Javascript developer @Tikal
• Front-end developer @SentinelOne
• Arabic speaking Ashkenazi
• People often get my last name mistaken

4. 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

5. But, what made them take this bold
decision?
• Performance
• Long term delivery
• Keeping your developers happy

6. Unless you want to

7. At the end we should have
• One, angular app,
• contains all features previously developed
• The code needs to be entirely rewritten

8. While doing so we
● Must have one site
● Mid-stage production should have both old and new
code
● New features needs to be developed

9. 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

10. Pros
• One application
• Good user experience

11. Cons
• Lot’s of refactoring could lead to lot’s of bugs
• Poor delivery on the short term
• Code could get messy

12. 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

13. Pros
• Clean code on the new app
• Opportunity to redesign
• Nicer context switches

14. Cons
• Poor user experience
• Double coding (is it really a downside?)

15. 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 nginx
End up with the
angular app

16. Things to take care of
• Look & fill should be (almost) identical
• Security process
• URL referencing

17. Security
• Make sure both applications get the same
authentication method
• Authentication token must be kept at the
same place

18. 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`

19. 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

20. And the whale returns to the sea

21. THANK YOU
THANK YOU
Ran Wahle
ranw@tikalk.com
ranwahle@