Projects, Research, Design & Development in pursuit of Innovation, by Gustavo Adrián Salvini.
By Gustavo Salvini Posted in Deutsche, Development, My Projects on August 22, 2024
Copyright ©️ 2024 Gustavo Adrián Salvini
Die Entwicklung moderner Webanwendungen mit Web Components kann eine wirklich interessante Aufgabe sein, insbesondere wenn ein Projekt die Implementierung dynamischer und reichhaltiger Benutzererlebnisse umfasst, aber versucht, die Komplexität der Entwicklungserfahrung („dx“) nicht unnötig zu erhöhen und nicht zu viel unnötiges Gewicht zum endgültigen Build hinzuzufügen.
Für diesen Fall habe ich React 18, Vite als Tooling, React Suspense API, Valtio als Store, Chakra UI für die Benutzeroberfläche, FormatJS zur Handhabung mehrerer Sprachen und Formate je nach Standort und die hervorragende Convert-Units, eine Javascript-Bibliothek, die eine riesige Anzahl von Hilfsmitteln zur Umrechnung von Maßeinheiten (zwischen metrischen und imperialen, unter anderem Konventionen) sowohl für Längen-, Flächen-, Volumen-, Massen-, Zeit-, Geschwindigkeits-, Drehmoment-, Druck-, Beleuchtungs-, Spannungs-, Leistungs-, Energie-, Kraft- und viele andere Maßeinheiten, verwendet.
Das Ziel war es, einen Kit-Leveling-Calculator für die Installation von Porzellanfliesen zu erstellen.
Im zweiten Teil dieses Beitrags werde ich die App vorstellen. Ich möchte jedoch auf den offiziellen Start meines Kunden warten, um sie vollständig zu zeigen.
Die Entwicklungserfahrung war äußerst zufriedenstellend, und das erworbene Wissen ermöglichte es mir, ein kompaktes und vielseitiges Toolkit aus Technologien, Bibliotheken und Tools zusammenzustellen. Ich würde diese Kombination ohne Zweifel wieder für neue Projekte wählen.
In diesem Fall habe ich allein gearbeitet und es innerhalb von zwei Wochen abgeschlossen.1
import { Suspense, useContext, useEffect } from "react";
import { store as calcStore } from "./stores/calcstore";
import { useSnapshot } from "valtio";
import { LocaleContext } from "./i18n/LocaleContext";
import "./fonts/Inter-Regular.ttf";
import "./fonts/Inter-SemiBold.ttf";
import Calculator from "./components/Calculator";
import { useDocL10n } from "./i18n/useDocL10n";
import { Flex, Spinner } from "@chakra-ui/react";
const App = () => {
const sCalcData = useSnapshot(calcStore.data);
// eslint-disable-next-line no-unused-vars
const { locale, setLocale } = useContext(LocaleContext);
useDocL10n();
useEffect(() => {
setLocale(sCalcData.selectedLocaleId);
});
return (
<Suspense
fallback={
<Flex justifyContent="center" alignItems="center" h="100vh" w="full">
<Spinner
color="brand.400"
size="xl"
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
/>
</Flex>
}
>
<Calculator />
</Suspense>
);
};
export default App;Code language: JavaScript (javascript)Der Kit-Leveling-Calculator für die Installation von Porzellanfliesen ist eine Webanwendung, die darauf abzielt, Fachleuten und Heimwerkern bei der Installation von Porzellanfliesen zu helfen. Die Anwendung ermöglicht es, die benötigte Menge an Clips, Keilen und Zangen zu berechnen, um eine präzise und ebenmäßige Installation sicherzustellen. Zu den herausragendsten Merkmalen gehören:
Die Anwendung unterstützt verschiedene Sprachen und lokale Formate und passt sich somit den Nutzern aus verschiedenen Regionen an.
Dies umfasst die Umrechnung von Maßeinheiten zwischen dem metrischen System (Meter, Zentimeter, Millimeter) und dem imperialen System (Fuß und Zoll) sowie die Handhabung unterschiedlicher Tausender- und Dezimaltrennzeichen.
Durch die Nutzung der React Suspense API werden Ressourcen effizient geladen, was die Leistung und Benutzererfahrung verbessert.
React ist eine weit verbreitete JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Ihre Fähigkeit, Single-Page-Anwendungen (SPA) mit wiederverwendbaren Komponenten zu handhaben, macht sie zu einer idealen Wahl für dieses Projekt. React erleichtert die Erstellung interaktiver und dynamischer Benutzeroberflächen durch die Verwendung eines virtuellen DOM, das effiziente Aktualisierungen und eine optimierte Leistung ermöglicht.
Die React-Community ist umfangreich und aktiv und bietet eine Vielzahl an ergänzenden Bibliotheken und Werkzeugen.
Die komponentenbasierte Architektur von React ermöglicht die Wiederverwendung von Code, was die Entwicklung beschleunigt und die Wartung erleichtert.
Vite ist ein Werkzeug der neuen Generation zur Erstellung von Builds, das eine schnelle und effiziente Entwicklungserfahrung bietet. Im Gegensatz zu traditionellen Tools nutzt Vite die nativen ES-Module des Browsers, um eine sofortige Kompilierung und ein ultrarasches Hot-Reload zu ermöglichen.
Valtio ist eine State-Management-Bibliothek für React. Im Gegensatz zu anderen Lösungen wie Redux verwendet Valtio JavaScript-Proxies, um den Zustand reaktiv und effizient zu verfolgen und zu aktualisieren.
Vergleich mit anderen State-Management-Tools (Redux, MobX)
FormatJS ist eine Sammlung von JavaScript-Bibliotheken für die Internationalisierung, die es ermöglicht, Anwendungen zu erstellen, die mehrere Sprachen und lokale Formate unterstützen. Mit FormatJS ist es möglich, die Lokalisierung von Texten, Zahlen, Daten und Maßeinheiten auf einfache Weise zu handhaben.
Handhabung verschiedener Sprachen, Zahlenformate und Maßeinheiten
ChakraUI ist eine Komponentenbibliothek für Benutzeroberflächen in React, die eine Reihe von zugänglichen und stilisierten Komponenten bietet. Sein Fokus auf Barrierefreiheit und Anpassungsfähigkeit macht es zu einer ausgezeichneten Wahl für das Design moderner und responsiver Benutzeroberflächen.
Convert-units bietet eine einfache API mit verkettbaren Funktionen, die benutzerfreundlich und leicht lesbar ist. Sie kann sowohl mit integrierten als auch benutzerdefinierten Maßeinheiten konfiguriert werden.
Eine einfache Möglichkeit, zu verstehen, wie sie funktioniert, ist durch einige Beispiele:
Die Umrechnung zwischen Maßeinheitensystemen (metrisch und imperial) wird automatisch gehandhabt:
Alle Maßeinheiten auflisten, in die eine bestimmte Einheit umgerechnet werden kann:
`allMeasures` umfasst alle integrierten Maßeinheiten der Bibliothek
import configureMeasurements from 'convert-units';
import allMeasures from 'convert-units/definitions/all';
const convert = configureMeasurements(allMeasures);Code language: JavaScript (javascript)Umrechnung zwischen Maßeinheiten:
convert(1).from('l').to('ml');
// 1000Code language: JavaScript (javascript)Die Umrechnung zwischen Maßeinheitensystemen (metrisch und imperial) wird automatisch verwaltet:
convert(1).from('lb').to('kg');
// 0.4536...Code language: JavaScript (javascript)convert().measures();
// [ 'length', 'mass', 'volume', ... ]
const differentConvert = configureMeasurements({
volume,
mass,
length,
area,
});
differentConvert().measures();
// [ 'length', 'mass', 'volume', 'area' ]Code language: JavaScript (javascript)The translation into German is:
Alle Maßeinheiten auflisten, in die eine bestimmte Einheit umgerechnet werden kann:
convert().from('l').possibilities();
// [ 'ml', 'l', 'tsp', 'Tbs', 'fl-oz', 'cup', 'pnt', 'qt', 'gal' ]
convert().from('kg').possibilities();
// [ 'mcg', 'mg', 'g', 'kg', 'oz', 'lb' ]Code language: JavaScript (javascript)Während der Entwicklung dieser Anwendung traten mehrere Herausforderungen auf, die kreative und effiziente Lösungen erforderten.
Eine der größten Herausforderungen bestand darin, sicherzustellen, dass die Anwendung schnell und reaktionsfähig bleibt, selbst bei verzögertem Laden von Assets und Echtzeit-Internationalisierung.
Die Lösung bestand darin, Vite für den schnellen Build-Prozess und Valtio für das effiziente State Management zu nutzen.
Eine weitere Herausforderung war die korrekte Handhabung der Internationalisierung und Lokalisierung für verschiedene Sprachen und Formate.
FormatJS war entscheidend, um diesen Prozess zu vereinfachen. Dennoch musste sichergestellt werden, dass alle Zeichenketten und Formate konsistent und präzise waren.
Das effiziente und reaktive globale State Management stellte ebenfalls eine Herausforderung dar. Valtio vereinfachte diesen Prozess, indem es eine intuitive API und automatische Statusaktualisierungen bereitstellte, wodurch die Überlastung durch komplexere State-Management-Lösungen vermieden wurde.
Die Entwicklung dieser Web-App war eine bereichernde Erfahrung, die die Effektivität von Technologien und Ressourcen wie React, Vite, Valtio, Chakra UI und FormatJS unter Beweis stellte.
Die Möglichkeit, eine mehrsprachige und multi-locale Anwendung in nur zwei Wochen zu implementieren, während ich als alleiniger Entwickler und gleichzeitig frischgebackener Vater auch noch andere Aufgaben bewältigte, unterstreicht meiner Meinung nach die Leistungsfähigkeit und Effizienz dieser Technologien.
Die Wahl von ChakraUI für die Benutzeroberfläche ermöglichte die schnelle Entwicklung einer stilisierten und zugänglichen Anwendung, während die Suspense API von React die Leistung durch verzögertes Laden von Komponenten erheblich verbesserte.
Zusammenfassend lässt sich sagen, dass dieses Projekt nicht nur die funktionalen und leistungsbezogenen Ziele erfüllte, sondern auch wertvolle Lektionen und Best Practices für die Entwicklung moderner Frontend-Anwendungen vermittelte.
chakraui convert-units deutsche ecmascript FormatjS german javascript react suspense api valtio vite