Migration from Angular.js to Vue

Background to the story

Migrating to Vue definitely deserves a clap

Who is the company

Cyber security leader

Motivation

• Google stopped supporting the version of Angular our application ran on
• Implementing the company approved UX style guide (which was not present when the app was first built)
• Redesigning screens in close collaboration with our UX partners and utilizing design best practices
• Removing features and code users weren’t using
• Better performance
• Many more...

What is the product

• Built with material UI

• 10s of pages

• About 100 components

• Cyber security dashboard application

• Desktop solution only

Constrains

• Incremental migration

• Both old and new components live together for some while

• The design needs to be consistent while the transition happens

What options did I have to choose from

Quasar

Vuetify

Not using any framework

Not using any framework?

When you should use a framework

Tradeoffs

Use framework costs:
 

• learning it
   
• customizing it to fit your needs (i.e. using it)
   
• maintaining it over time (upgrades)
   
• diving deep when there are bugs (you have to crack it open eventually)

Tradeoffs

Working from scratch costs:
 

• building it (instead of learning and customizing)
   
• refactoring (instead of customizing)
   
• solving bugs the first time (which others have already found and fixed in their respective frameworks)

I choose

Vuetify not suitable for our needs

After some time we found out

Our design team built a design system that is not strictly following Material Design rules

Vuetify override system didn't have enough parameters to let us customize the design for our needs

Example

Text

How radio button implemented in Vuetify

How radio button implemented in Material design

Why do you think that you always need UI framework?

How many times have you wanted to customize your buttons using the UI frameworks?

• you need to find all needed variables in the .scss files

• you will probably need to overwrite some styles because they don’t have the variables for that

• you need to create some custom variables for your custom button

• all variables are unreadable because you have some overwrites from the framework and some of your custom ones

Vuetify is great!

Don't get me wrong

I successfully used Vuetify for several previous projects

what alternative did I choose?

Gradually remove Vuetify components and dependencies

Write custom components and manage them with Storybook

Use standalone Material components when needed

What is Tailwind CSS?

Takeaways