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