SwiftUI – The Future of User Interface

Reading Time: 4 minutes

Over two years ago, Apple announced SwiftUI – a Swift framework for a simple and intuitive user interface (UI) structure design. It was Apple’s newest addition to its programming language – Swift, introduced just six years ago. In short, SwiftUI lets you design efficient UIs and see live previews while doing so. It is a powerful tool that is already changing how we write and create UIs by combing interactions with interface elements with code.

How did it look in the past?

When Swift first came out, developers utilized a tool called UIKit. UIKit, which was released 11 years ago, has been a powerful tool for creating high-performing apps. Although, it is complex for newcomers and often unintuitive to use, programmers need to test UIKit apps from every angle to be sure the UI does not break.

The same thing happens while building UIs in web or Android apps development. To get the results you want, you have to spend a lot of time playing around with the layout, fixing occasional glitches and errors, and then waiting for a compiler to produce a preview. Then you make changes, refresh the preview, and so on and so on.

Approach of SwiftUI

Because SwiftUI is a relatively young framework, SwiftUI learned a lot from most of the most significant programming languages and frameworks to create the perfect tool for developers. It connects two techniques – a WYSIWYG (What you see is what you get) approach and the traditional programming method explained above. This combination lets you switch between each method with ease.

For instance, you want to create a text field with “Hello world!” inside. In SwiftUI, you can either write Text(“Hello world!”) or right-click with your mouse on the preview screen on the right-hand side and select “new element,” and then choose “Text.” Moreover, you can drag around each element on the screen to place it in the location of your choosing.

Ok, nothing new here. But what if I told you that the code on the left-hand side auto-updates each time you make a change on the preview view? Well, that’s what SwiftUI is capable of doing. SwiftUI is a mix of programming and previewing. Essentially, you can start creating a UI on the screen on the right and, later on, precisely control the behavior of elements in the source code view.

Why is it important?

SwiftUI is a game-changer for ordinary people who are new to the programming world. Its minimal and straightforward structure is easy to understand; thus, amateurs can create their first apps in just a few minutes! To prove that, I will show you a simple app that displays the text “Hello world!” written in UIKit (on the left side) and SwiftUI (on the right side).

SwiftUI and UIKit side by side

There are a couple of problems with UIKit. First of all, what does “@IBOutlet” mean? Secondly, “weak var”? What is that? I have been programming for a while, and I have never encountered a “weak” variable. Then we override a function, and only then can we start writing our UI. Of course, this is why programming is a hard job. It requires time and effort to learn it, but the learning curve for many people is too steep. When we set high barriers, fewer people try coding.

UIKit for beginners is a lot to process at once. The code is simply unreadable—even developers sometimes struggle to reference a given file in the future. UIKit has too much code around it, which makes it more challenging to read.

On the other hand, SwiftUI looks friendly and inviting. Code is easy to understand and not terrifying. When someone comes across SwiftUI code, they instantly know where to start. In larger projects, the difference between SwiftUI and UIKit becomes even more evident.

Project in UIKit (source: https://steelkiwi.medium.com/swiftui-vs-uikit-benefits-and-drawbacks-6a540cced684)
The same project in SwiftUI (one file only! Plus a preview screen)

UIKit uses 2+ files, while SwiftUI only has one. UIKit utilizes a Storyboard tool to generate visual designs and link layout elements to the code. For instance, if you want to change UI, you need to make sure that the reference to the source code is in sync with the code and the other way around. UIKit is messy; you have to take care of both the code and visual layout separately. SwiftUI, on the other hand, is neatly written in a single file.

Summary

The future of programming lies in people. Until now, programmers and designers lived in different worlds. A designer would create a mockup of the UI of an app and then send it to a programmer to implement the interface into the app. With SwiftUI, this is no longer the case. Nowadays, a designer can quickly learn the basics of creating UIs with Apple’s newest framework.

The more people can create apps or have a basic understanding of developing apps, the more it helps them in various ways. SwiftUI enables people with zero experience with programming to start their journey and give them live feedback. In the 21st century, the ability to code slowly becomes a crucial skill all across the board.

Sources:

  1. https://developer.apple.com/tutorials/swiftui/
  2. https://medium.com/a-developer-in-making/how-to-work-with-swiftui-framework-in-swift-89deda4bfe3
  3. https://steelkiwi.com/blog/swiftui-vs-uikit/
  4. https://www.elitechsystems.com/swiftui-vs-uikit-the-good-and-the-bad/

Leave a Reply