Wenn die mobile Anwendung eine Progressive Web App (PWA) ist und sich den Code mit der Desktop-Webanwendung teilt, erfordert die Migration von Komponenten vom Web auf Mobilgeräte oft nur geringfügige Anpassungen an plattformspezifische Besonderheiten. Doch dieser scheinbar einfache Prozess bringt auch einige Herausforderungen mit sich. In diesem Artikel werde ich einige der häufigsten Herausforderungen beleuchten, auf die man bei der Migration achten sollte.

‍

Übrigens, wenn Sie neugierig sind, welches Framework wir bei ilert für unsere App verwenden, lesen Sie unseren Artikel „Ionic vs. React Native: Welche Technologie eignet sich besser für mobile Apps?“ 

Was ist eine Progressive Web App (PWA) und warum ist die Migration von Desktop zu Mobile damit einfacher?

Falls Sie bereits mit PWAs gearbeitet haben, können Sie dieses Kapitel gerne überspringen.

‍

Eine Progressive Web App, kurz PWA, ist eine Webanwendung, die das Beste aus beiden Welten kombiniert. PWAs nutzen moderne Web-Technologien wie Offline-Unterstützung, Push-Benachrichtigungen und Installierbarkeit, laufen aber dennoch in einem Browser. Da eine PWA einen gemeinsamen Codebase für verschiedene Plattformen verwendet, ist die Migration von Komponenten einer Desktop-Webanwendung zu einer mobilen PWA oft einfacher als der Wechsel zu einer vollständig nativen mobilen App. Viele Komponenten können mit minimalen Anpassungen wiederverwendet werden – hauptsächlich durch die Optimierung für Touch-Steuerung, unterschiedliche Bildschirmgrößen und mobile UI-Patterns.

‍

Doch auch wenn der gemeinsame Code die Entwicklungszeit erheblich reduziert, erfordert das unterschiedliche Nutzerverhalten sowie die spezifischen Plattformbeschränkungen gezielte Anpassungen, um eine nahtlose Benutzererfahrung zu gewährleisten. Schauen wir uns also genauer an, welche Herausforderungen dabei auftreten.

‍

Touch vs. Klick / Finger vs. Cursor

Der offensichtlichste, aber dennoch entscheidende Unterschied liegt in der Art und Weise, wie Nutzer mit Desktop- und mobilen Anwendungen interagieren. Damit eine mobile App gut bedienbar ist, müssen interaktive Bereiche größer gestaltet sein. Zudem gibt es bei Touchscreens keine Hover-Zustände – stattdessen sind nur „Fokus“ oder „Aktiv“-Zustände verfügbar.

‍

Ein Beispiel: In einer Webanwendung funktioniert ein Dropdown-Menü mit Hover-Effekten gut, da Nutzer es mit der Maus präzise steuern können. Auf Mobilgeräten wird dasselbe Dropdown jedoch schnell frustrierend in der Bedienung. Eine bessere Lösung ist stattdessen ein Modal oder ein Vollbild-Menü mit großen, einfach zu treffenden Flächen zum Tippen.

‍

In der Webanwendung würde der Code für diese Komponente in JSX ungefähr so aussehen:

‍

1<Popover>
2	<PopoverContent>
3		<Stack>
4			<Searchbar />
5			<List />
6		</Stack>
7	</PopoverContent>
8</Popover>
9

‍

Bei der Umstellung dieser Komponente auf Mobilgeräte mit dem Ionic-Framework sieht der JSX-Code so aus:

‍

1<IonModal>
2	<IonHeader>
3	   <Searchbar />
4	</IonHeader>
5	<ModalContent>
6		<IonList>
7			<IonItem>
8				<IonListHeader>
9					<IonLabel>Option 1</IonLabel>
10				</IonListHeader>
11			</IonItem>
12   		  	…
13   	 </IonList>
14	</ModalContent>
15</IonModal>

‍

Ein Modal stellt sicher, dass der Inhalt im Vollbildmodus angezeigt wird, während die Liste mit Elementen große Touch-Flächen bietet. Falls weniger Anpassungen erforderlich sind, stellt Ionic außerdem eine spezielle Komponente für Dropdowns bereit, die die Migration noch weiter vereinfacht:

1<IonSelect value={selectedValue} onIonChange={handleChange}>
2	<IonSelectOption value="option1">Option 1</IonSelectOption>
3	<IonSelectOption value="option2">Option 2</IonSelectOption>
4	<IonSelectOption value="option3">Option 3</IonSelectOption>
5</IonSelect>

Ein ähnliches Problem tritt bei Tooltips auf. Auf dem Desktop können Nutzer mit der Maus über ein Element hovern, um zusätzliche Informationen in einem Tooltip anzuzeigen. Auf Mobilgeräten gibt es jedoch keine Hover-Funktion. Stattdessen wird ein längeres Halten eher als Aktion verstanden, z. B. zum Öffnen eines Kontextmenüs, anstatt lediglich eine kurze Information anzuzeigen. In solchen Fällen ist es oft besser, die relevanten Informationen direkt sichtbar zu machen oder ein zusätzliches Modal zu verwenden.

Visuelle Unterschiede

Mobile Bildschirme sind kleiner und ermöglichen es Inhalten nur vertikal zu wachsen, während Webanwendungen in der Regel mehr Platz in der Breite haben. Dank der größeren Bildschirme kann der Inhalt auf dem Desktop sowohl vertikal als auch horizontal wachsen.

‍

Ein Beispiel: In einer Webanwendung werden alle Menüeinträge einer Navigationsleiste horizontal dargestellt. Auf mobilen Geräten hingegen wird dieselbe Navigationsleiste oft in ein Hamburger-Menü umgewandelt, um Platz zu sparen.

‍

Ein weiteres Beispiel betrifft Popovers: Während Popovers in der Webanwendung oft ausreichen, fehlt auf mobilen Geräten häufig der nötige Platz, um den Inhalt vollständig anzuzeigen. Das Problem wird noch deutlicher, wenn sich innerhalb des Popovers ein Dropdown-Menü befindet, da dieses auf Mobilgeräten wiederum ein weiteres Modal erfordert. Die Lösung besteht darin, mehrere Modals übereinander zu stapeln, sodass genügend Platz für alle Inhalte vorhanden ist.

Aktion: Alarme annehmen

Die Navigation mit einer Maus ermöglicht präzisere Bewegungen und Klicks, wodurch versehentliche Aktionen reduziert werden. Auf Mobilgeräten führen der kleinere Bildschirm und die Touch-Bedienung hingegen häufiger zu Fehleingaben. Um dieses Problem zu lösen, benötigen mobile Apps oft Bestätigungsschritte und eine durchdachte Platzierung von Aktionsbuttons.

Beispiel aus der ilert-Mobile-App: Alarmannahme auf Desktop vs. Mobile:

• Web: Button oben links, keine Bestätigung erforderlich
• Mobil: Button in der unteren Aktionsleiste, zusätzliches Bestätigungsdialogfeld

‍

‍

Während der „Annehmen“-Button oben auf dem Desktop gut erreichbar ist, wird er auf dem Handy in die untere Aktionsleiste verschoben, damit er bequem mit dem Daumen erreicht werden kann.

Schritte zur Migration von Desktop-Komponenten zu einer Progressive Web App

Die endgültige Migration von der Desktop-App zur PWA hängt stark von der Komplexität der Komponenten, dem Einsatzzweck und der Verwendung einer Komponentenbibliothek ab.

Im Allgemeinen sollten folgende Schritte befolgt werden:

• Wiederverwendbare Komponenten identifizieren
• Hover-Effekte ersetzen
• Touch-Interaktionen implementieren
  • Interaktionen bei Bedarf vereinfachen
• Prüfen, ob eine Orientierungserkennung nötig ist
• Schriftgrößen und visuelle Elemente für verschiedene Bildschirmgrößen skalieren

Der Einsatz einer Komponentenbibliothek wie Ionic erleichtert den Prozess erheblich, da sie plattformspezifische Style-Anpassungen bietet und native Funktionen integriert. Falls jedoch ein konsistentes Design über alle Geräte hinweg gewünscht ist, kann eine individuelle Lösung von Anfang an sinnvoller sein, um späteren Mehraufwand zu vermeiden.

‍

Wir freuen uns, eine neue Inbound-Integration in ilert anzukündigen: RapidSpike. Diese Integration verbessert das Incident Management, indem sie ilert mit den Website-Überwachungsfunktionen von RapidSpike verbindet. Dadurch erhalten Teams Alarmierungen zu Website-Performance, Uptime und Sicherheitsbedrohungen in Echtzeit.

Was ist RapidSpike und welche Vorteile bietet die Integration ilert-Nutzern?

RapidSpike ist eine umfassende Plattform für Digital Experience Monitoring. Sie unterstützt Unternehmen dabei, die optimale Leistung, Sicherheit und Verfügbarkeit ihrer Websites sicherzustellen. Die Lösung bietet synthetisches Monitoring, bei dem Benutzerinteraktionen simuliert werden, um Performance-Engpässe proaktiv zu identifizieren.

‍

Zusätzlich liefert RapidSpike Cybersecurity-Analysen, die Unternehmen helfen, Sicherheitslücken zu erkennen, Datenschutzverletzungen zu verhindern und die Einhaltung von Branchenstandards sicherzustellen. Durch die kontinuierliche Überwachung von Website-Performance und Sicherheit ermöglicht RapidSpike eine bessere Nutzererfahrung, den Schutz sensibler Daten und eine hohe Verfügbarkeit.

‍

Mit der ilert + RapidSpike-Integration können Nutzer:

‍

• Sofortige Warnmeldungen in ilert erhalten, wenn RapidSpike Downtimes, lange Ladezeiten oder Sicherheitsrisiken erkennt.
• Den Incident-Response-Prozess automatisieren, indem Alarmierungen gemäß den Dienstplänen und Eskalationsregeln an die richtigen Teams weitergeleitet werden.
• Alarm-Übermüdung reduzieren dank der intelligenten Benachrichtigungsregeln und KI-gestützter Vermeidung von Alarmflut in ilert.

• Die Servicezuverlässigkeit verbessern, indem RapidSpike-Ereignisse mit anderen Monitoring-Tools in einer zentralisierten Incident-Management-Plattform korreliert werden.
• Alarmierungen und Störungen auswerten, um die langfristige Zuverlässigkeit durch detailliertes Reporting zu steigern.

ilert und RapidSpike: Die ideale Kombination für den Einzelhandel

Sowohl ilert als auch RapidSpike unterstützen Einzelhändler in ganz Europa mit wichtigen Tools, um eine hohe Verfügbarkeit, Sicherheit und Leistung ihrer Websites zu gewährleisten. Einzelhändler jeder Größe sind auf nahtlose digitale Erlebnisse angewiesen, um die Kundenzufriedenheit und den Umsatz zu maximieren.

‍

Diese Integration bietet eine umfassende Website-Überwachung und Incident-Response-Lösung, die es Unternehmen ermöglicht, Probleme schnell zu erkennen und zu beheben.

‍

• Für kleine und mittelständische Einzelhändler stellt die Kombination von ilert und RapidSpike eine kosteneffiziente und zuverlässige Lösung für Uptime Monitoring und Risikominimierung dar.
• Große Unternehmen profitieren von fortschrittlicher Automatisierung und Alarmierungen in Echtzeit, sodass IT- und Operations-Teams proaktiv auf Störungen reagieren können.

‍

Mit ilert und RapidSpike können Einzelhändler – unabhängig von Unternehmensgröße oder technischer Komplexität – sicherstellen, dass ihre Websites jederzeit betriebsbereit, sicher und optimiert sind.

So nutzen Sie die Integration

Um Alarmierungen über RapidSpike an ilert zu senden, wählen Sie zunächst RapidSpike in der ilert-Oberfläche unter den verfügbaren Alarmierungsquellen aus.

Folgen Sie anschließend den Anweisungen auf dem Bildschirm, um die RapidSpike-Einstellungen zu konfigurieren. Nachdem Sie alles eingerichtet haben, kopieren Sie die generierte URL und melden sich in Ihrem RapidSpike-Konto an. Wählen Sie nun in der RapidSpike-Benutzeroberfläche die Option für Webhook-Integration aus und fügen Sie die Webhook-URL in das entsprechende Feld ein.

Die vollständige Schritt-für-Schritt-Anleitung zur Verbindung von ilert und RapidSpike finden Sie in unserer Dokumentation. Falls Sie Fragen haben, steht Ihnen das ilert-Support-Team jederzeit zur Verfügung.

Bei der Entwicklung einer mobilen Anwendung ist die Wahl des richtigen Frameworks entscheidend, um sowohl die Expertise des Teams als auch die Projektanforderungen optimal zu berücksichtigen. Zwei der beliebtesten Frameworks für plattformübergreifende Entwicklung sind Ionic und React Native.

‍

In diesem Artikel vergleichen wir beide Technologien und erklären, warum wir bei ilert uns für Ionic als Grundlage unserer mobilen App entschieden haben.

Ionic vs. React Native: Ein kurzer Überblick

Was ist Ionic?

Ionic ist ein Open-Source-UI-Toolkit zur Entwicklung leistungsstarker, qualitativ hochwertiger mobiler und Desktop-Anwendungen mit Webtechnologien wie HTML, CSS und JavaScript/TypeScript. Ionic-Apps sind im Kern Webanwendungen, die in einer nativen Umgebung mithilfe von Tools wie Capacitor oder Cordova ausgeführt werden. Dadurch erhalten sie Zugriff auf native APIs und Gerätefunktionen.

Was ist React Native?

React Native ist ein JavaScript-Framework zur Entwicklung echter nativ gerenderter mobiler Anwendungen für iOS und Android. Es basiert auf React, der beliebten UI-Bibliothek von Facebook, und ermöglicht es Entwicklern, Oberflächen mit deklarativen Komponenten zu erstellen, die unter der Haube in native Komponenten übersetzt werden.

Vergleich: Ionic vs. React Native

Warum haben wir bei ilert uns für Ionic entschieden?

Wir haben sowohl React Native als auch Ionic sorgfältig evaluiert. Letztendlich passte Ionic besser zu unseren Anforderungen und unserem Technologie-Stack. Hier sind die Hauptgründe für unsere Entscheidung:

• Capacitor
  Capacitor ist die offizielle Cross-Plattform-Laufzeitumgebung von Ionic. Sie ermöglicht es, Webanwendungen zu entwickeln und diese problemlos auf iOS, Android und im Web bereitzustellen. Im Vergleich zu herkömmlichen Cordova-Plugins bietet Capacitor einen effizienteren und moderneren Ansatz für den Zugriff auf native APIs, was unseren Entwicklungsprozess erheblich optimiert.‍
• Konsistente UI out of the box
  Ionic stellt eine umfangreiche Bibliothek an vorgefertigten UI-Komponenten bereit, darunter Buttons, Listen, Tabs und Formulare, die sich automatisch an die Designrichtlinien der jeweiligen Plattform anpassen. Diese Konsistenz hat uns viel Zeit gespart, da wir keine eigene plattformübergreifende Benutzeroberfläche von Grund auf entwickeln mussten.‍
• Flexibilität durch die native Ebene von Capacitor
  Capacitor lässt sich nahtlos in native iOS- und Android-Projekte integrieren, sodass Entwickler bei Bedarf eigenen nativen Code schreiben können. Diese Flexibilität ermöglicht es uns, spezialisierte Funktionen einfach zu integrieren oder leistungsrelevante Bereiche unserer App gezielt zu optimieren.‍
• Flexible Gestaltungsmöglichkeiten
  Da Ionic auf Webtechnologien basiert, können wir CSS und beliebte Frontend-Bibliotheken wie MUI nutzen. Dies bietet uns mehr Flexibilität in Design und Theming als das Stylesystem von React Native.‍
• Code- und Komponentenwiederverwendung
  Da Ionic-Apps webbasiert sind, können wir Code, Komponenten und sogar Designmuster aus unserer bestehenden React-basierten Webanwendung wiederverwenden. Für uns war dies ein großer Vorteil, da es Code-Duplikationen reduziert und eine einheitliche Benutzererfahrung in unserem Produkt sicherstellt.‍
• Große Community und Plugin-Vielfalt
  Die Ionic-Community ist in den letzten Jahren stark gewachsen. Besonders das Capacitor-Ökosystem bietet eine Vielzahl von Plugins und Integrationen, die es uns ermöglichen, neue Features schnell einzubinden, ohne das Rad neu erfinden zu müssen.

Wann könnte React Native besser geeignet sein?

Obwohl Ionic in vielen Bereichen überzeugt, bietet React Native einige Vorteile, die für bestimmte Teams besser geeignet sein können:

• Fokus auf native Performance: React Native nutzt direkt native UI-Komponenten, was bei leistungsintensiven Anwendungen oder komplexer nativer Funktionalität von Vorteil sein kann.
• Vertrautheit mit dem React-Ökosystem: Wenn ein Team bereits intensiv mit React (JSX) arbeitet und Erfahrung mit React Native’s Styles und Navigation hat, kann dies den Entwicklungsprozess beschleunigen.

Wenn Ihr Projekt fortgeschrittene native Integrationen mit komplizierten Animationen oder direkten Zugriff auf plattformspezifische UI-Elemente erfordert, ist React Native möglicherweise besser geeignet, um diese Ziele zu erreichen.

‍

Ionic vs. React Native: Die richtige Entscheidung treffen

Letztendlich hängt die Wahl zwischen Ionic und React Native von verschiedenen Faktoren ab:
‍

‍Team-Kompetenzen

• Hat euer Team Erfahrung mit Web-Technologien, oder liegt der Fokus eher auf der nativen App-Entwicklung?

Projektanforderungen

• Benötigt eure App tiefgreifende native Funktionen, oder entwickelt ihr eine Anwendung, die stark an eine Web-App angelehnt ist?

Code-Sharing

• Wenn ein großer Teil des Codes zwischen der Web- und der Mobile-App geteilt werden soll, kann Ionic Code-Duplikationen reduzieren.

Time-to-Market

• Dank der vorgefertigten UI-Komponenten und der vertrauten Web-Technologien kann Ionic die Entwicklung für viele Teams beschleunigen.
• React Native kann für Teams, die bereits mit React Native vertraut sind, eine ähnlich schnelle Entwicklung ermöglichen.

Ionic vs. React Native: Fazit

Sowohl Ionic als auch React Native sind leistungsstarke Frameworks für die plattformübergreifende Mobile-Entwicklung. Jedes Framework verfügt über ein eigenes Ökosystem, eine starke Community und eine eigene Herangehensweise an die App-Entwicklung.

• Wähle Ionic, wenn du Standard-Web-Technologien wie HTML, CSS und JavaScript/TypeScript nutzen möchtest, ein konsistentes UI-Framework out of the box benötigst und eine Lösung suchst, die das Code-Sharing mit einer Web-Anwendung vereinfacht.
• Wähle React Native, wenn dein Team bereits stark in React Native investiert ist, du eine möglichst native Performance für komplexe Apps benötigst oder direkten Zugriff auf eine breite Palette an nativen Drittanbieter-Modulen brauchst.

Bei ilert haben wir uns für Ionic entschieden, da wir über umfangreiche Erfahrung mit Web-Technologien verfügen, die Flexibilität von Capacitor schätzen und Code aus unserer Web-App wiederverwenden können. Diese Wahl hat unseren Entwicklungsprozess optimiert und uns ermöglicht, neue Funktionen schnell und effizient für unsere Nutzer bereitzustellen.