TODO: Translate to English

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.

TODO: Translate to English

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)

Basically, each component can be freely styled within its HTML structure.

With the help of our designer or the SCSS script, existing themes can be adapted or your own themes can be created.

• Designer
• SCSS-Script

Button and custom class​

The button/switch has 5 types derived from the design language of the design systems:

• primary: switch for main action (e.g. save)
• secondary: switch for secondary action (e.g. cancel)
• normal/tertiary: switch for tertiary action (e.g. back)
• danger: switch for "dangerous" actions (e.g. delete)
• ghost: switch for "inconspicuous" actions (e.g. help)

In addition to these basic types, other types can be added using a custom class. To do this, however, all custom classes must be stored in the CSS of the theme.

Store custom class in the theme​

1. Open Theme Designer
2. Select theme
3. Select Button component
4. Switch to component styling
5. Enter and save CSS for the custom button (look at primary)
6. Theme in project übernehmen

Example of 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);
 }
}

Use custom class​

To switch to custom mode, the property _variant must be set to custom. Thereafter any predefined custom classes can be passed via the property _custom-class.

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

Style the icon in the button from the outside​

It is possible to transfer an icon style to the button. To do this, the desired style must be passed to the property _icon.

<KolButton
 _icons={{
  left: {
   icon: 'codicon codicon-home',
   style: {
    color: 'red',
    'font-size': '300%',
   },
  },
 }}
 _label="Switch with big red icon"
></KolButton>