Vuetify vs Svelte Material UI

When deciding which library to choose for building the interface of a new website, we may also consider whether we want to combine it with some UI toolkit library like Bootstrap or else. Using UI libraries allows us to significantly speed up the development of the user interface — hundreds of beautiful, well-designed components with rich functionality are here for us to use out of the box. But what price do we pay for using one of those?

Of course, the first drawback we stumble upon when using some UI kit is that it’s often hard to customise. Sure, we can change the component colours, fonts, and so on, but when it comes to expanding/editing the component behaviour or significant style change — we get into trouble. This problem is common for almost all UI libraries, and we already have a solution: many developers pick the middle way, meaning they use the components from the library everywhere where possible, and if they need a component with different behaviour or style, they create their own. This is kind of a golden mean, which I think is a good solution (as far as we don’t have any better alternative).

What should we pay attention to when selecting a UI kit? Of course, whether this project is well-developed and popular (popular libraries have large communities where anyone can get support), but also we should pay attention to the components themselves.

Talking about Vuetify and Svetle Material UI, the first one is a bit older, it has a bigger community and maybe a bit richer functionality for some components. While the second one is younger, which means it goes along with recent trends (and one of the main trends now is minimalism :)) and has a growing community. Svelte becomes more and more popular every day, and it looks like it may become a concurrent for Vue in a couple of years or even earlier, so it’s worth considering to use it in your project.

Let’s compare components in Vuetify and Svelte Material UI in terms of two things:

1. Simplicity

We all know that it is a good practice to keep the HTML structure as simple as possible. Let’s count how many nested components we find in a simple button with an icon:

In Vuetify:

<button
  type=”button”
  class=”mx-2 v-btn v-btn — is-elevated v-btn — fab v-btn — 
  has-bg v-btn — round theme — dark v-size — small primary”
>
  <span class=”v-btn__content”>
    <i aria-hidden=”true”
       class=”v-icon notranslate mdi mdi-minus theme — dark”
    ></i>
  </span>
</button>

In Svelte UI kit:

<button
  class=”material-icons mdc-icon-button
  mdc-ripple-upgraded — unbounded mdc-ripple-upgraded”
  style=” — mdc-ripple-fg-size: 28px; — 
  mdc-ripple-fg-scale: 1.71429; — mdc-ripple-left: 10px;
  — mdc-ripple-top: 10px;”
>
  build
</button>

You can see that in Vuetify we have a nested structure: button > span > icon, while in Svelte UI we have only a button tag, and all the magic is done using the ::before and ::after attributes. The same tendency is observed in other components. I believe the second approach is better, because the HTML structure is simpler and cleaner, and this means the rerender process is performed faster.

2. Accessibility

Accessibility is not only about caring for people with special needs — it’s about you and me. What if your mouse and touchpad suddenly get broken and you can use only the keyboard until you get it repaired? Or what if you are working on a sunny day outside and it’s hard to distinguish colours on the screen? Or maybe you once find yourself in a remote area with a poor internet connection, or maybe you had a vision correction surgery recently… We all may unexpectedly become people with special needs, even for a short time, but still we’d expect we’d be able to use websites without any struggles. And UI kit components are responsible for providing access for all people evenly.

Let’s check if we can use the modal window components in both libraries using only the keyboard. You can compare it yourself: go to those two pages and try to open the modal window using only your keyboard. If you’re using Chrome, try installing the Chrome screenreader plugin and check how it works with both components:

https://vuetifyjs.com/en/components/dialogs/#api
https://sveltematerialui.com/demo/dialog/

In case of Vuetify the screenreader is not able to read the text inside the modal window. All you can do is to open this modal window and click some button, not knowing what you’re accepting or denying.

In case of Svelte, you’ll hear a text inside the modal window. Also, this component has special attributes for improving the accessibility: role, aria-labelled-by and so on, which is good because it allows screenreader users to better understand what content are they interacting with.

You may say this is secondary and not so important, but what if your client once comes to you and asks to make a website fully accessible?

In conclusion, what I’m saying is that we as developers should pay attention to the details when choosing a UI toolkit. Don’t choose it because you know it better than others, or because your client has bought it and tells you to use it, or just because it’s widely used. Take into account the needs of each specific project, needs of its target audience, and make the website as accessible as possible.

By the way, have you tried Tailwind CSS? ;)