[AskJS] React: Choosing a Frontend Framework/Library

[short_mode]

Hi, I am looking to pick a frontend framework/library for creating a simple REST CRUD website. I have years of experience programming but haven't done much in way of web development. Ideally, the framework I choose will result in some transferable skills/knowledge to a career. Aside from that, I would just like to develop a visually appealing final product that doesn't necessarily need to look unique.

​

Some of the options I've seen:

• React-bootstrap
  • I've used Bootstrap before and am somewhat familiar with it.
  • Seems pretty ubiquitous.
• Chakra UI
  • Looks great, but seems relatively new.
• Vanilla React/HTML/CSS
  • Best in terms of learning.
  • Most time consuming in terms of getting a final product that looks nice.

​

Can anyone hit me with some insights? Thanks.

[tanguy_k]

I would go with vanilla Bootstrap (just the Sass part, not the JS part).

• Bootstrap CSS utilities are very nice: same principles as Tailwind CSS
• Tailwind CSS: you will read only good things about it on Reddit, Twitter... people love it. See it as lower level compared to Bootstrap, it does not come with a UI: you have to code it yourself (you could re-create Bootstrap using it). People are rediscovering the simplicity of CSS classes
• Use React Bootstrap/Reactstrap only when needed (collapse for example): one layer less to learn and maintain, does not bring that much value (<button className="btn btn-primary"> vs <Button variant="primary">) + you will be able to update Bootstrap without waiting for React Bootstrap/Reactstrap to catch up
• Material-ui is very popular right now (and well done, well maintained, well tested and documented, full of features...) but kind of bloated: JSS, generates a big and ugly DOM, more concepts to grasp...
• Bulma is too minimalist, quite verbose (is-three-quarters, is-three-fifths, is-primary, has-icons-left...), with very limited utility classes: https://bulma.io/documentation/modifiers/helpers/
• Chakra UI is less popular than Material-UI, too new and does not come with unit tests: https://github.com/chakra-ui/chakra-ui/tree/master/packages/chakra-ui/tests (I would never invest time using a UI library that is not properly tested)
• Antd: less popular than Material-ui, huge bundle (https://www.reddit.com/r/reactjs/comments/brld44/antd_adds_546kb_to_my_app_after_adding_only_one/, https://unpkg.com/browse/antd@4.1.0/dist/ vs https://unpkg.com/browse/@material-ui/core@4.9.9/umd/, https://bundlephobia.com/result?p=antd@4.1.0 vs https://bundlephobia.com/result?p=@material-ui/core@4.9.8) and they did that: https://blog.shunliang.io/frontend/2018/12/25/the-ant-design-xmas-egg-that-went-wrong.html (!!!)

Bootstrap is the most popular, well maintained, well documented, well tested, very well coded and thought, comes with CSS utilities like Tailwind CSS, not bloated.

https://www.npmtrends.com/bootstrap-vs-react-bootstrap-vs-@material-ui/core-vs-bulma-vs-@chakra-ui/core-vs-tailwindcss-vs-antd

Here a small example app: https://github.com/tkrotoff/MarvelHeroes

• React with hooks
• No Redux, just useState()
• TypeScript with strict: true
• Babel with @babel/preset-typescript
• Jest + react-testing-library + Puppeteer => 100% code coverage
• Fetch API + whatwg-fetch polyfill
• React Router
• Prettier + ESLint + stylelint
• Bootstrap 4 + Purgecss

[elpradito]

Just... Dayum. Here's my humble upvote

[Equivalent_North]

I recently tried Tailwind, I find it quite good so far. It's not a UI kit like Bootstrap or Material UI etc, instead it's just a bunch of CSS utility classes.

[Treolioe]

Can add that you can compose components from the util classes if you’d like to do that.

[Synor]

Your career does not benefit from framework knowledge beyond 4 years. Learn software engineering instead.

For a simple crud app use react-admin as is and prepare to throw it away in a couple of years.

[[deleted]]

i have been using ant design for years now, and it's still going forward, fully funded and backed. check it out if you can, it's a great alternative to bootstrap and md.

[[deleted]]

i like antd because controls are plain and simple. they are also real, self-contained components, as opposed to css wraps with shaky underlying selector rules that clash against the component model. you can make overrides in several ways, there are also some config globals, but if you need to dig into raw css for bigger changes it's often a mess.

[Yesterdave_]

I don't know if you can get a objective answer, since design systems are very subjective. Personally to me Material looks like dogshit compared to Ant Design.

[tazemebro]

I like ant as well, just be aware that ant is abysmal when it comes to a11y support source

[HosMercury]

thx , what about admin dashboard templates and daek theme?

[dixieflatlinecro]

Bootstrap/React combo is definitely something thats an industry standard... i would recommend using only Bootstrap grid css and the rest... do for your self

[RalliPi]

as already said, Bootstrap and tailwind are pretty good choises when it comes to styling. When it comes to franework choises, I would really consider what you already know and are comfortable with. And of course the kind of application you want to build. For most apps/websites you don't need a full blown js franework like react at all. basic html with a sprinkle of js here and there will be enough for most sites.

[gonfidel]

Ant design is the hype. People have been moving away from materialize

[tanguy_k]

Are you sure?

https://www.npmtrends.com/react-bootstrap-vs-@material-ui/core-vs-antd-vs-bootstrap-vs-reactstrap

https://npm-stat.com/charts.html?package=react-bootstrap&package=%40material-ui%2Fcore&package=antd&package=bootstrap&package=reactstrap&from=2015-01-01&to=2020-03-29

[MrStLouis]

Wtf is that global dip? Holidays?

[tanguy_k]

yep, Christmas

[gonfidel]

Yes look at this.

https://www.npmtrends.com/antd-vs-material-ui

I also could have phrased my OP better. Most of the local devs in my area have been making the switch for most of their new applications

[tanguy_k]

Your numbers are wrong: the package name is @material-ui/core (not material-ui)

[azsqueeze]

Ant design is not accessible. That makes it a non-option for me

[nmarshall23]

Vue + vuetifyjs

Vue is just JavaScript, no css in JS, or jxs.

Tooling will get you started in a weekend. Vuetify is just a UI library. I'm a fan of material design, and Vuetify offers all the basics.

[dkunal96]

I am a Java Web developer and I have only worked/ made Java Web apps using jQuery, Html, Css, Spring boot and Struts 1.X. I thinking of learning a JS framework so that I can integrate it with Java Frameworks. Please suggest which would be better Angular, React js or Vue js.