Even though I'm not completely satisfied with its state, I've recently picked Material UI over React Toolbox. Too bad React-MD wasn't around at the time because it seems like a fierce competitor at first glance.
Things I like about React MD over Material UI:
* Fully tested
* Separation of styles
* Grid included
On a sidenote: the page's styling messes up during loading. It takes one second before it morphs into the actual state.
Have you run into any significant issues with the overhead of "bloat" that comes with inline styles? Injecting so many styles inline especially for complex list items might potentially have some performance issues despite having a virtual dom.
I have been considering refactoring my personal ui lib to use css for static styles with css modules while all themable/dynamic styles inline. Many might say the mixture gets increasingly complex scaling but I have not run into such an issue.
Another great feature of React-MD, fully accessible.
I haven't had time to fully test that claim yet with a screen reader, but it does seem to work well using the key oars alone which is something often overlooked.
Honest question. Wouldn't you be better off constructing your own style architecture for an application so complex it requires React? I imagine using any prebuilt UI framework out of the box becomes restrictive with the necessity to constantly rewrite styles to match whatever the design team wants. I'm just curious to hear how teams use things like this.
What I like about this library over Material UI is the complete separation of styling, I really don't like how styles are written and passed as an object in Material UI and the requirement of getting muiTheme() from context for most components is just maddening, especially painful during testing. But what I'd really like to see from a material ui library is one that uses ITCSS for styling, check out the grommet UI library which is just an amazing library to work with, and the ITCSS makes editing and customising components a breeze.
Nothing to do with this project per se, but I still do not understand the deal with material design on the web. I can understand the case for it's use in small screens and maybe falling back to it based on media queries makes sense but I'm yet to see a good looking website on a laptop using material design.
I tend to enjoy it, mostly because it's a good "baseline". The phrase "nobody ever got fired for choosing IBM" comes to mind.
It might not be the most beautiful, it might not be the most information-dense, it might not be something that an actual designer would want to implement everywhere, but it works consistently, and it works pretty well on all screen sizes and shapes and input types.
It's a set of guidelines to hold your hand in making something that's not terrible even if you have literally no design experience, and I think it's doing a great job in that.
But, I also really like the look of MD. The animations, the "inky" taps, the shadows, the movement. It looks nice to me, it helps give a sense of "where" parts of the app live, and it tends to be consistent enough that if I notice an app doing it, I can generally grasp the "where would I go for this" much faster than other designs.
I generally like Material Design, but sadly I have to agree with you.
Contrary to Bootstrap, you can't just drop in Material Design and expect it to look decent. You actually have to adhere to the design and usage guidelines that come with Material Design to really make something good looking and functionally coherent with it.
Even from a purely philosophical perspective I have a great appreciation for material design. Even if it's not their intent, they're normalizing and standardizing art / design for non-artists and non-designers. Sounds like a pretty ambitious thing to me. I hope they succeed with it.
One thing the author has pointed out on reddit was that many of the components have a property to wait to fire until the ink animation is done.
That looks like the cause of the delay and "sluggish" feeling some people are reporting. If you don't set that prop, it's very quick even on a nexus 4 which tends to be my baseline device for "web apps" right now.
Why you'd want to set that I'm not sure, but it's there.
Did the author try to use the components from a low end phone? Generally it looks good but all the jumping, flashing and crashing do not signal version 1.0.0.
Totally. 64% of my users are on mobile. Can one really afford to ignore that crowd?
Of course, mobile web development is, as I tend to say, the IE6 of modern days. So many older devices, and we also need to more or less support all of them.
Graceful degradation is the key, yes, but React-MD doesn't even seem to cope well with high-end devices.
Am I the only one who thinks Material Design and its derivatives is just plain ugly? If I see a website created with this style, I press Ctrl+W close to speed of light.
My opinion is somewhere in between neutral and "I quite like it". I think I'm beginning to feel rather numbed to it and would like to see a people add their own fresh twist - but I very much like the overall aesthetic approach in it's various forms (as long as it doesn't sacrifice affordance[0] at the altar of flatness)
Huge number of sites in material ui style are built using super broken widget libraries to boot -- nothing is as frustrating as a form that can't be completed due to ui broken ness ...
I want to like MD because there are some great tool kits out there, but the animations come off as unnecessary, and often result in slowness and flicker on first loads from my experience.
* quite the paradox writing this on HN isn't it? I think we browse looking for the content not the design. Google cloud? Angular.io? android.com? stamplay.com?
Because even their CSS implementation will still be css-in-js, not to mention that this framework seems to be going in a slightly different direction than material-ui.
Not everything can be done in a PR. I doubt the callmeall people would enjoy someone switching them to SASS, or rewriting some of their components entirely to work with a keyboard easier, or any other major changes.
And what is "half baked" about this? Besides being newer, it doesn't look any worse to me at first glance.
[+] [-] Egidius|9 years ago|reply
Things I like about React MD over Material UI: * Fully tested * Separation of styles * Grid included
On a sidenote: the page's styling messes up during loading. It takes one second before it morphs into the actual state.
[+] [-] renshenhe|9 years ago|reply
I have been considering refactoring my personal ui lib to use css for static styles with css modules while all themable/dynamic styles inline. Many might say the mixture gets increasingly complex scaling but I have not run into such an issue.
[+] [-] ergo14|9 years ago|reply
[+] [-] Klathmon|9 years ago|reply
I haven't had time to fully test that claim yet with a screen reader, but it does seem to work well using the key oars alone which is something often overlooked.
[+] [-] lilbobbytables|9 years ago|reply
I'm starting a project that is more or less material, and this post of making me realize it could definitely use a number of material UI elements.
[+] [-] ryanSrich|9 years ago|reply
[+] [-] farax91|9 years ago|reply
[+] [-] kross|9 years ago|reply
[+] [-] vasco|9 years ago|reply
[+] [-] Klathmon|9 years ago|reply
It might not be the most beautiful, it might not be the most information-dense, it might not be something that an actual designer would want to implement everywhere, but it works consistently, and it works pretty well on all screen sizes and shapes and input types.
It's a set of guidelines to hold your hand in making something that's not terrible even if you have literally no design experience, and I think it's doing a great job in that.
But, I also really like the look of MD. The animations, the "inky" taps, the shadows, the movement. It looks nice to me, it helps give a sense of "where" parts of the app live, and it tends to be consistent enough that if I notice an app doing it, I can generally grasp the "where would I go for this" much faster than other designs.
[+] [-] hobofan|9 years ago|reply
Contrary to Bootstrap, you can't just drop in Material Design and expect it to look decent. You actually have to adhere to the design and usage guidelines that come with Material Design to really make something good looking and functionally coherent with it.
[+] [-] ceejay|9 years ago|reply
[+] [-] hesarenu|9 years ago|reply
[+] [-] Klathmon|9 years ago|reply
That looks like the cause of the delay and "sluggish" feeling some people are reporting. If you don't set that prop, it's very quick even on a nexus 4 which tends to be my baseline device for "web apps" right now.
Why you'd want to set that I'm not sure, but it's there.
[+] [-] patates|9 years ago|reply
[+] [-] bestest|9 years ago|reply
Of course, mobile web development is, as I tend to say, the IE6 of modern days. So many older devices, and we also need to more or less support all of them.
Graceful degradation is the key, yes, but React-MD doesn't even seem to cope well with high-end devices.
[+] [-] rco8786|9 years ago|reply
[+] [-] andr|9 years ago|reply
[+] [-] avtar|9 years ago|reply
[+] [-] tgroutars|9 years ago|reply
[+] [-] adnanh|9 years ago|reply
[1] https://getmdl.io/showcase/index.html
[+] [-] dchest|9 years ago|reply
[+] [-] Numberwang|9 years ago|reply
[+] [-] CombatCode|9 years ago|reply
[+] [-] elcct|9 years ago|reply
[+] [-] andybak|9 years ago|reply
[0] https://www.interaction-design.org/literature/book/the-gloss...
[+] [-] sapeien|9 years ago|reply
[+] [-] breatheoften|9 years ago|reply
[+] [-] Fifer82|9 years ago|reply
[+] [-] hitgeek|9 years ago|reply
[+] [-] wishinghand|9 years ago|reply
[+] [-] ryanSrich|9 years ago|reply
[+] [-] ciokan|9 years ago|reply
[+] [-] d0vs|9 years ago|reply
[+] [-] adnanh|9 years ago|reply
[+] [-] andrethegiant|9 years ago|reply
[+] [-] kibrad|9 years ago|reply
[+] [-] arekkas|9 years ago|reply
[+] [-] Klathmon|9 years ago|reply
Not everything can be done in a PR. I doubt the callmeall people would enjoy someone switching them to SASS, or rewriting some of their components entirely to work with a keyboard easier, or any other major changes.
And what is "half baked" about this? Besides being newer, it doesn't look any worse to me at first glance.
[+] [-] 6mirrors|9 years ago|reply
[+] [-] camus2|9 years ago|reply