Switching to a different UI framework

In the blog post that I wrote for UI’s v0.1.0 release, I mentioned that I struggled a lot when I was trying to add tests for this project.

What happens is that Material UI adds their withStyle HOC to every component in the application. This makes it very complicated to even do some simple assertions when it comes to tests.

At first, I thought it was something that I could live with, but thinking about it more has gotten me irritated over this topic. I know a lot of people think automated testing isn’t really that important when it comes to front end development, but I really want to do tests the right way for this project.

Despite my fondness of Material UI, I think this is a deal breaker. Even if it would take longer, I think switching the UI framework would be the better move in the long term.

With that said, here are the things that I think are important when choosing another UI framework:

  • The UI framework should not get in the way of testing (This is the most important).
  • It should play well with styled-components. I tried doing this with Material UI, but it ended up not working for the most part. MUI looks to be deeply rooted in JSS at this point.
  • The generated HTML of the UI framework’s components should be predictable and easy to read. One of my goals for Open Budget is for the code base to be simple enough for beginners to pick up and contribute to.
  • It should look good out of the box without customizations.
  • Lastly, it should support theming to some extent. I’m not a designer, but I think theme support will be valuable at some point.

I did a bit of research and I think Semantic UI React is the best candidate for this. It passes most of the checks that I have although I’m still not sure about the testing part.

I’m open to suggestions and I’ll also do some more research on this, but I think this project will end up adopting Semantic UI React if no other compelling arguments come up.

This has also been posted as an issue in GitHub.