From iOS to Web Apps: Comparing Setup and Development

I joined ilert as a student front-end software developer. Before, I was mainly writing iOS apps. Even though I already had some experience with web technologies, diving deep into front-end development was a huge step. Both developing iOS apps and web apps share the same kinds of tasks, such as developing the user interface (UI) and writing app logic. However, the actual development environments are completely different. Here, I will compare the setup, user interface, debugging process, documentation, and other aspects.

‍

Since I was already familiar with web technologies, i.e., HTML, CSS, JavaScript, I was introduced to two ilert front-end projects utilizing TypeScript, React, and MobX. My task was to migrate one of the projects, which is the front-end of the ilert reports UI, into the bigger one, the ilert management UI. The first step was to build and run the apps.

Setup

For a typical iOS app project, you need to install Xcode and probably a package manager like CocoaPods or Carthage. Then, you can open an Xcode project or workspace and install the dependencies using the selected package manager. If Swift packages are used, Xcode will automatically install the dependencies. 

‍

For the two web projects, I had to install two different versions of Node.js. npm was used as the package manager. Also, browsers were required to interact with the app. The nvm script was used to handle different versions of Node.js. 

‍

At the time of setting up, the older reports project used Node.js 14, which was no longer maintained. There were no prebuilt binaries for that version to download. nvm tried to build from the source on macOS Sonoma, but it failed. Therefore, I downloaded the Installer flat package of v14.21.3, installed it system-wide, and used nvm only for the new project. I used Visual Studio Code as the editor with Prettier - Code formatter and Vim extensions.

Preview

After installing everything required to build, it is time to run the app live. In Xcode, you can build and run an app without ever touching the command line interface (CLI). In my current case, both projects use react-scripts to build and run the app.

‍

UIKit and SwiftUI are built-in UI frameworks for iOS apps. You can build the UI in storyboards when using UIKit or build UI purely in code using SwiftUI and see the live preview alongside, all happening inside Xcode.

Viewing a React web app is completely different. The content of the app is served by an HTTP server locally, from which the browser can load the app UI. In development mode, the app maintains a web socket connection to the server to listen for updates. This allows the UI to refresh automatically when the code changes. Usually, it only updates the relevant HTML elements and scripts that have been changed. Otherwise, it triggers a full web page reload.

When using UIKit in an iOS app, you need to build and install it in a simulator or on an iPhone or an iPad to run the app. With SwiftUI, one can also preview the app inside Xcode. However, any browser can be used to run and interact with a React app.

Debugging

The default build configuration in Xcode is set to debug. A developer can start debugging by adding breakpoints and running the app. The app's standard input/output can be interacted inside the Debug Area pane inside Xcode. 

To debug a React app, front-end engineers use the browser's developer tools or add Visual Studio Code debug configurations using .vscode/launch.json. Both projects that I was working on had a debug configuration for Chrome. When it is launched, it opens the browser, and the debugging can be done inside Visual Studio Code. Since both projects use TypeScript, I also had to enable source maps. 

Debugging UI in iOS apps is simpler as the elements do not inherit styles from their parent element. ilert React apps use Material UI as the baseline component framework. When debugging a component's style, I had to investigate the related CSS and the component's code, if any, since we wrote CSS in JavaScript for components.

‍

Documentation

The documentation for the whole iOS SDK comes together with Xcode. Therefore, developers can work conveniently even when entirely offline. On the other hand, you have to go online to find documentation on web technologies. There are different sources for documentation, e.g., HTML, CSS, React, MobX, and Material UI.

Working with code

Before I started working directly with the projects, I had learned the basics of React and MobX. Then, I explored related parts of the code to understand how they work together while learning the TypeScript features simultaneously. Since the task was to migrate the old code into the new React app, most of the work was to migrate old Material UI and MobX versions to newer ones. For React, I had to rewrite class components as functions. For MobX, I had to remove decorators and switch to makeAutoObservable. Fortunately, there was a handy tool called mobx-undecorate just for that purpose.

‍

During the migration, I consulted documentation and examples to learn new things, particularly for migrating from JSS in MUI components and for migrating from MobX version 5 to 6.

‍

Being a native iOS app developer who uses Swift, a statically-typed language, I find that writing in TypeScript for web apps helps a lot. In Visual Studio Code, the errors for type mismatch are flagged, which makes writing code easier and safer.

In the beginnings

iOS app development has a much gentler learning curve since Apple makes it easy for someone to display “Hello, World!” with minimal effort except for installing Xcode, which might take from a few minutes to hours, depending on the Internet connection. There is a Swift Playgrounds app for iPad and Mac, which provides games where junior developers can learn Swift and have fun. The overall learning experience is better in iOS app development.

‍

To get a React app running, an engineer should be familiar with at least installing third-party software on their computer and using the CLI. As a complete beginner, one should start learning the basics of HTML and CSS and then proceed with JavaScript. There are many great books like “Beginning JavaScript, 4th Edition” by Paul Wilton and Jeremy McPeak and tutorials for that. Once you get familiar with these technologies, you should start using advanced code editors like Visual Studio Code to increase productivity. You should also try to get familiar with some JavaScript libraries such as React and Ember.js or Svelte.

‍

It was a great decision for me to devote more time to learning web development while working on great projects. Now, I can choose to develop a native iOS app or to develop a hybrid app using web technologies.

Join the ilert team

Nay Min Ko has recently joined the ilert team as a working student. Do you want to be a part of the ilert team, too? Visit our Careers page. Also, we have recently shared the story of junior front-end developer Jan, who told how he developed his first product feature—Dashboard.

‍