# 2.3 Konkurrenzanalyse und Positionierung

## 2.3 Konkurrenzanalyse und Positionierung

Im Rahmen der Entwicklung der Kolibri Dropdown-Komponente ist die Untersuchung der bestehenden Lösungen ein wichtiger Bestandteil. Dadurch zeigen sich Stärken und Schwächen gängiger Auswahlkomponenten auf. Diese Analyse dient als Grundlage für die Gestaltung einer benutzerfreundlichen, technisch effizienten und unabhängigen Komponente. Diese ist speziell auf die Bedürfnisse Endnutzer zugeschnitten.

### **2.3.1 Vergleich bestehender Lösungen**

Standard-HTML-Elemente wie `<select>` und `<datalist>` bieten zwar grundlegende Funktionalitäten, sind jedoch in Bezug auf Designflexibilität und Benutzerfreundlichkeit limitiert. Bibliotheksabhängige Lösungen wie Bootstrap, React und Vue.js erweitern zwar die Möglichkeiten, bringen aber zusätzliche Abhängigkeiten und Einarbeitungsaufwand mit sich. jQuery-basierte Lösungen bieten eine verbesserte Benutzererfahrung, sind jedoch ebenfalls von externen Bibliotheken abhängig.

([W3Schools, 2023](https://kolibri-selection-component.gitbook.io/kolibri-auswahlkomponente/verzeichnisse/quellenverzeichnis)) Das `select`-Tag von HTML bietet nur sehr begrenzte Möglichkeiten in der Gestaltung bzw. Darstellung der Auswahl-Elemente. Grosse Datenmengen benutzerfreundlich darzustellen stellt sich als sehr schwierig dar. Das HTML-Element wird von allen Browsern unterstützt und nimmt nur vorgegebene Werte an.&#x20;

([W3Schools, 2023](https://kolibri-selection-component.gitbook.io/kolibri-auswahlkomponente/verzeichnisse/quellenverzeichnis)) Eine HTML-`datalist` ist an ein Input-Feld gebunden und bietet ebenfalls fast kein Spielraum für ein eigenes Design. Dabei können eigene Werte eingegeben werden, was nicht in allen Fällen erwünscht ist. Ein Vorteil ist, die Liste filtert bzw. passt sich bei einer Eingabe automatisch an.&#x20;

### **2.3.2 Vergleichende Übersicht der Dropdown-Komponenten**

Tabelle 2.1 - Vergleich der Konkurrenz Produkte

| Komponente               | Vorteile                              | Nachteile                                  | Besonderheiten                                     |
| ------------------------ | ------------------------------------- | ------------------------------------------ | -------------------------------------------------- |
| HTML `select`            | Browserübergreifende Unterstützung    | Begrenzte Gestaltungsmöglichkeiten         | Einfach, nimmt nur vorgegebene Werte an            |
| HTML `datalist`          | Automatische Filterung bei Eingabe    | Begrenztes Design, ermöglicht eigene Werte | Bindung an ein Input-Feld                          |
| use-bootstrap-select     | Umfangreiche Gestaltungsmöglichkeiten | Erfordert Einarbeitung in die Bibliothek   | Unterstützt Suchfunktion, Mehrfachauswahl          |
| EasyDropDown.js          | Leichtgewichtig, anpassbar            | Dokumentation notwendig                    | Drei Designs verfügbar                             |
| React Dropdown           | Unterstützt Optgroups, Platzhalter    | Abhängig von React                         | Einfache Installation mit npm                      |
| React Bootstrap Dropdown | Umfangreiche Anpassungsoptionen       | Erfordert mehrere Abhängigkeiten           | Unterstützt verschiedene Grössen und Ausrichtungen |
| Vue-Multiselect          | Multi-Selektion, Tagging              | Abhängig von Vue.js                        | Ermöglicht benutzerdefinierte Vorlagen             |
| Chosen (jQuery-basiert)  | Suchfunktion, Multi-Selektion         | Abhängig von jQuery                        | Anpassbares Erscheinungsbild                       |
| Kolibri Dropdown         | Unabhängig, benutzerfreundlich        | Kolibri Toolkit spezifisch programmiert    | Einfache Integration, anpassbar, hohe Performance  |

### **2.3.3 Spezifische Herausforderungen und Einschränkungen**

Diese Lösungen stellen Entwickler oft vor Herausforderungen hinsichtlich der Integration, Anpassungsfähigkeit und Performance. Insbesondere bei grossen Datenmengen und spezifischen Designanforderungen offenbaren sich die Grenzen herkömmlicher Dropdown-Elemente.

### **2.3.4 Eigene Entwicklung: Kolibri Dropdown-Komponente**

Die Kolibri Dropdown-Komponente soll unabhängig von externen Bibliotheken funktionieren. Diese Komponente zeichnet sich durch eine hohe Flexibilität, einfache Integration und benutzerfreundliche Interaktion aus. Sie folgt den Design- und Codierungsstandards von Kolibri und sie soll einfach in verschiedene Webprojekte integrierbar sein.

### **2.3.5 Vorteile der Kolibri Dropdown-Komponente**

* *Unabhängigkeit von Drittbibliotheken*: \
  Die neue Komponente benötigt keine externen Abhängigkeiten, was die Sicherheit und Stabilität erhöht.
* *Benutzerfreundlichkeit und Zugänglichkeit*: \
  Die Komponente entwickelt sich mit Fokus auf eine intuitive und barrierefreie Benutzererfahrung.
* *Anpassungsfähigkeit und Erweiterbarkeit*: \
  Sie lässt sich leicht an unterschiedliche Designrichtlinien und Anforderungen anpassen.
* *Technische Effizienz*: \
  Durch die Vermeidung unnötiger Bibliotheken wird eine hohe Performance erreicht.

### **2.3.5 Fazit**

Die Kolibri Dropdown-Komponente soll ein Fortschritt in der Entwicklung von benutzerzentrierten, technisch effizienten Webanwendungen sein. Als Reaktion auf die Einschränkungen bestehender Lösungen entsteht diese Selektionskomponente und erweitert das Kolibri Toolkit um eine wichtige und flexible Funktionalität.

Die meisten anderen Konkurrenz-Auswahlkomponenten benötigen möglicherweise eine längere Einarbeitungszeit, da eine Dokumentation durchgelesen werden muss oder die Anwendung sehr komplex sein kann. Weiter haben viele Library-Lösungen Abhängigkeiten zu weiteren Komponenten oder externen Ressourcen wie einem Package Manager. Die Verwendung von Bibliotheken hat zur Folge, dass Vertrauen auf die Sicherheit und Verfügbarkeit der Ressourcen erforderlich ist. Anderenfalls ist mit Abstrichen zu rechnen. Einige Konkurrenzprodukte erfordern viele Codezeilen, um die gewünschte Funktionalität zu erreichen. Häufig ist die Definition spezifischer Konfigurationen notwendig. Diese Kenntnisse unterstützen die Recherche nach Umsetzungsmöglichkeiten.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kolibri-selection-component.gitbook.io/kolibri-auswahlkomponente/2-grundlagen/2.3-konkurrenzanalyse-und-positionierung.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.