On the road to learn SwiftUI
By: Karin Prater
Tags: Swiftui View Modifiers, Swiftui Tutorial, Swiftui Views, Swiftui, Mvvm

I have created this SwiftUI Developer Roadmap. It is meant as an overview of the different aspects and tools that SwiftUI provides. There have been a few updates for the new SwiftUI 2, which are highlighted in yellow in the roadmap. The map is not complete, but it could serve well as a starting point.

How do you learn software development?

Because I recently created my first own course on SwiftUI, I faced the problem of how to teach the different aspects of SwiftUI. Most classes focus on making apps and introducing new concepts whenever it makes sense in the sample projects. My personal learning does not go well with this. I like to explore all the different tools and their adjustments. Because this allows me to look for practical use cases, I go and make little sample projects (or single views) from there. The shown map is “mapping” my own thinking of app development with SwiftUI. Feel free to make your own map from here. Let me know in the comments, where you would add or move things.

Xcode and SwiftUI

Starting by making your first project with SwiftUI. You have a choice between SceneDelegate and making a 100% SwiftUI only app with WindowGroup. One of the nicest things about SwiftUI is the preview where you can see your code live. Very helpful things are changing the devise type and environment vars like dark mode in the preview.

Views: SwiftUI building blogs

First question: what is a view? or better what is not a view? — well view modifiers, I guess. If you come from functional programming, this may be a bit harder. No more viewDidLoad calls. But if it helps to familiarise yourself there is a little lifecycle management to your proposal: the view modifiers .onAppear { // do something } and .onDisappear { // do more}.

Your View Manifesto

Since you have now all these view building blocks, how do you combine them? How do you change the layout? How do you accomplish more complex navigations? And no you don’t need prepareForSegue. Instead, you will use the data flow in SwiftUI (more further down the road). At this point, you could also be interested in organizing your project, where you could create subviews. Because I see your concern, I will tell you that subviews will not lower your project’s performance :)

Spicing it up with View Modifiers

If you are not happy with the way a view comes out of the box, you have a tone of view modifiers to your proposal. I like to go through the Xcode documentation. Because at this point you might want to give your app a special feel and styling, it is worth looking into creating your own design system in SwiftUI. Writing custom view modifiers could help you creating reusable styling view modifiers.

Where is my data? What’s going on?

This will be a major milestone. Understanding the data flow in SwiftUI is not the easiest to understand, but @State, @Binding, @Environment can help to connect the data storage to the views. It can help you create more complex navigation. If you don’t believe me, check my other post here.

Every change in your app is reflected as a change in your State properties. Every time your user wants to change something or you want to present a change in the UI, you will use state properties. Now you are also ready for animations and control views.

The timing is right for Animations

First of a little warning: animations in SwiftUI are addictive. They are so easy to implement. But not everything is animatable. SwiftUI animations use animatable view modifiers. When the view is just appearing or disappearing transitions come into play. But how do you start an animation? You could do so implicitly or explicitly. Feel free to add withAnimation {} and .animation() in the roadmap.

The user wants to do what?!

You could use control views like Toggles, Steppers, and TextField, but how do you get the property value the user set? — Coming back to data flow and @Binding. You could also add gestures to any view with view modifiers like .onTap { //do get me coffee }. More advanced multitasking users expect to drag and drop. Although, I guess this includes everyone now.

MVVM: Keeping your shit together

To separate your code between views and model code, one more layer can be very useful: the ViewModel. Apple recommends to use Model — View Model — Model (MVVM) to work with SwiftUI. You can implement this design pattern farily easy, because SwiftUI provides you the protocol ObservableObject and the property wrappers @ObservedObject and @EnvironmentObject. You will learn not to mix up ObservableObject and ObservedObject (Is this just me?!).

If you want to get to know MVVM, you can check this video out that I made recently. It shows you with an practical example how to use MVVM and the advantages like including smoothly with unit tests.

Whilst you are here, maybe you want to know about the Combine framework. Seriously I don’t want to convince you, so I will make a really small hint: READ ABOUT COMBINE!!! Raywenderlich’s book would be good (not an affiliate link).

I am not going to discuss what data layer works best with SwiftUI. But I will mention a couple of points. First, if your project needs a local data storage options with advanced search functions, have a look at Core Data and realm.io. If you are dealing with documents, try out creating a new project choosing a document based app during app setup. If you want to share data between users for e.g. a shopping app, or a chat app, maybe Firebase would be a good option.

If you want to have a project to learn more with SwiftUI, I think starting with Core Data would be good. Simply because you get property wrapper such as @FetchRequest. Try it by creating a brand new project and ticking the Core Data box during project setup. The example code is a good starting point. A great course on Core Data with SwiftUI is the Stanford course section on core data. I liked it so much, that I started working on a small note-taking system for myself. You can see the full project on GitHub and the corresponding Udemy course.

If you consider Realm have look at frozen objects, which work better with SwiftUI immutable state objects.

Where to go from here

You can use any of the terms in the map and look for code examples on the internet. Luckily there is more and more content on SwiftUI now. Go explore the apple tutorials. One of my favorite sources is SwiftUI Lab, because of the focus on animations. He also created a companion app, which I personally would like the apple documentation to look like.

If you liked my content and you want to see more, you can check out my course here. Thanks for reading and let me know about your learning roadmap with SwiftUI.