Migrating to Angular

Fullstack as a

service

Ran Wahle

Migrating to Angular

A little about me

• Javascript developer @Tikal• Front-end developer @SentinelOne • Arabic speaking Ashkenazi• People often get my last name mistaken

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

But, what made them take this bold decision?

• Performance• Long term delivery• Keeping your developers happy

Unless you want to

At the end we should have

• One, angular app,• contains all features previously developed• The code needs to be entirely rewritten

While doing so we

● Must have one site

● Mid-stage production should have both old and new

code

● New features needs to be developed

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

Pros

• One application• Good user experience

Cons

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

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

Pros

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

Cons

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

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

Things to take care of

• Look & fill should be (almost) identical• Security process• URL referencing

Security

• Make sure both applications get the same authentication method

• Authentication token must be kept at the same place

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`

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

And the whale returns to the sea

THANK YOUTHANK YOU

Ran Wahle

ranw@tikalk.com

ranwahle@