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
7 min Lesezeit | Blog

Using Redis Subscriptions efficiently in Python

Inspired by the websockets broadcast feature we built a subscription multiplexer for redis subscriptions to subscribe to Redis channels and patterns once for all relevant clients.

weiterlesen
3 min Lesezeit | Blog

beyond tellerrand 2023

Am 11. September 2023 machten sich Mitglieder des Frontend-Teams von geOps auf den Weg nach Berlin, um an einer sehr interessanten und außergewöhnlichen Veranstaltung teilzunehmen: die beyond tellerrand Konferenz.

weiterlesen
3 min Lesezeit | Blog

React 18 Unterstützung für create-react-web-component

Wir wollen fünf Jahre alte Abhängigkeiten des Projekts trafimage-maps aktualisieren. Aber es scheint, dass eine Projektabhängigkeit veraltet ist. Was sollen wir tun? Das Projekt reparieren oder etwas anderes verwenden? Wir haben uns entschieden, das Projekt zu reparieren und der Gemeinschaft etwas zurückzugeben.

weiterlesen
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. Wir zeigen, 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

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

fon: +49 761 458 925 0
mail: info@geops.de
Impressum | Datenschutz | Bedingungen