Von iOS- zu Web-Apps: ein Vergleich von Setup und Entwicklung

Ich bin als Werkstudent für Frontend-Entwicklung zu ilert gekommen. Vorher habe ich hauptsächlich iOS-Apps programmiert. Obwohl ich bereits einige Erfahrung mit Webtechnologien hatte, war der Einstieg in die Frontend-Entwicklung ein großer Schritt. Bei der Entwicklung von iOS- und Web-Apps fallen zwar die gleichen Aufgaben an, wie zum Beispiel die Entwicklung der Benutzeroberfläche (UI) und das Programmieren der App-Logik. Die eigentlichen Entwicklungsumgebungen sind jedoch völlig unterschiedlich. In diesem Artikel findest du einen Vergleich von Setup, Benutzeroberfläche, Debugging-Prozess, Dokumentation und anderen Aspekten.

‍

Da ich bereits mit Webtechnologien (HTML, CSS, JavaScript) vertraut war, wurde ich in zwei Frontend-Projekte eingebunden, die TypeScript, React und MobX verwenden. Meine Aufgabe war die Migration eines der Projekte – das Frontend der Benutzeroberfläche für Berichte in ilert – in das größere, das ilert Management-UI. Der erste Schritt bestand darin, die Apps zu programmieren und laufenzulassen.

Setup

Für ein typisches iOS-App-Projekt muss Xcode und wahrscheinlich ein Paketmanager wie CocoaPods oder Carthage installiert werden. Dann kann man ein Xcode-Projekt oder einen Workspace öffnen und die Abhängigkeiten mithilfe des ausgewählten Paketmanagers installieren. Wenn Swift-Packages verwendet werden, installiert Xcode die Abhängigkeiten automatisch. 

‍

Für die beiden Webprojekte musste ich zwei verschiedene Versionen von Node.js installieren. npm wurde als Paketmanager verwendet. Außerdem wurden Browser benötigt, um mit der Anwendung zu interagieren. Das nvm-Skript wurde verwendet, um verschiedene Versionen von Node.js zu verwalten. 

‍

Zum Zeitpunkt der Einrichtung verwendete das ältere Projekt für die Berichte-Benutzeroberfläche Node.js 14, das nicht mehr gepflegt wurde. Es gab keine vorkompilierten Binärdateien für diese Version zum Herunterladen. nvm versuchte, aus dem Quellcode auf macOS Sonoma aufzubauen, was jedoch fehlschlug. Daher lud ich das Einfaches Installationspaket von v14.21.3 herunter, installierte es systemweit und verwendete nvm nur für das neue Projekt. Als Editor habe ich Visual Studio Code mit Prettier - Code Formatter und Vim Extensions verwendet.

‍

Vorschau

Nachdem alles installiert ist, was man für die Erstellung braucht, ist es an der Zeit, die Anwendung live auszuführen. In Xcode kann man eine App vollständig programmieren und laufenlassen, ohne über das Command Line Interface (CLI) zu gehen. Im vorliegenden Fall verwenden beide Projekte React-Script zum Erstellen und Ausführen der App.

‍

UIKit und SwiftUI sind integrierte UI-Frameworks für iOS-Apps. Mit UIKit kann man das UI in Storyboards erstellen, in SwiftUI ausschließlich mit Code – und die Live-Vorschau daneben sehen, alles in Xcode.

Die Vorschau bei einer React-Web-App ist völlig anders. Der Inhalt der App wird lokal von einem HTTP-Server bereitgestellt, von dem der Browser die Benutzeroberfläche der App laden kann. Im Entwicklungsmodus unterhält die App eine Websocket-Verbindung zum Server, um Updates abzurufen. Dadurch aktualisiert sich die Benutzeroberfläche automatisch, wenn sich der Code ändert. Normalerweise werden nur die geänderten relevanten HTML-Elemente und Skripte aktualisiert. Andernfalls wird die Webseite vollständig neu geladen.

Debugging

Die Standard-Build-Konfiguration in Xcode ist auf Debugging eingestellt. Der Frontend-Entwickler kann mit dem Debuggen starten, indem er Breakpoints hinzufügt und die App ausführt. Der normale Input bzw. Output in der App kann im Debug-Area von Xcode getestet werden.

Um eine React-App zu debuggen, verwenden Frontend-Programmierer die Entwickler-Tools des Browsers oder fügen Visual Studio Code Debug-Konfigurationen mit .vscode/launch.json hinzu. Beide Projekte, an denen ich gearbeitet habe, hatten eine Debug-Konfiguration für Chrome. Beim Starten wird der Browser geöffnet, und das Debugging kann innerhalb von Visual Studio Code durchgeführt werden. Da beide Projekte TypeScript verwenden, musste ich auch Source Maps aktivieren.

Das Debuggen der Benutzeroberfläche in iOS-Apps ist einfacher, da die Elemente keine Formatierung von ihrem übergeordneten Element übernehmen. ilert React-Apps verwenden Material UI als grundlegendes Komponenten-Framework. Beim Debuggen der Formatierung einer Komponente musste ich das zugehörige CSS und den Code der Komponente untersuchen, falls vorhanden, da wir CSS in JavaScript für Komponenten geschrieben hatten.

‍

Wenn man UIKit in einer iOS-App verwendet, muss man sie in einem Simulator oder auf einem iPhone oder iPad erstellen und installieren, um die App auszuführen. Mit SwiftUI kann man auch eine Vorschau der App in Xcode erstellen. Es kann jedoch jeder Browser verwendet werden, um eine React-App auszuführen und mit ihr zu interagieren.

Dokumentation

Die Dokumentation für das gesamte iOS SDK ist in Xcode automatisch enthalten. Daher kann man als Entwickler bequem arbeiten, auch wenn man komplett offline ist. Um die Dokumentation von Webtechnologien zu finden, muss man jedoch online gehen. Es gibt verschiedene Quellen für die Dokumentation, zum Beispiel für HTML, CSS, React, MobX und Material UI.

Arbeiten mit Code

Bevor ich begann, direkt mit den Projekten zu arbeiten, lernte ich die Grundlagen von React und MobX. Dann untersuchte ich verwandte Teile des Codes, um zu verstehen, wie sie zusammenarbeiten, und lernte gleichzeitig die TypeScript-Funktionen kennen. Da die Aufgabe darin bestand, den alten Code in die neue React-App zu migrieren, bestand der größte Teil der Arbeit darin, alte Material UI- und MobX-Versionen auf neuere zu migrieren. Für React musste ich Class Components zu Functions umschreiben. Für MobX musste ich Decorators entfernen und zu makeAutoObservable wechseln. Glücklicherweise gibt es ein praktisches Tool namens mobx-undecorate genau für diesen Zweck.

‍

Während der Migration schaute ich mir Dokumentationen und Beispiele an, um etwas Neues zu lernen, insbesondere für die Migration von JSS zu MUI-Components und für die Migration von MobX Version 5 zu 6.

‍

Als ehemaliger iOS-App-Entwickler, der Swift, eine statisch typisierte Sprache, verwendet hatte, finde ich, dass das Programmieren in TypeScript für Web-Apps sehr hilfreich ist. In Visual Studio Code werden die Fehler aufgrund von nicht übereinstimmenden Typen gekennzeichnet, was das Schreiben von Code einfacher und sicherer macht.

So kannst auch du loslegen

Die Entwicklung von iOS-Apps ist wesentlich leichter zu erlernen, da Apple es einem leicht macht, „Hello, World!“ mit minimalem Aufwand anzuzeigen – abgesehen von der Installation von Xcode, die je nach Internetverbindung einige Minuten bis Stunden dauern kann. Es gibt eine Swift Playgrounds App für iPad und Mac, die Spiele anbietet, mit denen Junior Developer Swift lernen und dabei Spaß haben können. Insgesamt ist die Lernerfahrung beim Entwickeln von iOS-Apps besser.

‍

Um eine React-App zum Laufen zu bringen, sollte ein Programmierer zumindest mit der Installation von Software auf seinem Computer und der Verwendung des CLI vertraut sein. Als absoluter Neuling sollte man zuerst die Grundlagen von HTML und CSS lernen und dann mit JavaScript weitermachen. Es gibt viele gute Bücher, zum Beispiel „Beginning JavaScript, 4th Edition“ von Paul Wilton und Jeremy McPeak und Tutorials dazu. Sobald du dich mit diesen Technologien vertraut gemacht hast, fange an, fortgeschrittene Code-Editoren wie Visual Studio Code zu nutzen, um deine Produktivität zu steigern. Du solltest auch versuchen, dich mit einigen JavaScript-Bibliotheken wie React und Ember.js oder Svelte vertraut zu machen.

‍

Für mich war es eine gute Entscheidung, mehr Zeit in das Erlernen von Webentwicklung zu investieren und gleichzeitig an großartigen Projekten zu arbeiten. Jetzt kann ich mir aussuchen, ob ich eine native iOS-App oder eine hybride App mit Webtechnologien entwickeln möchte.

Komm ins ilert-Team

Nay Min Ko ist seit kurzem als Werkstudentin im ilert-Team. Willst du ebenfalls in unser Team kommen? Dann schau gerne auf unserer Karriereseite vorbei. Vor Kurzem haben wir auch einen Artikel unseres Junior Frontend-Entwicklers Jan veröffentlicht: Er berichtet darin, wie er sein erstes Produkt-Feature - ein Dashboard - entwickelt hat.