mapset 2.0 mit MUI

Die Entwicklung für mapset ist wieder in vollem Gange. Für mapset 2.0 wurden die Abhängigkeiten von geOps-internen UI-Bibliotheken zugunsten der Open-Source React-Komponenten-Bibliothek MUI (Material-UI) aufgegeben.

Komponenten-Bibliotheken und -frameworks machen das Leben eines Frontend-Entwicklers in vielerlei Hinsicht einfacher. Erstens können sie die Entwicklung drastisch beschleunigen, da die gewünschten Komponenten mit großer Wahrscheinlichkeit bereits im Paket enthalten sind. In den meisten Fällen sind die Komponenten sehr einfach zu verwenden und werden mit einer ausführlichen Dokumentation und Beispielen geliefert. Zweitens sind Themen wie Browserkompatibilität und Barrierefreiheit in der Regel enthalten, was dem Entwickler eine Menge mühsamer Code-Erstellung erspart. MUI steht schon seit einiger Zeit an der Spitze der Beliebtheitsskala der React-Komponentenbibliotheken, mit 78k Sternen auf Github und über 1,3 Millionen wöchentlichen Downloads auf npm (Stand 25.05.2022). Dies machte die Wahl für geOps leicht.

MUI bietet eine vollständige Suite von grundlegenden bis hin zu fortgeschrittenen React-Komponenten. Neben den üblichen UI-Komponenten wie Buttons, Navigationsleisten, Modals und Formularen bietet die Bibliothek auch funktionale Elemente und spezielle Hooks, die die App-Entwicklung schnell und einfach machen. Das Styling der MUI-Komponenten basiert standardmäßig auf dem Material-Design-System von Google, aber MUI bietet mehrere Ansätze für die Anpassung von Styles.

Mehrere geOps-Apps basieren auf MUI und neue Funktionen in mapset wurden seit 2020 mit MUI-Komponenten entwickelt. Einige ältere Komponenten basierten jedoch noch auf hauseigene Packages und/oder Bibliotheken von Drittanbietern. Durch den Ersatz dieser Komponenten durch MUI-Komponenten haben nun alle App-Komponenten Zugriff auf ein injiziertes MUI-Theme, was das globale Styling zu einem Kinderspiel macht. Viele der überarbeiteten UI-Elemente verwenden nun die gleiche Codebasis über die importierten MUI-Komponenten, was zu einem einheitlichen Erscheinungsbild führt. Eine weitere Verbesserung war die Entfernung der meisten SCSS-Dateien der App. mapset verwendet nun den in MUI integrierten js-to-CSS-Ansatz für das Styling. CSS wird als JavaScript-Objekte geschrieben, die CSS-Klassen werden beim Kompilieren der App erstellt, was zu einem stabileren Kompilierungsprozess führt.

MUI als Fundament für die mapset-UI eröffnet eine völlig neue Dimension an Möglichkeiten und Ansätzen für eine schnelle und einfache UI-Erstellung. Wir sind gespannt, was künftige MUI-Versionen zu bieten haben und welche neuen Funktionen ein optimales Benutzererlebnis in der mapset-UI garantieren werden.

geschrieben von Daniel Marsh-Hunn | 8.6.2022
Mehr zum Thema
8 min Lesezeit | Blog

Hinzufügen von Typ-Hinweisen zu vorhandenem Code in Python

Der Python-Interpreter behandelt Typen auf dynamische und flexible Weise ohne Einschränkungen bezüglich des Objekttyps, dem eine Variable zugewiesen ist. Seit Python 3.5 haben Programmierer die Möglichkeit, Typ-Annotationen in ihren Code einzufügen, um zu prüfen, ob die Variablentypen gültig sind. In diesem Blogeintrag zeigen wir Ihnen, wie man das macht.

weiterlesen
2 min Lesezeit | Blog

Next.js Routing mit Nginx

Automatisch eine Nginx Routing-Konfiguration für statische Next.js Projekte generieren.

weiterlesen
2 min Lesezeit | Blog

Von Backend bis Frontend: wir suchen Verstärkung

Wir bieten zwei Stellen als Fullstack- oder Backend-Entwickler:innen für unsere Offices in Freiburg und Olten. Wenn du deine Leidenschaft in einem starken Team einbringen willst, dann solltest du dich bewerben.

weiterlesen
3 min Lesezeit | Blog

Umstellung von enzyme auf testing-library/react

Wir haben unsere Frontend-Unit-Tests von enzyme auf testing-library/react umgeschrieben. Dieser Artikel bietet einen schnellen Überblick über die Aktualisierungen.

weiterlesen
3 min Lesezeit | Blog

CORS in Django für Entwicklungs­umgebung

In diesem Beitrag geht es darum, wie man ein Django-Projekt so aufbaut, dass es nur im DEBUG-Modus CORS-Requests zulässt, auch wenn diese einen Login im Backend erfordern. Das Setup vereinfacht Tests in internen Entwicklungsumgebungen.

weiterlesen
5 min Lesezeit | Blog

Werkzeuge für schönere Python-Projekte

Dieser Blog-Beitrag skizziert den aktuellen Setup von pre-commit hooks, statischer Code-Analyse-Tools (Flake8, Black) und Abhängigkeitsmanagement (setuptools, pip-tools) für Python-Projekte bei geOps."

weiterlesen

Kontakt

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