Moonpig Tech Blog
Published in

Moonpig Tech Blog

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

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.

--

--

--

Learn about how we use technology, lean and agile practices to succeed in the online personalisation market whilst moving at supersonic speed.

Recommended from Medium

Enable Synchronous Testability of Your Reactive Combine Code

How to reduce monotonous work done by developers

How To Changing Android Package name and iOS Bundle ID (bundle identifier) in Flutter

iOS Automated UI Testing with XCUITest

Use iOS camera photo and HTML5 file API to preview an image

Creating a BottomNavigation Multi-Stack using Child Fragments with Jetpack Navigation

AppStore Connect Permissions to Publish Apps

Using Core ML and Vision in iOS for Age Detection

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
Mariia Cherniuk

Mariia Cherniuk

More from Medium

Singleton Design Pattern in Swift

Swift | Stored and Lazy Properties

Swift programming: Classes

Design an APP Routing(updating. . .)