Motivation​

Mit KoliBri können wir eine Web-App entwickeln, die auf allen Plattformen läuft. Das ist ein großer Vorteil, da wir uns nicht um die Entwicklung von Apps für verschiedene Plattformen kümmern müssen. Wir können uns auf die Entwicklung einer einzigen App konzentrieren, die auf allen Plattformen unter Verwendung der Webstandards läuft.

Grundlagen​

Was ist eine Single-Page-Webanwendung (SPA)?​

Eine Single-Page-Webanwendung (SPA) ist eine Art von Webanwendung, bei der der gesamte Inhalt einer Webseite in einer einzigen HTML-Seite geladen wird. Im Gegensatz zu herkömmlichen mehrseitigen Webanwendungen, bei denen für jede Aktion oder Seitenänderung eine separate HTML-Seite geladen wird, bleibt bei SPAs die Hauptseite unverändert, während nur bestimmte Teile der Seite dynamisch aktualisiert werden.

Bei einer SPA wird die gesamte Logik und Interaktion im Front-End-Bereich abgewickelt, normalerweise mithilfe von JavaScript-Frameworks oder -Bibliotheken wie React, Angular oder Vue.js. Diese Frameworks ermöglichen es Entwicklern, komplexe Benutzeroberflächen zu erstellen und die Aktualisierung von Inhalten oder die Navigation zwischen verschiedenen Ansichten ohne vollständiges Neuladen der Seite zu steuern.

Der Hauptvorteil einer SPA liegt in der schnelleren Benutzererfahrung, da nur der erforderliche Inhalt geladen und aktualisiert wird, ohne dass die gesamte Seite neu gerendert werden muss. Dies führt zu einem nahtlosen und reaktionsfähigen Benutzererlebnis, ähnlich wie bei Desktopanwendungen.

Eine SPA kann auch eine bessere Trennung von Front-End- und Back-End-Entwicklung ermöglichen, da das Back-End in der Regel eine API bereitstellt, über die die SPA Daten abrufen und senden kann.

Es ist wichtig anzumerken, dass SPAs ihre eigenen Herausforderungen haben, insbesondere in Bezug auf die Suchmaschinenoptimierung (SEO) und den initialen Ladevorgang, da die gesamte Anwendung zuerst heruntergeladen werden muss. Es erfordert auch sorgfältige Handhabung der Seitennavigation und des Zustandsmanagements, um sicherzustellen, dass die Anwendung korrekt funktioniert.

Insgesamt bieten SPAs eine moderne Herangehensweise an die Webentwicklung, die ein interaktives und reibungsloses Benutzererlebnis ermöglicht, indem sie den traditionellen mehrseitigen Ansatz umgeht und den Fokus auf dynamische Aktualisierungen und schnelle Interaktionen legt.

Was ist eine Progressive Web App (PWA)?​

Eine Progressive Web App (PWA) ist eine Art von Webanwendung, die bestimmte Funktionen und Eigenschaften von nativen mobilen Apps und Webtechnologien kombiniert. PWAs sind darauf ausgelegt, ein besseres Benutzererlebnis auf verschiedenen Plattformen und Geräten zu bieten, unabhängig davon, ob der Benutzer über einen Webbrowser zugreift oder die Anwendung auf dem Startbildschirm seines mobilen Geräts installiert.

Hier sind einige Merkmale und Vorteile von Progressive Web Apps:

1. Zuverlässigkeit: PWAs sind in der Lage, auch bei schlechter Internetverbindung zu funktionieren, indem sie Mechanismen wie Caching und Offline-Speicherung nutzen. Dies ermöglicht den Benutzern den Zugriff auf Inhalte und Funktionen, auch wenn sie keine stabile Internetverbindung haben.

2. Responsives Design: PWAs passen sich automatisch an verschiedene Bildschirmgrößen und Geräte an. Sie bieten ein reaktionsschnelles und konsistentes Benutzererlebnis auf Desktops, Tablets und Mobilgeräten.

3. App-ähnliches Verhalten: PWAs können wie native Apps auf dem Startbildschirm des Geräts installiert werden und von dort aus gestartet werden. Sie können Benachrichtigungen senden, Offlinefunktionen nutzen und auf Gerätefunktionen wie Kamera, GPS und mehr zugreifen.

4. Aktualisierungen: PWAs werden automatisch aktualisiert, ohne dass der Benutzer die Anwendung manuell aktualisieren oder im App Store nach Aktualisierungen suchen muss. Dadurch erhalten Benutzer immer die neueste Version der Anwendung.

5. Suchmaschinenoptimierung (SEO): PWAs sind von Natur aus suchmaschinenfreundlich, da sie über eine URL zugänglich sind und von Suchmaschinen indexiert werden können. Dies erleichtert die Auffindbarkeit und Sichtbarkeit der Anwendung in Suchergebnissen.

PWAs werden mit Webtechnologien wie HTML, CSS und JavaScript entwickelt und verwenden moderne APIs und Frameworks wie Service Workers, um die oben genannten Funktionen zu ermöglichen.

Der Einsatz von PWAs bietet Unternehmen und Entwicklern die Möglichkeit, kostengünstig plattformübergreifende Anwendungen zu erstellen, die eine breite Reichweite haben und ein reibungsloses Benutzererlebnis bieten. PWAs werden zunehmend populär und von Unternehmen unterschiedlicher Branchen eingesetzt, um ihre Webpräsenz zu verbessern und Kunden besser zu erreichen.

Was ist eine Hybrid-App?​

Eine Hybrid-App ist eine Art von mobiler Anwendung, die sowohl webbasierte als auch native Elemente kombiniert. Sie wird mit Webtechnologien wie HTML, CSS und JavaScript entwickelt und verwendet anschließend ein sogenanntes Hybrid-Framework oder eine Hybrid-Plattform, um die Anwendung in eine native App zu verpacken. Hybrid-Apps können auf verschiedenen Plattformen wie iOS, Android und Windows laufen.

Hier sind einige Merkmale und Vorteile von Hybrid-Apps:

1. Entwicklungsansatz: Hybrid-Apps ermöglichen die Entwicklung einer einzigen Codebasis, die auf verschiedenen Plattformen läuft. Dadurch können Unternehmen Zeit und Ressourcen sparen, da sie nicht separate Teams für die Entwicklung nativer Apps für jede Plattform benötigen.

2. Webbasierte Technologien: Hybrid-Apps nutzen Webtechnologien wie HTML, CSS und JavaScript, was bedeutet, dass Entwickler mit vorhandenem Webentwicklungswissen die Anwendungsentwicklung beschleunigen können.

3. Zugriff auf native Funktionen: Hybrid-Apps können auf native Funktionen des Geräts zugreifen, wie z.B. Kamera, GPS, Kontakte und Benachrichtigungen, indem sie spezielle APIs oder Plugins verwenden. Dadurch können Entwickler Funktionen erstellen, die normalerweise nur in nativen Apps verfügbar sind.

4. Plattformübergreifende Unterstützung: Hybrid-Frameworks bieten Unterstützung für plattformübergreifende Entwicklung, sodass Entwickler denselben Code auf verschiedenen Plattformen wiederverwenden können. Dadurch wird die Entwicklungszeit verkürzt und die Wartung der Anwendung vereinfacht.

5. Vereinfachte Updates: Änderungen oder Updates an der Anwendung können in Echtzeit vorgenommen werden, ohne dass Benutzer die App aktualisieren müssen. Dies ermöglicht es Unternehmen, schnell auf Benutzerfeedback zu reagieren und neue Funktionen oder Fehlerbehebungen bereitzustellen.

Einige beliebte Hybrid-Frameworks und Plattformen sind Cordova/PhoneGap, Ionic und React Native. Diese Frameworks verwenden WebView-Komponenten, um den webbasierten Inhalt innerhalb einer nativen Container-App anzuzeigen.

Es ist wichtig anzumerken, dass Hybrid-Apps im Vergleich zu nativen Apps möglicherweise nicht die gleiche Leistung oder nahtlose Integration in die Plattform bieten können. Die Wahl zwischen einer Hybrid-App und einer nativen App hängt von den spezifischen Anforderungen des Projekts, dem erforderlichen Grad an Plattformintegration und der Benutzererfahrung ab, die Sie erreichen möchten.

WIP: Dieser Artikel wird immer wieder entwicklungsbegleitend aktualisiert.

Die wichtigsten Änderungen sind:

• Verbesserungen
• Refactorings
  • Vereinheitlichung von Properties der Komponenten (siehe -Konzept)
    • _alignment vom Popover in _align umbenannt
    • Typ Alignment wurde intern in Align umbenannt
    • _label wird in Version 2 folgende Properties ersetzen:
      • _aria-label von Breadcrumb, Button, ButtonLink, Icon, Link, LinkButton, Modal, Nav, SkipNav, SplitButton, Symbol und Tabs
      • _caption von Quote und Table
      • _heading von Accordion, Alert, Card und Toast
      • _headline von Card
      • _quote von Quote (?)
      • _summary von Details
      • _symbol von Symbol
      • _title von Abbr
    • Properties, die zukünftig nicht mehr benötigt werden
      • _has-footer von Card
      • _height_ von Select
      • _icon-align ...
      • _part ...
      • _show-dropdown ...
• Expert-Slot
  • Alle Inputs-, Select- und Textarea-Komponenten haben nun einen Expert-Slot und das _label ist Pflicht. Wenn das _label="" leer bleibt, dann wird das Label über den Slot, wie gewohnt angezeigt.
  • Code-Replacement - am besten einzeln ersetzen:
    • (<Kol(Button|Button|Link|Heading|Input[^>]+|Link|LinkButton|Select|Textarea))>(\n?\t*)([^\n]+)[^<]+<\/Kol(Button|Button|Link|Heading|Input[^>]+|Link|LinkButton|Select|Textarea)> -> $1 _label="$5" />
• Theming
• Dokumentation
• Adapter
  • Vaadin: Optimierungen am Code-Generator
  • JSF: Verbesserung für statische/klassische Formulare (experimental)

Im Grunde ist es so, dass jede Komponente innerhalb ihrere HTML-Struktur frei gestylt werden kann.

Mit Hilfe unsereres Designers oder dem SCSS-Script können vorhandene Themes angepasst oder eigenes Theme erstellt werden.

• Designer
• SCSS-Script

Button und Custom-Class​

Beim Button/Schalter gibt es 5 Typen, die von der Design Sprache der Design Systeme abgeleitet wurden:

• primary: Schalter für Hauptaktion (z.B. speichern)
• secondary: Schalter für Sekundäraktion (z.B. abbrechen)
• normal/tertiary: Schalter für Tertiäraktion (z.B. zurück)
• danger: Schalter für "„gefährliche” Aktionen (z.B. löschen)
• ghost:Schalter für "unscheinbare” Aktionen (z.B. Hilfe)

Neben diesen Basis-Typen können noch weiterer Typen mittels Custom-Class hinzugefügt werden. Dazu müssen jedoch alle Custom-Classes im CSS des Theme hinterlegt werden.

Custom-Class im Theme hinterlegen​

1. Theme-Designer öffnen
2. Theme auswählen
3. Button-Komponente auswählen
4. Schalter auf Komponent-Styling umstellen
5. CSS für den Custom-Button eintragen und speichern (bei primary abschauen)
6. Theme in Projekt übernehmen

Beispiel für Custom-Class loading:

.loading :is(a, button) > kol-span-wc kol-icon {
 animation: spin 2.5s infinite linear;
 display: block;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
@media (prefers-reduced-motion) {
 .loading :is(a, button) > kol-span-wc kol-icon {
  animation-duration: 5s;
 }
}
@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

Custom-Class verwenden​

Um in den Custom-Modus zu schalten, muss das Property _variant auf custom gesetzt werden. Danach können über das Property _custom-class beliebige vordefinierte Custom-Classes übergeben werden.

<kol-button _custom-class="loading" _label="Speichern" variant="custom"></kol-button>

Icon im Button von außen stylen​

Es ist möglich dem Button einen Icon-Style zu übergeben. Dazu muss dem Property _icon der gewünschte Style übergeben werden.

<KolButton
 _icons={{
  left: {
   icon: 'codicon codicon-home',
   style: {
    color: 'red',
    'font-size': '300%',
   },
  },
 }}
 _label="Schalter mit großen roten Icon"
></KolButton>