SwiftUI Part 2 (Starting with SwiftUI)

Welcome to Part 2 of the SwiftUI series. In Part 1, we tried to go through a couple of points and understood how SwiftUI is different from UIKit. We came to know the advantages and challenges involved while working with SwiftUI. We also learned about Declarative programming.

SwiftUI is the future of the development as it provides one single platform to write and publish UI code for all Apple devices.

In this article, we’re going to learn a few basic concepts about SwiftUI. Knowing these concepts are equally important as writing better code.

View Protocol

With SwiftUI, Apple introduced the View Protocol. If by chance you have seen this kind of code in SwiftUI class earlier.

SwiftUI View

You must be thinking what exactly is View here. Apple introduced this protocol with SwiftUI and iOS 13.0.

View Protocol Definition

There is only one contract which comes with this protocol, you need to implement body property, and SwiftUI knows that it is of some View type. It is crucial to understand that you need to conform to this protocol; otherwise, Swift is unaware of whether it is a normal class or View class. Also, it would help if you remembered it could only accept one view at a time. It becomes clear as we start working and implementing UI elements.

Opaque Types

If you look more closely, you must be wondering, what is some keyword here. Well, it is a new type which came recently and is available in Swift 5.1 onwards.

You can use this type when you want to return some protocol type but at the same time want to hide underlying concrete types from the users, although the compiler retains the type to all the calls made, maintaining the abstraction. Use of Opaque types mostly happens when you are working in modules and want to hide underlying concrete types.

The following example explains the above theory. You can see even if the return types of the square and triangle function looks same; they are not treated as same, which is not the case if the return type is just protocol.

Comparable Protocol

Comparable with some keyword

Also, this type of implementation is not possible when you try to give protocol as return type, it throws an error because here Comparable protocol has associated type requirements.

You can also call it as a reverse of Generics because caller always decides what type it wants in case of the generic function.

But in the case of Opaque type, callee decides the return type. The caller does not tell compiler of the type.

You can learn more about Opaque type from here:

1. What’s New in Swift.
2. Opaque Types.

Coming back to SwiftUI, if you see the example above at the top, the body property is going to return some View type to the DemoView. Here caller doesn’t decide what kind of View it is, else callee is deciding about the type of View.

Hello World App

It is time to create the famous Hello World App. Make sure to choose SwiftUI as a user interface.

SwiftUI File Creation

You can see ContentView.swift file in the Project Navigator. Open it, and you can see two views:

1. Editor view
2. Canvas view

Default SwiftUI File View

If you don’t see the Canvas View, you can go to the Editor and click Canvas.
Click on the Resume button on the top right side of the Canvas View and see the live preview of the code.

Let’s talk about what you see in code.

1. At the top, you see ContentView structure which conforms to View protocol and is responsible for holding the body of the View.
2. A computed property body with a return type of some View.
3. Text element which is the same as of UILabel in UIKit.
4. Another structure Content_Previews which conforms to PreviewProvider and is responsible for creating preview in the Preview in Canvas. The best thing here is that even Preview is also being generated from Code and you have full control over it. We are also going to learn about this section in future articles.

Shortcuts

There are a few shortcuts that I think would be helpful in the future while working with the SwiftUI.

1. Cmd + Option + Enter → Opens Live Preview
2. Cmd + Option + P → Resume Live Preview
3. Cmd + Shift + L → Opens Library

Well! You have just made a Hello World App using SwiftUI. After learning the basics you are ready to dive into SwiftUI.

I hope you enjoyed learning a few things about the SwiftUI framework. More articles are coming soon with a detailed explanation of the various aspects of this framework.

Also, feel free to follow me on Twitter for updates on upcoming articles.

Next Article in the series: Basic UI Elements.

Resources:
SwiftUI