Roadmap for Vue Material beta!

As I told couple months ago, I am developing a new Vue Material from scratch, with better support, an easy way to integrate and way more reliable. And this new version is just around the corner. I received a lot of issues and complains regarding support for SSR, validation, integration with 3rd party libs and many others. So I after ~6 months on this bad boy, more than 500 files, ~28k loc and ~800 commits I now announce that the beta is coming!

The release strategy will be like this:

The first beta will be released at the beginning of November, with all goodies and a closed API. At this moment the documentation will be pretty much done, but with some components delayed to next version.
After that, a migration guide will be developed to make the transition between the old version.
A cycle of beta versions will happen to solve the issues and small improvements until a stable arrives.
The current repository will be replaced with new one. I will give a small support for the 0.7.5 version to solve important issues only.
The stable version will be released with 1.0.0 number.
I will solve the issues after the stable release while I focus on the next 1.1.0 version, with the components the didn't entered on 1.0
Boilerplates, Nuxt template and further guides will be created

Key Features

Automatic constrast ratio - YES! The theme factory will calculate the contrast between the background and text to give the correct black or white color.
On demand themes! Create themes only for the components that you're really using
Pre made theme colors
Dynamic themes
Easy to toggle features, like ripple, theming, locale values and more
Better support for Vue Router, with autosync on navigation components
Highly extensible and easy to create 3rd-party components
Namespaced attributes
~30% lighter than 0.7.5
New and Awesome on-demand components
SSR Support
Well-tested - WIP 100% coverage
Easy i18n
Minimalist and performant docs

1.0.0 roadmap

Core Stuff

[X] Themes - NEW API
- [X] Deprecated theme component
- [X] Sass Based themes
- [X] Multiple themes
- [x] CSS Variables
- [ ] CSS-only themes
[X] SSR Support - NEW
- [X] Basic Support

Components

[X] MdAutocomplete - NEW API
[X] MdApp - NEW
- [X] Documentation
- [X] Reusable App Shell component
- [X] Integration with Toolbar, Drawer and Content
[X] MdAvatar
[X] MdBottomBar
- [X] Router integration - NEW
- [X] Router Sync - NEW
- [X] Symple way to trigger active item
[X] MdButton
- [X] Router integration - NEW
[x] MdCard
- [x] Documentation
- [X] Better image handle
- [X] Expand action
[X] MdCheckbox
- [X] Array - NEW
- [X] Boolean
- [X] String
[X] MdChips
- [X] Editable
- [X] Detelable
[X] MdContent - NEW
[x] MdDatepicker - NEW
- [x] Documentation
- [X] FINALLY!
- [X] Month Selector
- [X] Year Selector
- [x] Disable Dates
- [ ] Locale aware
[X] MdDialog
- [X] Alert
- [X] Confirm
- [X] Prompt
- [X] Custom
[X] MdDivider
[X] MdDrawer - NEW API
- [X] Documentation
- [x] Deprecate md-sidenav
- [X] Persistent - NEW
- [X] Permanent - NEW
- [X] Mini - NEW
- [X] Card - NEW
- [X] Clipped - NEW
- [X] Left/Right
[X] MdElevation - NEW API
- [X] Deprecate whiteframe component
- [X] Elevation classes
[X] MdEmptyState - NEW
[X] MdField - NEW API
- [X] Documentation
- [X] Change md-input-container to md-field
- [X] Input/Textarea
- [X] Checkbox
- [X] Radio
- [X] Switch
- [X] File - NEW API
- [x] Select
[X] MdIcon
[X] MdLayout - NEW API
- [X] Documentation
- [X] Deprecate layout component
- [X] New flexbox/responsive/class-based grid
[X] MdList - NEW API
- [X] Documentation
- [X] Router integration
- [X] Expansion
- [X] Input Controls
[X] MdMenu - NEW API
[X] MdProgress - NEW API
- [X] Documentation
- [X] Spinner
- [X] Bar
- [X] 0%/100% progress
- [X] Indeterminate state
[X] MdRadio
[ ] MdRipple - NEW API
- [ ] Documentation
- [X] New ripple
- [ ] Abstract component
- [ ] Performance improvements
[X] MdSnackbar
- [X] Documentation
- [X] Themed Snackbar
[X] MdSpeedDial - NEW API
- [X] Click Action
- [X] Multiple Effects
[X] MdSteppers - NEW API
- [X] Documentation
- [X] Horizontal
- [X] Vertical
[X] MdSubheader
[X] MdSwitch
[ ] MdTable - NEW API
- [ ] Documentation
- [X] Basic table
- [X] Sort
- [X] Fixed Header
- [ ] Inline Edit
- [ ] Dialog Edit
- [x] Selection
- [ ] Pagination
- [x] Alternate Header
[X] MdTabs
- [X] Documentation
- [X] Router integration - NEW
- [X] Router Sync - NEW
- [X] Symple way to trigger active tab
[X] MdToolbar - NEW API
[X] MdTooltip

Docs pages

[ ] Advanced
- [ ] Guide
- [ ] Extending Vue Material
- [ ] Third Party Components
[X] About
[X] Changelog
[ ] Components summary
[ ] Contribute
[X] Getting Started
[ ] Migration Guide
[X] Static docs
[X] Themes
- [X] Configuration
- [ ] Dynamic Themes
[ ] UI Elements summary

** Components/Features marked with a NEW label do not exists on the current version ** Components/Features marked with a NEW API can introduce major breaking changes. ** Mostly of unchecked components are only demanding a new docs page.

I will point out those changes inside the migration guide.

Post 1.0.0

Projects

Official Boilerplate
- SSR
- Nuxt
- PWA
- Simple
- Third Party Component
Sample Apps

Core Stuff

SSR
- Feature toggle
- SSR Only logic
A11y
RTL
Better Keyboard Navigation
Android vs iOS vs Web
Touch Events
Scrolling
Optimized theme colors
Vuelidate and Vee Validate integration

Components

Content Discovery
Content Slider
Timepicker
Range picker
Expansion Panels
Grid
Image
- Lazy Loading based on IntersectionObserver
- Loader
Onboarding
Rating Bar
Search Bar
Slider Input
Split Screen
...

Vue Material 2 will be released with the new Material Design guidelines landed on Google I/O 2018. Stay tuned!

But man! I need the ___________

Have something in mind? Need a new components? Created something meaningful and think that this can fit inside the lib? Let's discuss? We have a Slack Channel and I'm online there almost everyday. Send me a message!

I want to help. What do you need?

Well. All kind of help are welcome. If you want to contribute with the project, just send me a message and I will tell what you can do. We recently created a Slack Channel to share ideas and to keep all the comunication in one place.

Awesome! I want to pay you a coffee!

Vue Material do not run under the umbrella of any company or something like that, and is an independent project created by me on spare time. It became one of the most used UI Libraries for Vue.js.

If you think that this project helped you or your company in some way, you can consider become a backer/sponsor on Patreon:

Cheers!

Oct 11 '17 22:10 marcosmoura

Woohoooooooo ⤴️ So, I want to translate new coming docs into Japanese!

Oct 11 '17 22:10 Yatima-Kagurazaka

@Yatima-Kagurazaka Ah yeah. That would be freaking awesome. The new docs will come with i18n support. I will translate to portuguese too.

I need to translate to Chinese too, But I barely speak English. Chinese then... Hahahaha Someone?

Oct 11 '17 23:10 marcosmoura

I can help you en_US -> pt_Br

Oct 12 '17 13:10 vjoao

yeah~ I am the one who can help to translate to Chinese :)

Oct 12 '17 14:10 luoction

@Earlybug this will be awesome!!!

Oct 12 '17 14:10 marcosmoura

I can also help translate to French :)

Oct 17 '17 05:10 Embraser01

I will change the documentation to have all strings inside i18n files and then I will open an issue on the experiments repository, with the progress of translations.

Oct 17 '17 05:10 marcosmoura

Hi, the projects is awesome, but why do you want deprecate theme component? It is easy to use, if it turn to SASS, it will be so difficult to use

Oct 24 '17 17:10 aokihu

@aokihu I'm not going to deprecate the theme component. There is some reasons why I changed this: The main changes was related to Performance, SSR Needs and Caching.

SSR. Period.
Dark themes
Automatic contrast calculation
The theme engine, inside Vue code, will remain the same. We will still have the md-theme component and md-theme attributes. It is the same that we have today.
Another good thing with this new theme engine is the ability to generate themes for specific components only. Let's say that we want to use only Buttons, Icons and Tabs with a particular theme, but use another theme for all other components. Now we can. And it is simple!
The initial parse of themes on the initial payload, especially if we declare multiples themes inside Javascript code, was REALLY expensive. An old implementation based on Angular Material 1. In my personal and unofficial benchmarks, I improved the initial load performance of the main documentation website by ~200 for the single home page theme and ~450% with multiple themes. I have tested with 3 themes. The performance for more themes would be even worse.
All of those generated styles tags wasn't cached. So EVERY SINGLE TIME that a user opened the website the application will to the same thing to generate the styles. This is crazy.
Now, there is a version for SCSS and Plain CSS, with CSS custom properties (AKA CSS Variables). For now it's almost finished, just waiting for all components to be done. Then I will create a build script to generate a CSS Version of this SCSS based theme engine.
It's now easy to create and extend components for Vue Material. This will add a lot of good things, like the possibility of having Third-party Vue Material components. Maybe you'll need a component that Vue Material do not have. This will allow other developers (and you too) to create components that will integrate with Vue Material. That can have the core theme in it.
It is way easier and faster to maintain and add new functionalities. And the compile time, for development environments, will be faster too.
This allowed me to create pre-generated themes.

I hope this changed will bring way more fluidity to your projects. I will release a migration guide, with an extensive theme section. Let me know if you have any questions about this :D

Oct 24 '17 17:10 marcosmoura

Take a look at those issues, specially the #796: #996 #947 #912 #831

Oct 24 '17 17:10 marcosmoura

It is easy to generate themes with scss:

@import "~vue-material/theme/factory";

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200),
  accent: md-get-palette-color(pink, 700)
));

@import "~vue-material/base/theme";
@import "~vue-material/components/MdButton/theme";
@import "~vue-material/components/MdIcon/theme";
@import "~vue-material/components/MdTabs/theme";

With css only is way easier!

:root {
  --md-theme-default-primary: #448aff;
  --md-theme-default-accent: #c2185b;
}

Oct 24 '17 17:10 marcosmoura

Hey, your method is better than MUSE-UI, that is too difficult to use, so I choose your's project to use

Oct 25 '17 00:10 aokihu

Great! Could you accelerate the release of 1.0.0 new version? I am waiting for the datetime picker. Further more, could I make the Chinese translation for you?

Oct 25 '17 01:10 isafesoft

@isafesoft The new release will be available in November. First week. The Datepicker will be available, but the time picker will be delayed to 1.1.0. And YES! Of course you can help. That would be awesome!

Oct 25 '17 01:10 marcosmoura

How will it be the friction to change from 0.7.5 to 1.0.0? Many breaking changes on the API? I have an ongoing project with 0.7.5 and might be tempted to check 1.0.0 to use some better components.

Oct 25 '17 11:10 vjoao

@vjoao breaking changes will be only for components that are labeled NEW API or NEW

Oct 25 '17 18:10 Samuell1

I will release a migration guide comparing the components and features.

Oct 25 '17 18:10 marcosmoura

Super exciting!!!

Oct 25 '17 20:10 hackuun

Waw cool I needed so much the date component, can we already use the beta ?

Oct 26 '17 04:10 GillesBodart

How about translate to Indonesian too? xD

Oct 26 '17 14:10 ryuhiro

@GillesBodart It will be available in November.

Oct 26 '17 14:10 marcosmoura

@ryuhiro wow! Yes. Of course. That would be awesome!

Oct 26 '17 14:10 marcosmoura

Hey, @marcosmoura. Thanks for the update and the extraordinary efforts. I have one question. Do you think this version could include #260 ?

Oct 26 '17 19:10 akashdeep-singh

@akashdeep-singh Yes!!!

Oct 26 '17 20:10 marcosmoura

How can I upgrade to the latest version?

Regards! (sorry about my english)

Oct 28 '17 05:10 migueldiganchi

It's not available yet. Soon! :D

Oct 28 '17 13:10 marcosmoura

We have a large social media application built on 0.7.5, very exciting news about 1.0 :) Very happy to help test in a migration from 0.7.5 -> 1.0

Oct 28 '17 21:10 mikestokes

Hey @marcosmoura! Great project. would love helping with bringing the beta live. I'm going to start a project with vuematerial, will there be a big migration from 0.8.1 to 1.0?

Oct 31 '17 19:10 eyalcohen4

All the components that have NEW or NEW API will need a manual effort to migrate. I will create a migration guide to help with that. The md-theme, md-table, md-steppers, md-autocomplete and others we're created from scratch. This is due to old implementations of Vue Material and to take advantage of newest features from Vue.js Let me know if you have any questions! :D

Oct 31 '17 20:10 marcosmoura

Release Date Announcement

Book it on your calendar. Vue Material 1.0 beta will be released in 13/11/2017.

_{_{_{^{I hope to be able to comply with this schedule, but if something goes wrong in the middle of the way, I'll let you know!}}}}

Nov 01 '17 04:11 marcosmoura

vue-material vue-material copied to clipboard