SwiftUI - What You Need to Know

One of the most exciting things to come out of WWDC 2019 was SwiftUI. SwiftUI is new for iOS and tvOS 13. SwiftUI from a developer perspective is considered as a new language. It’s a mix of Swift, and directly linking the code with UI. If this sounds complicated, don’t worry, we’ll explain with examples below.

Currently, there are several ways to code a native iOS or tvOS apps using Xcode. Objective-C, which has been around since iOS, and Swift, a relatively new and now the most common way to code natively. The use of storyboards in both of these languages is very common. Coding with the use of storyboards and nibs can be very helpful in building and supporting UI across various devices and sizes.

ONE SWIFTUI. ALL DEVICES.

Apple designed SwiftUI so that it can be learned and applied to iOS and tvOS, natively. As opposed to the “write once, run on all platforms” notion taken from hybrid apps using Java or JavaScript, SwiftUI takes a “learn once, apply everywhere” approach. This allows developers to create unique native interactions intended for their respective devices, without the learning limitations. 

For tvOS development, the UI in most TV environments encapsulate scrolling lists, vertical and horizontal. SwiftUI does this very well. Most tvOS apps aren’t difficult to navigate or heavy with business logic. SwiftUI can draw and manage the UI while maintaining the data with relative ease.


WHAT’S CHANGED?

With the introduction of SwiftUI, the language is still considered Swift, but the syntax changes completely. An object has modifiers. For example a Text object can have a font, font size, font color, and other additional modifiers. Modifiers returns a view that applies a new behaviour or visual change. You can chain multiple modifiers to achieve the effects you need.

From Apple:

Text("Hello world!")
   .font(.title)
   .foregroundColor(.purple)


In here, you can also specify custom fonts (size + font) and custom colors.

In a particular app, two things are key: Navigation and Views. Navigation determines where the user is directed after interactions within the app, and Views are things the user sees on the screen. Both Navigation and Views work differently than previously before with Swift/Obj-C. To create a navigation, you will have to add NavigationLink’s to a particular element. A NavigationLink is a tap that will trigger a navigation in the app.

Views are created and easily used to create a bigger piece. SwiftUI uses views as variables to layout when layout the UI. 

From Apple:

        NavigationView {
            List(landmarkData) { landmark in
               NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
		   LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }


Here, we see that the page will have a navigation bar titled “Landmarks”. In this view, we have a list (think: UITableView). Each item in the list links to the LandmarkDetail view that passes in the data to the view. And lastly each row is designed with the LandmarkRow View.

This little code will draw a dynamic UI that allows linking, scrolling and managing the view across multiple devices. 

The example above was taken from Apple here: https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

SwiftUI might be difficult to understand at first, but once you start coding it in and using the suggested guides on Apple’s site, you will eventually get the hang of things. If you’re proficient in Swift, you should be able to pick this up without any issues.

One of my favourite features while using SwiftUI is the Live Preview. You are able to see what your code will look like without having to recompile and run each time. There are limitations on this regarding the data that you pass into these views, but it allows you to test how things would look without having to recompile each time. You are also able to choose which devices you want to preview on, and compare them all at the same time.


WHY USE SWIFTUI?


After doing a small comparison of two very simple apps with static data, our team saw about a 60-70% reduction in the amount of code that was written with SwiftUI opposed to Swift. That is a big saving in terms of time, effort, redundancies, and errors!

Coupled with advanced animations, broad localization, and automatic support for new platforms, this means less time coding and debugging, and better results in modern apps with user delight.

Once released, our team will immediately start building new apps and porting existing applications into Swift UI. it will be interesting to see how the developer community will be using SwiftUI, and the challenges faced porting over.

Raj KhatriSwift, tvOS, Development