Getting started with SwiftUI to build your declarative interface

SwiftUI is a powerful framework that is fresh out of the oven and was recently presented at Apple's WWDC in June of this year; it is a framework that only works for creating apps on iOS 13 and up, and today we will see an introduction to this framework that allows us to create interfaces much more easily and with fewer lines of code than with the traditional approach.

SwiftUI is one of those frameworks that, when you try it for the first time, makes you think: “why didn't this exist before?”. Apple introduced it at WWDC 2019 and since then it has become the modern way to create interfaces for the Apple ecosystem. In my case, coming from classic Swift with storyboards made the change even more evident: less friction, fewer files, and a much more natural way of thinking about the interface.

In this guide, I'm going to show you the first steps with SwiftUI, from key concepts to practical examples, so you understand how it works, why it's simpler, and how to start building your first apps without going crazy.

What is SwiftUI and why has it changed the way interfaces are created in iOS?

SwiftUI is an Apple framework for building user interfaces using declarative programming. Instead of telling the system how to draw each element step-by-step, you simply describe what you want to show and SwiftUI takes care of the rest.

When I started using it, the first thing that caught my attention was how concise the code becomes. Where I previously needed a storyboard, a controller, and multiple connections, now everything lives in a single .swift file.

Declarative programming: how SwiftUI really works

The declarative approach means that you describe the final result of the UI. For example: “I want a text, an image below it, and everything centered.” SwiftUI interprets that code and renders the interface.

This makes:

• The code more readable.
• It easier to iterate on ideas.
• Changes reflect almost instantaneously.

SwiftUI vs UIKit: key differences for beginners

If you come from UIKit, the jump is big:

• UIKit → imperative, views + controllers, a lot of boilerplate code.
• SwiftUI → declarative, views as structs, automatic updates.

The biggest relief is forgetting about manually syncing the UI with the data: when something changes, the view updates itself.

SwiftUI is Google's Flutter but developed by Apple

Why start developing apps with SwiftUI?

SwiftUI is not just “prettier,” it is more efficient for learning and maintaining projects.

A single codebase for all Apple platforms

With SwiftUI you can create interfaces that work on:

• iOS
• iPadOS
• macOS
• watchOS

All with the same codebase. This was key for me, because it forces you to think in reusable components from the start.

Less code, more clarity

One of the strong points I noticed from day one is that you do more with fewer lines. The intent of the code is clear and you don't have to dive through files to understand what a view does.

View and logic in one place

In SwiftUI, a view contains both the visual structure and the basic logic that accompanies it. This greatly simplifies the mental flow, especially when you are starting out.

Why develop our applications in SwiftUI?

With this powerful framework, we can develop under a single code for practically all Apple platforms, from macOS, watchOS, the new iPadOS and of course iOS; we can create our applications through a library that offers us an interface for our components, a declarative library just as we do to create our applications in Flutter but with Swift.

The logic for programming an application in SwiftUI is much simpler than in Swift; to build an application in Swift you must at least work in two sections, the view through the main storyboard and the controller, in SwiftUI we can do everything from a file with a .swift extension in which we contain the controller and the view in some way.

Requirements to start with SwiftUI

Before writing a single line, you need to be clear about this:

• Compatible iOS versions
  • SwiftUI works from:
  • iOS 13 onwards (although each new version adds significant improvements).
• Xcode: what you need to install
• You need Xcode 11 or higher. It is heavy (several GB), but it includes:
  • The Swift compiler.
  • Simulators.
  • Real-time preview.

Multiple files and structures to define your view components (lists, buttons, etc) in SwiftUI

The basic structure is similar to Flutter's, in which we have a kind of widget tree or, if you want to see it more generically, components that we deepen as we have more and more elements or as these become more complete and complex.

Everything starts with a View.

What is a View and why does everything start there?

In SwiftUI, a view is a struct that conforms to the View protocol. Inside it defines a mandatory property called body.

struct ContentView: View {
   var body: some View {
       Text("Hello, SwiftUI")
   }
}

That is a complete functional interface.

The body method and how SwiftUI renders the UI

body is a computed property. SwiftUI evaluates it every time it needs to redraw the interface. You don't call body; the framework does it when something changes.

Components and views in SwiftUI: building with blocks

This is where SwiftUI really shines.

SwiftUI is like building with Lego blocks: each block is a component that you can combine, reuse, and extend.

Stacks: VStack, HStack, and ZStack

Stacks are containers that organize views:

• VStack: vertical
• HStack: horizontal
• ZStack: overlay

They are the base of almost any layout.

Thinking of the interface as a component tree

The UI is organized as a tree: views that contain other views. This approach is very similar to Flutter or React, and once you "click" mentally, everything fits.

Fragmenting the UI to keep the code clean

In my first projects, I learned quickly that a large view becomes unmanageable. SwiftUI invites you to divide the interface into small, clear, and reusable components.

Another fundamental point is that we can develop multiple components (a group of view elements) in the same file; therefore we can fragment our interface into multiple components, for example, a component for a list, another for the details or each item of that list, and another for the header.

struct CoruseView : View {
    var course = coursesData[0]
    
    var body: some View {
       
        return VStack(alignment: .leading) {
            Text(course.title)
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(.white)
                .padding(20)
                .lineLimit(4)
                //.frame(width: 150)
            Spacer()
            Image(course.image)
                .resizable()
                .renderingMode(.original)
                .aspectRatio(contentMode: .fit)
                .frame(width: 246, height: 150)
            .padding(.bottom, 30)
            }.background(course.color)
            .cornerRadius(30)
            .frame(width: 246, height: 360)
            .shadow(color: course.shadowColor, radius: 20, x: 0, y: 0)
       
    }
}

And in our main view:

            ScrollView(showsHorizontalIndicator: false) {
                HStack(spacing: 30) {
                    // ForEach(0 ..< 3) { item in
                    ForEach(courses) { course in
                        NavigationLink(destination: CoruseView(course: course)) {
                            CoruseView()
                        }
                    }
                    }.padding(.leading, 50)
            }

And all of this can be saved in the same file or in different files, in different folders, which brings us a good point and a bad point; the good one is that we can organize our project as we want in multiple folders/files etc. and the bad one is precisely that point, that by not having a fixed organization, it can bring us problems when working with other people's projects or in a work team.

Dynamic lists and view repetition with ForEach

With SwiftUI we can easily iterate view elements through a ForEach structure and in this way avoid replicating them manually. For example, to have a simple list of elements you need a List component and inside it a Text component:

List {
    ForEach(categories.identified(by: \.self)) { key in
        Text(key)
    }
}

For example, if we have a user structure:

       NavigationView{
            VStack {
                List{
                    ForEach(users) { user in
                        Text(user.username)
                    }
                }.navigationBarTitle(Text("Personajes"))
                
            }
        }

This is simply declarative, it is one way to do it, the only thing you have to keep in mind is that with a ForEach we can create view elements dynamically.

Of course, this list of categories must have a structure that we will see later in another post...

ForEach, HStack for horizontal stacking, images and texts

Now, if you want to have a more interesting listing you could create another component and establish an image and a text; therefore, now you would have 3 components (not counting the text and image components that you are using in this same component) and we take the opportunity to indicate that we want to place an alignment; just as happens with LinearLayout in Android or the same VStack in classic Swift, here we have a couple of components to align or place elements vertically or horizontally:

List {
ForEach(categories.identified(by: \.self)) { key in
   HStack(alignment: .top, spacing: 0) {
        Image(key.image)
        Text(key.name)
    }
}

And with the alignment parameter we can align them to the top, bottom, leading and then we indicate that we don't want spacing.

Reusing components in other files

Earlier I mentioned that we could fragment a view, which corresponds to a single file, into multiple components which were ultimately structs that contained our view elements; but as you can see, we are getting more code and we can perfectly place all that in a separate file and in this way be able to reuse them whenever we want and have better order:

struct CategoryItem: View {
   var landmark: Landmark
   var body: some View {
       VStack(alignment: .leading) {
           landmark
               .image(forSize: 155)
               .cornerRadius(5)
           Text(landmark.name)
               .font(.caption)
       }
       .padding(.leading, 15)
   }
}

This code can be saved in a new SwiftUI type file with the name you want.

The component is a struct and looks like the one shown in the previous example, in which it receives data as a parameter, which is what we are going to use for the construction of the component, which we place in a Stack or vertical pile type view and simply place an image (whose component is Image) and a text, we also use a series of functions known as modifiers to customize the styles of these elements.

Now, we can use this new composite block created by us in any other component, for example, the main component:

ScrollView(showsHorizontalIndicator: false) {
    HStack(alignment: .top, spacing: 0) {
        ForEach(self.items) { landmark in
            CategoryItem(landmark: landmark)
        }
    }
}

Iterating data without duplicating code

With ForEach you can generate views dynamically. This was a before and after for me, especially when I started working with real data lists.

Combining images and text in custom lists

HStack {
   Image(item.image)
   Text(item.name)
}

Reusing views and organizing your project

• Creating reusable components
  • A view is nothing more than a struct. You can create components that receive data and are reused anywhere.
• Separating views into files and folders
  • You can save each component in its own SwiftUI file. The freedom is total, and that is good… and dangerous.
• Advantages and risks of flexibility in SwiftUI
  • The good: you organize the project however you want.
  • The bad: if you don't define clear criteria, working in a team can be chaotic. Here discipline makes the difference.

State in SwiftUI: interfaces that update themselves

• This is one of the most important concepts.
• What state is and why it's so important
  • State defines the data that, when changed, triggers a visual change.
• How views change when data changes

  • @State private var mensaje = "Hola"
    Text(mensaje)
    Button("Change") {
       mensaje = "Hola SwiftUI"
    }

• There are no calls to refresh the view. SwiftUI does it for you.
• Less code, fewer errors
  • When I understood this, I realized how much unnecessary code I had written before just to keep the UI synchronized.

Resources and tutorials to develop your applications in SwiftUI

Of course you will want more than a list, for example, a promotional image which would be another component that can have other components, whether base ones or some defined by you; as we exemplified before, you can create all the components you want, add them as many times as you want and give it the shape you want your application to have.

Here the purpose of these examples is more for you to understand the code that we will analyze little by little and I also leave you at the end of the post some free video tutorials so you can start creating your applications with SwiftUI, it's for you to see the programming logic and the way in which we can build our applications as if they were construction blocks.

Similarly, your best ally is the official documentation at the following link.

This is an idea that is not new, but it is very interesting, it allows us to develop faster since we are like building with Lego blocks, Lego blocks where each block is a different component that can be text, a list, an image or one created by you.

We can have the data locally in files, JSON, or any other component or bring it from a server.

We can give a state to our components, which in other words means that when the state varies, our associated components vary directly and immediately; in this way we save a lot, a lot of code.

You can watch the previous video and see the difference; in this opportunity we are declaring view elements in our file, just as Flutter does where all our interface components are Widgets, here we have a similar organization in which we compose elements that refer to an interface element via code, and we can extend their characteristics via functions.

Xcode for developing your applications with SwiftUI

To develop your applications in SwiftUI it is necessary that you have Xcode 11 or later, which as of today's date is in beta phase; it is a somewhat heavy framework, about 11 GB, but once you have it downloaded and installed on your Mac (the installation is traditional in Mac environments) you will be ready to start developing your first applications; you can download it from the App Store.

On the official Apple site you can get tutorials to learn how to start working with this interesting framework that Apple provides: SwiftUI Better apps. Less code Here you will see resources, descriptions and an interesting tutorial to take the first steps.

Frequently asked questions about SwiftUI for beginners

• Is SwiftUI a good option for learning iOS from scratch?
  • Yes. In fact, today it is the best entry point.
• Does SwiftUI completely replace UIKit?
  • Not entirely, but it covers more real-world cases every time.
• How long does it take to learn SwiftUI?
  • In a few days you can create functional interfaces if you already know Swift.
• Can SwiftUI be used in real projects?
  • Yes, and more and more production apps are using it.

Conclusion: how to move forward after your first steps with SwiftUI

SwiftUI is not just a new framework, it is a new mental paradigm. Thinking about interfaces as declarative components simplifies development and makes creating apps faster and more pleasant.

If you are taking your first steps with SwiftUI, my advice is clear: don't try to learn everything at once. Understand the basics well (views, stacks, state, and reuse) and the rest will come naturally.

Next step, learn about the fundamentals of SwiftUI with Text, images and VStacks