Dive into the amazing world of SwiftUI

Introduction:

SwiftUI is the most exciting news since Apple has announced Swift in 2014. It’s an enormous step towards Apple’s goal of getting everyone coding, simplifying the basics so we can spend more time on a custom features that delights our users.

SwiftUI framework and design tools work together to enable a new way to build a user interface. Before Xcode 4, IB and Xcode were separate apps and seam can be observed when we edit or delete any IBAction or IBOutlet from our code and run the build. What happens next is a nightmare for developers. Yeah, the right app gets crashed and the reason behind this is that IB doesn’t see changes to the code.

But now with SwiftUI our code will always in our sync with design and preview canvas. SwiftUI lets us ignore IB and storyboard. If we are wondering whether we can use SwiftUI with xib and storyboard together then the answer is YES. SwiftUI doesn’t replace UIKit. We can use both in the same app just like Swift and objective-c can be used in the same project.

SwiftUI compiler build and run continuously, so we can preview a SwiftUI view side-by-side with it’s code. A change to one side will update the other side, so they are always in sync.

SwiftUI works for the majority of iOS devices. If we have designed our component for any specific device say iPhone then the same component can be used on other platforms with minimal code changes and we can reuse a lot of the same components. For e.g. we want to reuse our picker-view designed for iPhone on iPad or mac then this could be easily done by doing some changes in code like iPhone picker-view is like a list whereas for iPad it is pop-up and for mac, it is keyboard shortcut.

The philosophy for SwiftUI is not to write once, apply everywhere but to learn once, apply anywhere.

1. Declarative Syntax:

With the help of declarative syntax, we can simply state what our UI should do. For example, we can write that we want an image with a circular shape having a white color border of width 5 pixels and also there should be a shadow of 15 pixels radius.

struct CircularImage: View {
    var body: some View {
        Image("swiftUILogo")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 5))
            .shadow(radius: 15)
    }
}

This code snippet gives us an overview of the actual implementation of the above requirement. See how beautifully it is written with the help of SwiftUI and declarative syntax.

Declarative style even applies to complex concepts like animations.

Easily add or remove animations to almost any control and choose a collection of ready to use effects with only a few lines of code. At runtime, the system handles all of the steps needed to create a smooth movement and even deals with interruption to keep our app stable. With such type of feature, we will be looking for new ways to make our app come alive.

2. Design Tools

SwiftUI works seamlessly with the new Xcode design tool to keep our code and design perfectly in sync. Automatic support for dynamic type, dark mode, localization, and accessibility are some of its highlights.

With the help of design tool our first line of SwiftUI code is already the most powerful UI code we have ever written.

2.1 Drag and Drop

We can arrange components within our UI by simply dragging the control on the canvas. We can also drag and control from our library and drop then on the design canvas or directly in the code.

2.2 Dynamic Replacement

The Swift compiler and runtime are fully embedded throughout Xcode, so our app is constantly being built and run. The design canvas isn’t just an approximation of our UI but it’s the live app and Xcode swap edited code directly in our live app with dynamic replacement.

In the above visual, we can see how Preview canvas automatically getting updated.

2.3 Modifiers

We can easily drag and drop modifiers next to our views and they can be enhanced with new properties such as colors, transforms, visual effects, gestures, and many more.

2.4 SF Symbols

We can download the newest SF fonts from Apple website. Apple has provided more than 1000 icons in their new SF symbols app which can be used as vector assets in Xcode or in the design tool

Conclusion

It will be more straightforward to adapt SwiftUI as Swift keeps evolving and there are more and more new features that can help us to improve the productivity of the codebase.

Do visit my next article on SwiftUI property wrappers.

If you liked this article then please appreciate it with claps and comments. This will really encourage me to write more!!!!