DEV Community

Cover image for Web UI design improvement using Material UI, the Before and After (React + TypeScript + Material UI)
Yota Hamada
Yota Hamada

Posted on • Edited on

Web UI design improvement using Material UI, the Before and After (React + TypeScript + Material UI)

We are developing a No-Code/Low-Code Workflow Platform, DAGU.

It is built on the following simple stack.

  • Frontend: React + TypeScript
  • Backend & Command: Golang

DAGU's built-in screens were initially designed simply using a popular CSS framework, bulma. I have improved the look and feel of the web UI and the development experience using Material UI in the following steps:

  1. Separation of Web UI code from go's HTML template files
  2. Migration to TypeScript
  3. Migration to MUI dashboard templates

React Project structure ⚙️

The finished project structure is as follows:

admin/
├── api/
├── assets/
├── components/
├── contexts/
├── hooks/
├── models/
├── pages/
└── styles/
Enter fullscreen mode Exit fullscreen mode

Take a look at The location in the repository if you like to know in detail.

Separation of Web UI code

I have separated the React code that was written directly in go's HTML templates into separate files for each component. This allows React components to be reused across multiple screens. Now it has now 36 components in total.

I also introduced webpack, which allows us to develop more efficiently using hot reloads while optimizing builds for production.

Migration to TypeScript

Migrating from JavaScript to TypeScript enabled it to define the structure of JSON objects as models and gain safety through type checking and great development experience with auto-completion.

Migration to MUI dashboard templates

I migrated web UI, which was easily created with bulma css framework, to Material UI.
Material UI is a collection of components designed according to Material Design developed by Google. By structuring the screen according to Material Design, you can build a UI with a consistent looking.

What I have done is just cloned the Material-UI repository and copy the dashboard templates components as the starting skeleton.

Before and After

Before

Workflow Status View (OLD)
gif

Workflow List View (OLD)
workflows

Workflow Execution History View (OLD)
history

After

Workflow Status View (NEW)
gif

Workflow List View (NEW)
workflows

Workflow Execution History View (NEW)
history

Workflow Execution Log View (NEW)
log

Conclusion

I hope it looks somewhat nicer and fancier. What do you think?
Moving to React + TypeScript + webpack has made it easier to extend new functionality. This allowed me to add the dashboard view very quickly 🚀

Workflow Dashboard View (NEW)
dashboard

Join in the development!

DAGU is in the early stage and aimed to be a good alternative workflow engine for smaller use-cases or existing codebases that need to be organized without hassle or high learning curve.

Feel free to contribute in any way you want. Share ideas, questions, submit issues, and create pull requests. Thanks!

Top comments (0)