mapset 2.0 with MUI

Development for mapset is in full swing again. For mapset 2.0 the dependencies on geOps-internal UI-libraries have been scrapped in favour of the open-source react component library MUI (Material-UI).

Component libraries and frameworks make a frontend developers’ life easier in a lot of ways. Firstly, they can speed up development drastically, since the required components are very likely provided by the package. More often than not, the components are very easy to use and come along with detailed documentation and examples. Secondly, issues like browser compatibility and accessibility are usually included, saving the developer a lot of cumbersome code writing. MUI has been at the top of the popularity list of react component libraries for a while now, with 78k stars on Github and over 1.3 million weekly downloads on npm (status 25.05.2022). This made it an easy choice for geOps.

MUI provides a full suite of foundational to advanced react components. Apart from the usual UI-components like buttons, navbars, modals and forms, the library also offers functional elements and specialised hooks, making app development fast and easy. Out of the box MUI component styling is based on Google’s Material Design system by default, but MUI provides multiple approaches for style customisation.

Several geOps apps rely on MUI and new features in mapset have been developed using MUI components since 2020. However, several older components still relied on inhouse and/or other third-party libraries. By replacing them with MUI components, all app components now have access to an injected MUI theme, making global styling a walk in the park. Many of the refactored UI elements now use the same code base from MUI components, creating a more unified appearance and usage. A further improvement was the removal of most of the app’s SCSS files. mapset now uses MUI’s inbuilt js-to-CSS approach for styling. CSS is written as javaScript objects, the CSS classes are created when the app is compiled, resulting in a more stable compiling process.

Using MUI as main UI technology opens a whole new dimension of possibilities and approaches for fast and easy UI building. We are excited to see what future MUI versions have to offer and what new features may give mapset UI the extra touch for the best user experience.

written by Daniel Marsh-Hunn | 6/8/2022
More on this topic
8 min reading time › | Blog

Adding type hints to existing code in Python

The Python interpreter handles types in a dynamic and flexible way without constraints on what type of object a variable is assigned to. Since Python 3.5 programmers have the option to add type annotations to their code to check whether variable types are valid. In this blog entry we show you how it's done.

read more
2 min reading time › | Blog

Next.js Routing with Nginx

Automatically generate a Nginx routing configuration for static Next.js projects.

read more
2 min reading time › | Blog

From backend to frontend: we are looking for reinforcement

We have two vacancies for Fullstack or Backend Developers for our offices in Freiburg and Olten. If you want to bring your passion to a strong team, then you should apply.

read more
3 min reading time › | Blog

Migrating from enzyme to testing-library/react

We have rewritten our frontend unit tests from using enzyme to testing-library/react. This article provides a quick overview of the updates.

read more
3 min reading time › | Blog

Set up Django to only allow CORS requests in DEBUG mode

This post is about how to set up a Django project to only allow CORS requests in DEBUG mode, even if they require a login to the backend. In our case, this has been useful to test frontend customizations on the internal dev environment without having to start the backend locally.

read more
5 min reading time › | Blog

Tools for prettier Python projects

This blog post outlines the current setup of pre-commit hooks, static code analysis tools (Flake8, Black) and dependency management (setuptools, pip-tools) for Python projects at geOps.

read more

Contact

geOps AG
Solothurnerstrasse 235
CH-4600 Olten

fon: +41 61 588 05 05
mail: info@geops.ch
geOps GmbH
Bismarckallee 10
D-79098 Freiburg

fon: +49 761 458 925 0
mail: info@geops.de