When developing applications with SwiftUI, you can utilize a wide range of great tools to get instant visual feedback, previews on multiple devices, and even different device types, all in real-time.
In my previous post, I emphasized the benefits of building self-contained, reusable, and testable views. When you're dealing with multiple views used throughout your application, you most likely want to preview those views in isolation. Knowing dependencies and following the best practices will help you here.
Once you get up to speed, you can use the power of previews to prototype applications quickly, testing them on your devices, and using the newly-gained feedback to iterate from an idea to the final product.
Imagine having an idea, creating a rough sketch in a couple of minutes and handing over the phone to a friend or co-worker to test out, or even enjoying it for yourself: Removing friction in the design and development processes of applications becomes a huge benefit.
Let's check out a couple of possible techniques to preview your application while developing.
👀 Xcode Previews
Previewing your views in Xcode is a straightforward method to watch your views while as you build them, with hot-reloading and other prototyping and design features supported right out of the box.
When creating a new SwiftUI view, a preview struct implementing the PreviewProvider protocol will be generated for you automatically. In the right-hand tab, you can see a device frame displaying your view.
Using the inspector, you can also add modifiers and change environment properties such as color scheme, font size, and other accessibility settings.
What I like doing is to add two previews, one for light appearance and one for dark mode. This will allow you to get instant feedback on how your view feels in both environments.
You can even design your view using the inspector in the right tab, try changing the font to a different value, you'll see it updates the visual preview and even adds the necessary SwiftUI code to perform the change.
You can also tap the play button to make your preview interactive, it will run in a simulated environment in the background.
Since you want to make the most of previews, you'll quickly learn how to structure your views so they depend on as little outside information as possible, as you'll have to inject everything to make a view work, including objects that are often passed through environments, such as networking or data-fetching helpers.
🎩 Simulator
To get a richer environment comparable to a real device, you can start up the Simulator by selecting a device type and building and running your application (Cmd+R).
This will start up the Simulator, install your built application, and launch it. Note that while most things behave the same as they would on a real device, you will neither be able to use push notifications on the Simulator, nor do any network-specific tests, as the Simulator uses your Mac's networking.
💻 Real Device Testing
When developing iOS apps, you can run and test your application on an iPhone (or any other Apple device you have at hand and want to build for) directly by connecting it to your Mac via USB. After this initial setup, you can simply select your phone in the device picker next to the Xcode status bar.
Once you launch your application, it'll install and open on your phone, the same way it worked on the Simulator, but much more realistic this time around!
You can also use the Simulator to take screenshots of your application on different device types, which becomes extremely helpful. It also makes testing easier, to make sure your layout doesn't break on any screen size.
📱 On-Device Previews
Lastly, one feature I really enjoy using is on-device previews. Once you connect a device, in the preview screen, you can tap the button right next to the "play" button, which will launch an on-device preview. This installs an application called Xcode Previews on your device, which keeps track of the current preview and syncs it with Xcode.
When you have multiple view files you work on in parallel and switch between them, the preview on your device will change automatically.
Even better, the last preview is stored offline, so you can continue using it and show it to someone when you're away from your development environment.
This concludes the list of preview methods, you should really give them a shot if you haven't done so yet!
While I always use the Xcode previews, I like switching between the Simulator and my real device, since each method has its own set of benefits and drawbacks.