Modern approaches to UI development in iOS

Mariia Cherniuk
May 5 · 5 min read
Image for post
Image for post

In this article I will talk about:

  • Playground Driven Development Approach
  • Gallery Application Approach
  • Xcode 11 + Canvas

Identifying the problem

Below I provide an overview — highlights and challenges of approaches we have tried.

Swift Playgrounds

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:)


  • 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

  • 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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Xcode 11 + Canvas — an interactive interface editor

  • 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:

Image for post
Image for post

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:

Swift playgrounds tips and tricks

Implementing UI in iOS: Badoo

BadooGallery gitHub repo

About Myself:

Moonpig Tech Blog

Learn about how we use technology, lean and agile practices…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store