reactjsbootstrap-4material-ui

Bootstrap vs Material UI for React?


I have been using both in my projects and sometimes I find the need to use a Material UI component within a bootstrap component and the UI displays as I would expect. I have been advised though not to use this approach. Is there any reason why since both are using the grid and can be flexed?


Solution

  • I tend to be verbose so I'll put the concise answer up top here:

    Conclusion:

    Whoever said it was bad to use both might just be expressing their opinion, in reality saying it's bad to use both really lacks context in what you're designing. @user3770494 made a very good point- but the point, while valid and truthy about the build size, it does depend on the scope of the application. If it's an intraoffice application with everyone on a fiber network local it'd all be cached in memory anyways... but (not that you know me) I would not judge you negatively if you mixed them together-- unless it was for a MAJOR million user application to run on mobile (an very low devices), desktop, and other devices around the world requiring real(ish) time updates, and streaming dynamic content with 10000s of active users at any givin time 24/7.

    In all truth- if it's not life or death-- I'd say use both- and also do your own. The experience of understanding more then one thing is better then just "committing to a single solution" for personal growth.


    The rest of this reading is optional - you're welcome :)

    I personally have used both in production applications (both together, and independently)... I've also done it all from scratch... (CSS is my least favorite part of job things I do - luckily I have a coworker who is great at it) Here are my thoughts:

    Warning: I tend to be verbose.

    Disclaimer:

    As someone who likes function over form, form is an afterthought that is nit picky for clients to ask about tenuous little changes. I am going to try to leave my opinion on "how each option looks for feels" out of this as much as I can.

    Also I'm looking at your question in a current choice I'm making- which is using ReactJS / create-react-app to make "demo" projects for touch screen embeaded systems- so I am going to roll out half a dozen mock programs for demos nothing that really does anytihng exactly (CCscanner, barcode scanner, gps, webcam integration, fun stuff like that). So I'm researching what will be easist for me to just commit to for this "beacuse I'm bored and got a pi3b+board for fun).

    Answer:

    (I noticed someone once importing full jQuery when the only thing that they used from it was $.ajax (all be it a lot but still) ... I was like... is that not overkill?!) -- So if you use both and want to keep things slim- just make sure on compilation you're only importing what you're using. Pythonically I'm saying- never use import * from module (however you express that in Javascript as a concept - webpack/gulp/whomever should take care of most of that for you). Assuming you're using ES6/7 style Javascript.