hi, i'm hannes
- working with Vue.js for 1.5 years
- currently in a team working on a product
Vuetify
the product
-
backoffice webapp
-
not for endusers
-
to support clients managaing products/customers
-
by providing interface
-
special actions for daily tasks
-
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
material design
what is material design?
... is a design system – backed by open-source code – that helps teams build digital experiences
it's from google
guidelines
in the real world
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
vuetify
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
history
https://material.io/archive/guidelines/material-design/whats-new.html#whats-new-previous-updates
2015
2019
2016
2017
2018
v1
v2
80+ components
https://vuetifyjs.com/en/getting-started/quick-start
morrr components
https://vuetifyjs.com/en/getting-started/quick-start
grid
https://vuetifyjs.com/en/getting-started/quick-start
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
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
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
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)
the future (2.0)
new components, i.e.
- Sparkline charts
- File upload
- Overlay
- Gallery
- Calendar
https://slides.com/johnjleider/vuetify-2
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
Questions?
ressources
- https://vuetifyjs.com/en
- https://github.com/vuetifyjs/vuetify
- https://slides.com/johnjleider/vuetify-2