SwiftUI Learning Roadmap

The iOS development landscape changed dramatically in 2019. We have a new SwiftUI framework. SwiftUI is a new declarative way to build applications for the Apple ecosystem. Let’s build a SwiftUI learning curve here. I would like to share with you a list of all the articles you need to learn SwiftUI.

basic

Apple put together a SwiftUI Tutorial 1 this year and it’s a great job. I recommend learning the basics of SwiftUI from these tutorials.

The attribute wrapper is one of the new features of the Swift language to support the SwiftUI framework. To understand the most important attribute wrappers, such as @state, @Binding, @observedobject, @environmentobject, and @environment, Please read my Understanding Property Wrappers in SwiftUI2 article.

Another article I wrote about the SwiftUI mechanic was You Have to Change mindset to Use SwiftUI3. It should help you understand how SwiftUI works.

[1]https://developer.apple.com/tutorials/swiftui/

[2]https://swiftwithmajid.com/2019/06/12/understanding-property-wrappers-in-swiftui/

[3]https://swiftwithmajid.com/2019/11/19/you-have-to-change-mindset-to-use-swiftui/

Layout system

SwiftUI also has a new layout system that is more fun than AutoLayout. The new layout system is very powerful and straightforward. I strongly encourage you to read these articles to understand the new layout system and its benefits.

• SwiftUI Layout System⁵

• Outside the View Tree — Part 1: PreferenceKey6

• outside the View Tree — Part 2: AnchorPreferences7

• Inspecting the View Tree — Part 3: Nested Views8

[5]https://kean.github.io/post/swiftui-layout-system [6]https://swiftui-lab.com/communicating-with-the-view-tree-part-1/ [7]https://swiftui-lab.com/communicating-with-the-view-tree-part-2/ [8]https://swiftui-lab.com/communicating-with-the-view-tree-part-3/

The framework

SwiftUI has a lot in common with the React framework, bringing many new concepts to iOS development. I’ve built some applications using these ideas and really like the way it works. Here is a list of useful articles.

• Introducing Container views in SwiftUI⁹

• Modeling app state using Store objects in SwiftUI¹⁰

• Redux-like state container in SwiftUI¹¹

[9]https://swiftwithmajid.com/2019/07/31/introducing-container-views-in-swiftui/

[10]https://swiftwithmajid.com/2019/09/04/modeling-app-state-using-store-objects-in-swiftui/

[11]https://swiftwithmajid.com/2019/09/18/redux-like-state-container-in-swiftui/

SwiftUI’s declarative style

SwiftUI is a declarative framework. This means that you declare what you want to achieve, and the framework takes care of that and decides how to render your view. Depending on the context, the exact same view can have another look. I wrote about declarative methods in SwiftUI.

• Building forms with SwiftUI¹¹

• View composition in SwiftUI¹²

• Reusing SwiftUI views across Apple platforms¹³

• ViewModifiers SwiftUI14 in

• Compose able Styling in SwiftUI16

[12]https://swiftwithmajid.com/2019/06/19/building-forms-with-swiftui/

[13]https://swiftwithmajid.com/2019/10/30/view-composition-in-swiftui/

[14]https://swiftwithmajid.com/2019/10/23/reusing-swiftui-views-across-apple-platforms/

[15]https://swiftwithmajid.com/2019/08/07/viewmodifiers-in-swiftui/

[16]https://swiftwithmajid.com/2019/08/28/composable-styling-in-swiftui/

Animation and Interaction

SwiftUI uses animation to handle all state changes for you. It allows us to build interactive views in a very straightforward and aesthetically pleasing way. I’ve discussed this topic many times on my blog.

• Animations in SwiftUI¹⁷

• Gestures in SwiftUI¹⁸

• Building Bottom sheet in SwiftUI¹⁹

• Building Pager view in SwiftUI²⁰

[17]https://swiftwithmajid.com/2019/06/26/animations-in-swiftui/

[18]https://swiftwithmajid.com/2019/07/10/gestures-in-swiftui/

[19]https://swiftwithmajid.com/2019/12/11/building-bottom-sheet-in-swiftui/

[20]https://swiftwithmajid.com/2019/12/25/building-pager-view-in-swiftui/

I also want to mention Javier’s excellent series of articles on SwiftUI medium and advanced animation.

• Advanced SwiftUI Animations — Part 1: Paths21

• Advanced SwiftUI Animations — Part 2: GeometryEffect22

• Advanced SwiftUI Animations — Part 3: AnimatableModifier23

[21]https://swiftui-lab.com/swiftui-animations-part1/

[22]https://swiftui-lab.com/swiftui-animations-part2/

[23]https://swiftui-lab.com/swiftui-animations-part3/

Auxiliary function

SwiftUI took another step to make our app accessible by default. It’s out of the box, but it also provides a nice API for customizable accessibility. To learn more about accessibility in SwiftUI, I recommend reading the following articles:

• the org.eclipse.swt.accessibility SwiftUI24 in

• Dynamic Type in SwiftUI²⁵

• Localization in SwiftUI²⁶

[24]https://swiftwithmajid.com/2019/09/10/accessibility-in-swiftui/

[25]https://swiftwithmajid.com/2019/10/09/dynamic-type-in-swiftui/

[26]https://swiftwithmajid.com/2019/10/16/localization-in-swiftui/

Draws a custom view

SwiftUI provides a Shape API that allows us to quickly build custom views. I learned this while making charts in one of the applications.

• Building BarChart with Shape API in SwiftUI²⁷

• Gradient in SwiftUI²⁸

• GeometryReader to the Rescue²⁹

[27]https://swiftwithmajid.com/2019/08/14/building-barchart-with-shape-api-in-swiftui/

[28]https://swiftwithmajid.com/2019/11/13/gradient-in-swiftui/

[29]https://swiftui-lab.com/geometryreader-to-the-rescue/

conclusion

2019 is a very important year and I hope we will get SwiftUI 2.0 with many new features during WWDC 2020. We still have a lot to learn before the next SwiftUI release.