@escapedcat

hi, i'm hannes

• working with Vue.js for 1.5 years
• currently in a team working on a product

@escapedcat

Vuetify

@escapedcat

the product

• backoffice webapp

• not for endusers

• to support clients managaing products/customers

  • by providing interface

  • special actions for daily tasks

@escapedcat

design requirements: none

• no client CI or design

• change colors/logo

• UX first

• use components framework

  • i.e. bootstrap, buefy (bulma + vue), ...

  • decision: vuetify

https://buefy.github.io

https://bootstrap-vue.js.org

@escapedcat

        material design

@escapedcat

what is material design?

... is a design system – backed by open-source code – that helps teams build digital experiences

https://material.io/

it's from google

@escapedcat

guidelines

https://material.io/

@escapedcat

in the real world

https://material.io/

@escapedcat

but...

By using it, you of course get a decent design that works technically quite well. But you don’t get a personal experience that lasts or even targets people on a personal level.

https://wdrl.info/archive/249

@helloanselm

@escapedcat

     vuetify

@escapedcat

what is vuetify?

... is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze

https://github.com/vuetifyjs/vuetify#introduction

@escapedcat

history

https://material.io/archive/guidelines/material-design/whats-new.html#whats-new-previous-updates

2015

2019

2016

2017

2018

v1

v2

@escapedcat

80+ components

https://vuetifyjs.com/en/getting-started/quick-start

@escapedcat

morrr components

https://vuetifyjs.com/en/getting-started/quick-start

@escapedcat

grid

https://vuetifyjs.com/en/getting-started/quick-start

@escapedcat

go through docs and show things

stats

• vuetify was started in 2016 by John Leider @zeroskillz
• after serveral alpha/betas by now has reached version 1.3.9
• is quite popular AKA look at all ze stats!!!

https://github.com/vuetifyjs/vuetify

@escapedcat

people stats

• 186 patrons on patreon
• 8 paying 100-500 usd per month
• 3 core devs (excluding John)

https://github.com/vuetifyjs/vuetify/blob/dev/BACKERS.md

@escapedcat

the good

• looks good without writing any css
  • so js only devs can use it :P
• basic default functionalities are build in
  • i.e. pagination, sorting, dialogs, ...
• awesome documentation
  • great structure
  • code examples

@escapedcat

the bad

• modify more than just the theme/colors
  (it might get tricky and may break updating)
• some popular components still missing
  (i.e. btn group, upload)

@escapedcat

the future (2.0)

new components, i.e.

• Sparkline charts
• File upload
• Overlay
• Gallery
• Calendar

https://slides.com/johnjleider/vuetify-2

@escapedcat

morrrrr future (2.0)

• full RTL support
• treeshaking
• weekly patches
• reduce component fragmentation
• typescript
• stylus -> SCSS
• vuex modules for notifications

https://slides.com/johnjleider/vuetify-2

@escapedcat

Questions?

@escapedcat

ressources

• https://vuetifyjs.com/en
• https://github.com/vuetifyjs/vuetify
• https://slides.com/johnjleider/vuetify-2

@escapedcat