Introduction
We recently had our first request to design and build the front end for a native iOS app. Here at Flower Press Interactive, we build on many platforms and mostly focus on React and React Native for our apps due to the cross-platform compatibility requested by our clients. This new app offered us the opportunity to build with the SwiftUI framework in Xcode for the first time. With iOS15 coming out shortly SwiftUI is poised to be the first choice for both designers and developers of iOS native apps.
History
Up until the release of SwiftUI and iOS 13 native apps were built using UIKit which was a more developer-friendly framework, meaning for those of us crafting design into interface it comes with a bit of a learning curve. SwiftUI is a totally new framework that allows for more rapid prototyping with a much more user-friendly syntax for designers and front-end developers. We’re not going to get deep into the differences between the two because we decided early on SwiftUI was the best way forward for us on this project which came with a very short timeline for us to complete our work. One of the helpful things about moving to SwiftUI is it also supports UIKit, so if your dev team requires some functionality only available in UIKit that access is also available.
With the release of iOS 15 SwiftUI really shines and there are many new features we found lacking in iOS 13-14. Here is a good video from the excellent Hacking with SwiftUI resource website highlighting the new features for iOS 15. The amount of information available for SwiftUI from websites like this and Stackoverflow has really increased over the past two years.
Working in the Xcode program
Jumping in
In order to work with SwiftUI you need to work in Xcode which is Apple’s program for building apps. The plus side of this is it is a really mature environment that makes building app for all Apple devices really easy. The downside we discovered is the program is a real resource hog. Our 2018 MacBook Pro was no match for it, and working on the app quickly became a slow and tedious process. We added a new M1 Mac mini to our in-house misfit collection of computers and devices which greatly improved the experience. The configuration of the app was not too painful, however the first time through anything like that always presents a few challenges. With Xcode and a developers account (no license required) you are able to build and preview your app in the simulator and on any physical device you have, very cool! Working in the environment once it was all set up was definitely impressive.
Choose a preview device
Building with Stacks
Transitioning from traditional web app building to the SwiftUI platform means you basically have to learn how Apple approaches components and building constructs. The the <div> is a thing of the past, all of your components are wrapped in different types of Stacks. The VStack equates to a vertical group of elements, HStack for your horizontal rows. The stacks get more complex if you want to do things like use a full screen background image or have responsive elements (would involve a deeper dive than we are taking here). Xcode also includes a good suite of “Design tools” which make it pretty easy for the code challenged to drag and drop components and arrange them visually. Once you gain a bit of insight on the declarative syntax and can read the code a bit, it becomes clear how easy it is to quickly pull together a working prototype to show clients.
Color assets nicely organized with option for Dark Mode
Custom Images and Color
Adding custom images and colors is a snap using Assets Catalog. When you add a new color asset there are options to add a Dark Mode version of the color, which will obviously be used when a user has selected Dark Mode. There are also simple methods for you to preview your app in Dark Mode in both preview and the simulator. Images give you the option to add multiple sizes for different resolutions if you are not adding SVG images this is extremely helpful.
Some Hurdles on the Path
There were a few frustrating things about working with SwiftUI. Creating a Launch Screen was a real challenge because for iOS 13-14 it still relies on UIKit, so creating that and customizing it to work with our design took a good bit of additional research to figure out. Navigation was also a bit of a head scratcher when we started out. It is difficult to just link to another view like we are used to in traditional builds. All of your navigation is generally handled by NavigationView (good article on SwiftUI navigation) which involves loading the NavigationBar (top bar of navigation commonly seen in most apps). This component has a few quirks and customizing it can involve dipping into UIKit, so there were a few headaches there certainly. Navigating form one list item to a detail view is simple, but trying to nest items in navigation quickly becomes difficult. Additionally if you want your app to work on both iPhone and iPad you need to take into account how the split views work on larger devices. The other form of navigation is the TabView which we used as a more global navigation solution. The TabView creates a bar at the bottom of your app and you would generally use icons to navigate to main sections of your app.
SwiftUI has definitely matured and with the release of iOS 15 now is a safe time to jump in and take advantage of all it has to offer. Here are a few helpful links to get you started on the SwiftUI track.
Hacking with SwiftUI – https://www.hackingwithswift.com/
Apple SwiftUI – https://developer.apple.com/xcode/swiftui/