Material UI: A Component Library to Speed Up Development

How can development teams speed up production time in the front end while reducing code complexity and still achieve all the advanced features and a modern look and feel users expect? The answer is to not reinvent the wheel. ExamRoom Live follows this principle in its UI implementation, which is built on React JS and uses the Material UI (MUI) library of web components to create all the forms and modules inside the app.

By leveraging this component library, we at ExamRoom Live are able to focus more on the app function and user workflows instead of having to worry about the look and feel of every component we would have to create from scratch. 

So how does using a UI library help the development process? It seems that it would take more time to get new developers familiar with yet another javascript library when in the end everything could be handled with HTML and CSS which most web developers are already familiar with. Besides, aren’t there other component libraries out there such as bootstrap or chakra UI, why use MUI in that case? 

Material UI is a react library based on the material design spec developed by google. This design spec has a modern look and feel that clients are used to and can expect this to be standard across all platforms. This has the advantage over other UI libraries of being robust, well documented, and with more components to choose from.

 Not to mention, it is easy to use. The developer only needs to import that component on the desired module and follow the MUI documentation when implementing the component, which is usually not more than a few lines of code. 

Of course, no component library is perfect. There are times when MUI gives the user too many choices for customizing its components, i.e., makeStyles, Themes, or CSS overrides. Other times it would seem the components aren’t enough, such as in the case of the autocomplete component which can only search one parameter. 

Still, MUI provides more than enough building blocks and guidelines for developers to create new components which suit the app user’s needs. It is up to the developer to make the best use of these, and here at ExamRoom Live we were able to improve our own workflow by making use of Material UI.