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:

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

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:

iOS at Kickstarter: Playground-Driven Development

Swift playgrounds tips and tricks

Implementing UI in iOS: Badoo

BadooGallery gitHub repo

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.

Moonpig Tech Blog

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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