Anyone have any thoughts on Bootstrap vs Material Design?
I know that @ssmusoke have been promoting replacing the Reference Application style guide with Bootstrap, and we’ve been using react-bootstrap (https://react-bootstrap.github.io/) with our React projects, but we’ve recently been hearding a lot about Material Design (and in particular, the React library material-ui https://material-ui.com/)
Any thoughts about the benefits/drawbacks of each? Is it worth considering a pivot to Material-UI? Are the two mutually exclusive or would it make sense to consider using them in parallel?
@mogoodrich Boostrap was my example tool of choice illustrating the fact that we need to have consistent ui components without having to build and maintain a separate set. Any tool chain that supports that will have my support - I am not locked down to any.
I am not sure what more UI/UX savvy people would advocate for, but since innovation is not efficient, I would encourage a pivot in these early days to provide a useable example and insights.
I am not too sure on this, but upon some R&D at my end I feel like there is an mid way to use https://mdbootstrap.com that utilises bootstrap for material design. I agree this does not fit in to the answer for a Bootstrap vs. Material Design discussion, but a kind of workaround for sure.
@mogoodrich I have used the Material UI kit and also React-bootstrap components and honestly I don’t really have a preference for which really stands out. They both have their pro’s and con’s, for instance Material components are very configurable and offers the option to apply consistent theming to your application, large component library (a lot), looks very fancy (especially in mobile devices) and all but the trade off has to be with performance and compatibility across devices, little bugs here and there but hackable of course and most folks find the design much of an overkill for what they originally had in mind, although they got a very good documentation. React-bootstrap is lightweight, has a good grid system for layouts and the components can be configurable to an extent (most times the functionality you’re aiming for isn’t available so you just have to build it from scratch), plays nicely with even Material UI components (Yes, you can use both together). My issue with React-bootstrap has to be with not having a large component library. @ssmusoke Material components offer a consistent UI feel also you can demo out some of the components here https://material-ui.com/demos/app-bar/.
That being said, I believe either would work well in whatever use case you had in mind, but I found out that most of the time dependencies such as UI framework always change and some other fancier version rolls out, we can choose to follow that trend or just maintain what we got already.
When I started out with Reaction Commerce, it was solely dependent on bootstrap but then we focused to build out components in line with the design we had in mind taking away some of the design ideas from bot material, bootstrap and the others, that made sense for a lot of reasons, and the most notable was that we could redesign those components whenever we felt like but the trade of was maintainability
I personally love material designs. However, having said that since we have so many modules using bootstrap, to maintain a uniform UI across the suite of products that OpenMRS offers, we should probably stick to the one that’s already the primary one (Bootstrap).
According to me the user experience offered by both the libraries are vastly different and thus I wouldn’t use them in parallel.
Thanks everyone! It sounds like we should stick with bootstrap as the “default” one, but consider using Material UI if we need a component that Material UI provides that bootstrap doesn’t?
@reubenv, does a lot of the refapp already use bootstrap? I actually didn’t realize that - I thought it was more aspirational still, and not actually implemented.
@reubenv good to know. Can you point me to a few of them? I’m trying to educate myself on these and want to understand what these looks like and what bootstrap has offered these modules.
I would just like to point out that in material UI is an entire visual approach and system, and the defines a lot of consistent ways in which different widgets would look and behave. If we were to use this, we should use it for the entire application, and that would be a relatively big change.
Bootstrap is also a complete visual system, but it basically looks just like everything else, so Shifting the reference application to be based on bootstrap shifting the reference application to be based on boots drop can be done without much visual change.
The reason that Stephen wants us to adopt bootstrap is so that we’d be using a standard technology that devs who are new to OpenMRS already know. (Personally, I don’t think it’s worth the investment to make that shift, because the current refapp styling is adequate as far as I’m concerned. And bootstrap + angular or react still requires a third-party Library beyond the bootstrap one. But it’s not my call.)
@darius The long term vision has always been to prevent re-inventing of the wheel and provide more consistency across implementations for components.
We are currently battling with a styling of a dashboard widget below which is not included in the style guide OpenMRS - so where is the guidance for putting together new more complex widgets that do not currently exist?
I realize that the main point of my comment may have been lost, so let me just say it explicitly: in my opinion it doesn’t make sense to incrementally start using Material UI in a portion of the reference application, nor does it make sense to “just pull in a Material widget when we need one”. Whereas it does make sense to incrementally adopt Bootstrap. (Now, if I were doing a new react application from scratch I’d probably want to use Material UI since it seems cooler. )
So…add it to the style guide. You could even look at how bootstrap would handle it and do exactly the same thing.
(In this image though I don’t really see how Bootstrap would protect us from having too much text to fit in a space that was designed for less. Seems like there’s a need for some minor CSS tweaking so that the lines break the right way.)
I am trying to find out how to get it to work in the current style guide. However since Bootstrap is not integrated into the core of Ref App, then building upon it is not an easy task
@mogoodrich That would be great news but am not sure of the stability
of Boostrap .However it would be a great replacement and infinitely accelerate UI design with the right Template Design patterns. It would bring lots of devs on board.
which ones for example , i had personally never observed that.
Reporting UI(Again, found angular bootstrap imports but not sure)
Having mentioned these modules, even if some of them don’t really use bootstrap, as Darius pointed out, the UI is similar to that offered by Bootstrap. Hence, a shift to Bootstrap shouldn’t really be a big transition in terms of a visual aspect.
)