Modern approaches to UI development in iOS
In this article I will talk about:
- Problems we’re trying to solve concerning UI development
- Playground Driven Development Approach
- Gallery Application Approach
- Xcode 11 + Canvas
Identifying the problem
In order to improve UI development experience, specifically testability and maintainability, we decided to isolate UI from business/presentation logic, collect all UI representations at the same place, ensure that we don’t create UI duplications, break components down into smaller parts as they can be reused while building other elements of the app, and of course fix the biggest inconvenience which lies in the compiling part, and takes the most time.
Below I provide an overview — highlights and challenges of approaches we have tried.
Swift Playgrounds
Swift playgrounds were introduced several years ago, and it was a huge step forward for iOS development, it does provide a lot of benefits.
Advantages (in context of UI development):
- Playgrounds give quick feedback!
In Swift Playgrounds you can create small programs called “playgrounds” on the left side of the screen and instantly see the results on the right.
- Playgrounds save you time!
As playgrounds are completely synchronous by default you don’t need to build the whole app. In order to get this you just need to build the framework, it’s unnecessary to execute thousands of iterations through the application in order to find actual result.
- Playgrounds have useful hooks!
Test locale (if you want to test how values change for different regions). You can find an example here.
Trait Collection (in order to test the traits, such as horizontal and vertical size class, display scale and user interface idiom, that describe the current environment of the object. In order to simulate those behaviours you need to use setOverrideTraitCollection(collection:childViewController:)
Disadvantages:
- There is no Debugger! Meaning you can not add breakpoints to inspect the state of execution;
- Stack trace is not available if something went wrong;
- You can not inspect the 3D view model of currently selected window what is very useful when you’re working on new UI or when you need to find/understand/fix UI inconsistency;
- You can not check if playgrounds build succeeded on CI (as you need to run them manually);
- You need to compile the module every time you make changes in any file it’s uses, otherwise the changes won’t be reflected in your Playground.
With all the above we have decided that even though there are few advantages to Swift Playgrounds we often found ourselves in need to run the app to be able to debug or inspect view hierarchy.
That’s why we decided to have something in between. And look into the Gallery Application approach.
The Gallery Application is a small app that does not have any business logic of the main app, in fact it does not import anything more then our UI module, and it contains the examples of all UI elements that we have in the main app.
Gallery Application Advantages
- Less time for build (because now you build just UI module);
- Available Xcode Debugger (helps you understand the source of crash and provides valuable reports when they occur);
- You can distribute the application to developers/designers for them to see how components and animations look in action. Now it’s very quick and simple to find what components already exist and how to use them, what is very useful for new starter or for large teams;
- CI can check if Gallery Application is not broken;
- If you work with components that have multiple states, you can collect and display them on the same screen, for example: loading, loaded, error (see screenshot below).
To iterate quickly on Gallery Application we use Badoo Gallery it provides us with a small abstraction to reduce the amount of boilerplate code that we need to write to add a new item to the gallery.
Xcode 11 + Canvas — an interactive interface editor
- Xcode now supports two-way design, that means that everything you edit on canvas is completely in sync with the code. Code is instantly visible as a preview as you type, and any change you make to that preview immediately appears in your code;
- You don’t need to build an application in order to get the results. (If you make changes in the same file where a preview is defined);
- You can use debugger with previews;
- The extension below helps you preview designs in multiple screen sizes at the same time.
Let me give you an example:
There are some issue we encountered with Xcode Previews:
- Sometimes it doesn’t display font correctly;
- Issues with CocoaPods.
If you’re using CocoaPods as a dependency manager you might run into the same issues that we are, there is a thread on the Github to make Xcode previews work with CocoaPods.
TLDR you would need to add this script to your Podfile.
Of course Canvas and SwiftUI are not perfect now, but I believe it will become better overtime, that’s why we continue using Gallery App in order to make sure all components match design.
Useful links:
iOS at Kickstarter: Playground-Driven Development
Swift playgrounds tips and tricks
About Myself:
I am iOS Developer at @Moonpig with over 3 years of experience, I am very passionate about writing highly readable, clean, maintainable source code same as implementing new technologies to maximize development efficiency.
