Why SwiftUI?

What is SwiftUI that everyone is talking about? What are its advantages and disadvantages? Let’s take a brief look.

We use Swift programming language and the Storyboard interface to develop iOS applications. But if I speak for myself, I was having a hard time using storyboards. I have always been hesitant to develop iOS applications. Recently I started to come across the term SwiftUI a lot in the articles I read online, and when I saw the small pieces of code made with SwiftUI, it grabbed my attention. Then I thought, why not give it a go? 🙂

While using the storyboard, XCode creates the interface not in the code files but in a separate one. We have to create screens with drag and drop and bind it with code files with .swift extension. Then we customize the interface elements we used, either by ode or storyboard. If we made the slightest change in naming on the storyboard and forget where we bound it in the code, our code would crash. Overcoming this requires a lot of attention.

But with SwiftUI, we can write both the code and the interface in the same file, which makes our job very easy. Or maybe it is just easier for me. 🙂

Here’s a simple example:

The project you have seen above is a project that we created from scratch with XCode and comes with the classic “Hello World” text. Usually, when we use a storyboard, we do not see a screen like this because all interface designs are collected in a single file. We cannot see the design that belongs to the file next to the code. But one of the significant advantages of using SwiftUI is that you can see the screen you are working on right next to your code. The part where we see the interface is called Canvas. If you can’t see the device on the right side, make sure the Editor> Canvas box is checked.

We see a code called text (“Hello World!”) on the coding side. Thanks to this code, we get the “Hello World!” text on the device screen. In other words, if we write the interface element on the left, we can see its equivalent on the right immediately. The code and interface are always in sync. There is a green circle next to the text Preview above the device. Green indicates that the code we write on the left will show up on the interface. If it is not green, you can synchronize it again with Option + Cmd + P keys or the Resume button, which will appear on the device.

Now that we clarified how it works let’s talk about the advantages and disadvantages of SwiftUI.

Advantages:

• Because the code and interface come together, we no longer deal with storyboards in screen designs.
• We can see the changes we make to the code in real-time on the device on Canvas.
• We no longer need the terms like @IBAction and @IBOutlet, and we don’t need to connect the elements on the interface with the code anymore.
• The codes we write for a single platform now work on other platforms of Apple. Make sure you mark the fields you want.

“Write once and run everywhere” -WWDC Talk

isadvantages:

• If you want to code with SwiftUI, your need devices that supports iOS 13, macOS 10.15 (Catalina), tvOS 13 and watchOS 6. This is the minimum requirement; anything older, it won’t work.
• Some UIKit components still cannot be used with SwiftUI. However, you can use UIKit in the project. So this solves the problem.
• Some features of supported UIKit components may not be supported. You might need to come up with some novel solutions.

There is another problem that I experienced, and some other colleagues mentioned it too. Sometimes when I build in a SwiftUI project, my computer’s speaker is distorted, and it makes a scratching sound. It takes 5–10 minutes for it to disappear after the build is finished.

SwiftUI is something that excites me and encourages me to develop iOS apps. I hope this brief introduction would help other people who would like to enter the world of SwiftUI.

See you in another post.

You can read the Turkish version of this article here.

References:

1. Mastering SwiftUI by Appcoda
2. SwiftUI by Tutorials 2nd Edition by Raywenderlich