Best Practices

Diese Seite enthält Richtlinien und Best Practices für die Verwendung der Smolitux UI Komponenten in Ihren Projekten.

Allgemeine Richtlinien

Konsistenz bewahren

Verwenden Sie Komponenten konsistent in Ihrer gesamten Anwendung, um ein einheitliches Benutzererlebnis zu gewährleisten.

// ✅ Gut: Konsistente Verwendung von Button-Varianten
<Button variant="primary">Speichern</Button>
<Button variant="secondary">Abbrechen</Button>

// ❌ Schlecht: Inkonsistente Verwendung von Button-Varianten
<Button variant="primary">Speichern</Button>
<Button color="primary" variant="outlined">Abbrechen</Button>

Barrierefreiheit (Accessibility)

Stellen Sie sicher, dass Ihre Benutzeroberfläche für alle Benutzer zugänglich ist, einschließlich Personen mit Behinderungen.

// ✅ Gut: Verwendung von aria-label für bessere Barrierefreiheit
<Button aria-label="Schließen" variant="icon">✕</Button>

// ❌ Schlecht: Fehlende Beschreibung für Screenreader
<Button variant="icon">✕</Button>

Responsive Design

Gestalten Sie Ihre Benutzeroberfläche so, dass sie auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert.

// ✅ Gut: Responsive Layout mit Flex
<Flex 
  direction={{ base: 'column', md: 'row' }} 
  gap="md"
>
  <div>Sidebar</div>
  <div>Content</div>
</Flex>

// ❌ Schlecht: Feste Breiten, die auf kleinen Bildschirmen nicht funktionieren
<div style={{ display: 'flex' }}>
  <div style={{ width: '250px' }}>Sidebar</div>
  <div style={{ width: '750px' }}>Content</div>
</div>

Performance

Optimieren Sie die Leistung Ihrer Anwendung, indem Sie unnötige Neuberechnungen und Renderings vermeiden.

// ✅ Gut: Memoization für teure Berechnungen
const memoizedValue = React.useMemo(() => {
  return expensiveCalculation(a, b);
}, [a, b]);

// ❌ Schlecht: Teure Berechnungen bei jedem Rendering
const value = expensiveCalculation(a, b);

Komponenten-spezifische Best Practices

Buttons

• Verwenden Sie variant="primary" für die Hauptaktion in einem Formular oder einer Ansicht
• Verwenden Sie variant="secondary" für alternative Aktionen
• Verwenden Sie variant="outlined" oder variant="text" für weniger wichtige Aktionen
• Verwenden Sie aussagekräftige Labels, die die Aktion beschreiben (z.B. "Speichern" statt "OK")
• Fügen Sie Icons hinzu, um die Bedeutung zu verstärken, aber nicht zu ersetzen

// ✅ Gut: Klare Hierarchie und aussagekräftige Labels
<Button variant="primary">Speichern</Button>
<Button variant="secondary">Vorschau</Button>
<Button variant="outlined">Abbrechen</Button>

// ❌ Schlecht: Unklare Hierarchie und vage Labels
<Button variant="primary">OK</Button>
<Button variant="primary">Abbrechen</Button>
<Button variant="primary">Mehr</Button>

Formulare

• Gruppieren Sie zusammengehörige Formularelemente mit FormControl
• Verwenden Sie aussagekräftige Labels für alle Eingabefelder
• Zeigen Sie Validierungsfehler direkt bei den betroffenen Feldern an
• Verwenden Sie Platzhaltertext, um Beispiele zu geben, nicht als Ersatz für Labels
• Deaktivieren Sie den Submit-Button während der Formularverarbeitung

// ✅ Gut: Strukturiertes Formular mit Labels und Fehlermeldungen
<FormControl label="E-Mail" error={errors.email}>
  <Input
    type="email"
    value={email}
    onChange={handleChange}
    placeholder="beispiel@domain.de"
  />
</FormControl>

// ❌ Schlecht: Fehlende Labels und unklare Struktur
<Input
  type="email"
  value={email}
  onChange={handleChange}
  placeholder="E-Mail"
/>
{errors.email && <div style={{ color: 'red' }}>{errors.email}</div>}

Listen und Tabellen

• Verwenden Sie List für einfache Datenlisten
• Verwenden Sie Table für komplexe, tabellarische Daten
• Fügen Sie Paginierung für große Datensätze hinzu
• Implementieren Sie Sortier- und Filterfunktionen für bessere Benutzererfahrung
• Zeigen Sie Ladezustände an, wenn Daten asynchron geladen werden

// ✅ Gut: Tabelle mit Sortierung und Paginierung
<Table
  data={users}
  columns={columns}
  sortable
  pagination={{
    pageSize: 10,
    currentPage: page,
    totalItems: totalUsers,
    onPageChange: handlePageChange
  }}
/>

// ❌ Schlecht: Große Datenmenge ohne Paginierung
<table>
  <tbody>
    {allUsers.map(user => (
      <tr key={user.id}>
        <td>{user.name}</td>
        <td>{user.email}</td>
      </tr>
    ))}
  </tbody>
</table>

Layout-Komponenten

• Verwenden Sie Container für konsistente Seitenbreiten
• Verwenden Sie Flex für eindimensionale Layouts (Zeilen oder Spalten)
• Verwenden Sie Grid für zweidimensionale Layouts
• Nutzen Sie responsive Props, um das Layout an verschiedene Bildschirmgrößen anzupassen
• Vermeiden Sie feste Pixelwerte für Abstände und Größen

// ✅ Gut: Responsives Layout mit Flex und Grid
<Container>
  <Flex 
    direction={{ base: 'column', md: 'row' }} 
    gap="md"
  >
    <div style={{ flex: 1 }}>Sidebar</div>
    <Grid 
      columns={{ base: 1, md: 2, lg: 3 }} 
      gap="md" 
      style={{ flex: 3 }}
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Grid>
  </Flex>
</Container>

// ❌ Schlecht: Nicht-responsives Layout mit festen Größen
<div style={{ width: '1200px', margin: '0 auto' }}>
  <div style={{ display: 'flex' }}>
    <div style={{ width: '300px' }}>Sidebar</div>
    <div style={{ width: '900px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  </div>
</div>

Feedback-Komponenten

• Verwenden Sie Toast für temporäre Benachrichtigungen
• Verwenden Sie Alert für wichtige Informationen, die Aufmerksamkeit erfordern
• Verwenden Sie Spinner oder Skeleton für Ladezustände
• Zeigen Sie Fehlermeldungen in der Nähe der betroffenen Elemente an
• Geben Sie klare Anweisungen, wie Fehler behoben werden können

// ✅ Gut: Kontextbezogene Ladezustände und Feedback
{isLoading ? (
  <Spinner size="md" />
) : error ? (
  <Alert variant="error">
    Fehler beim Laden der Daten. Bitte versuchen Sie es später erneut.
  </Alert>
) : (
  <DataTable data={data} />
)}

// ❌ Schlecht: Unklare Ladezustände und Fehlermeldungen
{isLoading && <div>Loading...</div>}
{error && <div style={{ color: 'red' }}>Error!</div>}
{data && <DataTable data={data} />}

Theming und Anpassung

Konsistente Farbpalette

• Verwenden Sie die vordefinierten Farbvariablen aus dem Theme
• Vermeiden Sie hartcodierte Farbwerte in Ihrem Code
• Beschränken Sie sich auf die Hauptfarben für Konsistenz

// ✅ Gut: Verwendung von Theme-Farben
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>

// ❌ Schlecht: Hartcodierte Farbwerte
<button style={{ backgroundColor: '#3b82f6', color: 'white' }}>
  Custom Button
</button>

Typografie

• Verwenden Sie die vordefinierten Typografie-Stile
• Halten Sie sich an eine begrenzte Anzahl von Schriftgrößen
• Verwenden Sie semantische Komponenten wie Heading und Text

// ✅ Gut: Verwendung von Typografie-Komponenten
<Heading level={1}>Hauptüberschrift</Heading>
<Heading level={2}>Unterüberschrift</Heading>
<Text size="md">Normaler Text</Text>

// ❌ Schlecht: Inkonsistente Typografie
<h1 style={{ fontSize: '32px', fontWeight: 'bold' }}>Hauptüberschrift</h1>
<h2 style={{ fontSize: '24px', fontWeight: 'bold' }}>Unterüberschrift</h2>
<p style={{ fontSize: '16px' }}>Normaler Text</p>

Abstände

• Verwenden Sie das Spacing-System für konsistente Abstände
• Nutzen Sie die vordefinierten Werte (xs, sm, md, lg, xl)
• Verwenden Sie gap in Flex- und Grid-Layouts

// ✅ Gut: Konsistente Abstände mit dem Spacing-System
<Flex gap="md">
  <div>Element 1</div>
  <div>Element 2</div>
</Flex>

// ❌ Schlecht: Inkonsistente Abstände
<div style={{ display: 'flex' }}>
  <div style={{ marginRight: '15px' }}>Element 1</div>
  <div>Element 2</div>
</div>

Leistungsoptimierung

Memoization

Verwenden Sie React.memo, useMemo und useCallback, um unnötige Neuberechnungen und Renderings zu vermeiden.

// ✅ Gut: Memoization für Komponenten
const MemoizedComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

// ✅ Gut: Memoization für berechnete Werte
const sortedItems = React.useMemo(() => {
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

// ✅ Gut: Memoization für Event-Handler
const handleClick = React.useCallback(() => {
  console.log('Clicked!');
}, []);

Lazy Loading

Laden Sie Komponenten und Ressourcen bei Bedarf, um die initiale Ladezeit zu reduzieren.

// ✅ Gut: Lazy Loading von Komponenten
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <LazyComponent />
    </React.Suspense>
  );
}

Virtualisierung

Verwenden Sie Virtualisierung für lange Listen, um die Rendering-Leistung zu verbessern.

// ✅ Gut: Virtualisierte Liste für große Datensätze
<VirtualizedList
  data={largeDataset}
  height={500}
  itemHeight={50}
  renderItem={({ item }) => <ListItem primary={item.name} />}
/>

// ❌ Schlecht: Rendering aller Elemente auf einmal
<List>
  {largeDataset.map(item => (
    <ListItem key={item.id} primary={item.name} />
  ))}
</List>

Zusammenfassung

• Konsistenz: Verwenden Sie Komponenten und Stile konsistent in Ihrer Anwendung
• Barrierefreiheit: Stellen Sie sicher, dass Ihre UI für alle Benutzer zugänglich ist
• Responsivität: Gestalten Sie Ihre UI für verschiedene Geräte und Bildschirmgrößen
• Performance: Optimieren Sie die Leistung durch Memoization, Lazy Loading und Virtualisierung
• Theming: Nutzen Sie das Theming-System für konsistente Farben, Typografie und Abstände
• Feedback: Geben Sie klares Feedback über Ladezustände, Erfolge und Fehler

Durch die Befolgung dieser Best Practices können Sie hochwertige, benutzerfreundliche und leistungsstarke Anwendungen mit Smolitux UI erstellen.