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
3 min reading time › | Blog

beyond tellerrand 2023

On 11th September 2023 members from the geOps frontend team set out to Berlin to attend a very interesting and extraordinary event: beyond tellerrand conference.

read more
3 min reading time › | Blog

React 18 support for create-react-web-component

We want to update five year old dependencies the trafimage-maps project. But it appears one project dependency is deprecated. What should we do? Fix the project or use something else? We decided to fix the project and give back to the community.

read more
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. Here we 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

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 im Breisgau

fon: +49 761 458 925 0
mail: info@geops.de
Imprint | Privacy | Terms of service