Web UI design improvement using Material UI, the Before and After (React + TypeScript + Material UI)
Tags: go, react, typescript, devops
Published: 2022-06-01 00:40:03

---
title: Web UI design improvement using Material UI, the Before and After (React + TypeScript + Material UI)
published: true
description: React + TypeScript + Material UI
tags: go, react, typescript, devops
cover_image: https://github.com/yohamta/dagu/raw/main/assets/images/logo-with-background.png?raw=true
---

- [React Project structure](#react-project-structure)
- [Separation of Web UI code](#separation-of-web-ui-code)
- [Migration to TypeScript](#migration-to-typescript)
- [Migration to MUI dashboard templates](#migration-to-mui-dashboard-templates)
- [Before and After](#before-and-after)
  - [Before](#before)
  - [After](#after)
- [Conclusion](#conclusion)
- [Join in the development!](#join-in-the-development)

We are developing a `No-Code/Low-Code Workflow Platform`, [DAGU](https://github.com/yohamta/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](https://bulma.io/). I have improved the look and feel of the web UI and the development experience using [Material UI](https://mui.com/) 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/
```

Take a look at [The location in the repository](https://github.com/yohamta/dagu/tree/main/admin) 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](https://github.com/yohamta/dagu/tree/main/admin/src/components) in total.

I also introduced [webpack](https://webpack.js.org/), 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](https://github.com/yohamta/dagu/tree/main/admin/src/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](https://mui.com/).
`Material UI` is a collection of components designed according to [Material Design](https://material.io/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](https://github.com/mui/material-ui) and copy the [dashboard templates](https://github.com/mui/material-ui/tree/f0f33c6038f874d2f3ecc251a8ca5bc640424992/docs/data/material/getting-started/templates/dashboard) components as the starting skeleton.

## Before and After

### Before

**Workflow Status View (OLD)**
![gif](https://res.cloudinary.com/practicaldev/image/fetch/s--WPbKD85W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/1475839/165764122-0bdf4bd5-55bb-40bb-b56f-329f5583c597.gif)

**Workflow List View (OLD)**
![workflows](https://res.cloudinary.com/practicaldev/image/fetch/s--ZBU58Bg3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/1475839/167070248-743b5e8f-ee24-49bf-a4f4-a5225dfc755a.png)

**Workflow Execution History View (OLD)**
![history](https://res.cloudinary.com/practicaldev/image/fetch/s--ffXr6ie_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/1475839/166269714-18e0b85c-33a6-4da0-92bc-d8ffb7ccd992.png)

### After

**Workflow Status View (NEW)**
![gif](https://github.com/yohamta/dagu/raw/main/assets/images/example.gif?raw=true)

**Workflow List View (NEW)**
![workflows](https://github.com/yohamta/dagu/raw/main/assets/images/ui-workflows.png?raw=true)

**Workflow Execution History View (NEW)**
![history](https://github.com/yohamta/dagu/raw/main/assets/images/ui-history.png?raw=true)

**Workflow Execution Log View (NEW)**
![log](https://github.com/yohamta/dagu/raw/main/assets/images/ui-logoutput.png?raw=true)

## 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](https://github.com/yohamta/dagu/raw/main/assets/images/ui-dashboard.png?raw=true)

## Join in the development!
[DAGU](https://github.com/yohamta/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!