Choosing Vuetify was a mistake

About me

Dima Vishnevetsky

Front-end Architect

Media Developer Expert - Cloudinary

#HackathonMentor

VueJS Israel Co-Organizer

Public speaker

UX / UI Designer

Consultant

 Lecturer

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?

  • Speed - Faster development

When you should use a framework

  • Design - Design system is already implemented
  • Best practice - Better for junior/mid-level developers

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

BUT

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

Don't insist on stuff just because the industry recommends it. 

Always question every decision.

 Fail quickly.

questions and answers

Thank you

Add GIF

Choosing Vuetify was a mistake

By Dima Vishnevetsky

Choosing Vuetify was a mistake

  • 650