Exploring SwiftUI — A Broad Overview 2/4: Transitioning from UIKit to SwiftUI
This article is the 2nd of a series of 4 aimed at exploring the capabilities of SwiftUI. Happy reading!
Intro
During the four years since the initial release of SwiftUI, there has been a growing trend of projects opting to use it over UIKit. One of the main reasons for this shift is that building UI via code is more scalable and easier for review and for conflict solving. Additionally, it might be because the tech-savvy developers always want to explore new technologies and experiment with them.
SwiftUI requires a minimum iOS version of 13, so if you plan to support older versions then you would need to also keep UIKit around. It is worth noticing that the first version of SwiftUI is somehow incomplete, and better features were introduced only in the latest iOS versions. From my experience, a bare minimum for a production-ready product would be iOS 15. Nonetheless, with every new iOS version, Apple invests more effort into leveraging the capabilities of SwiftUI, introducing new features and overall improvements.
Transitioning from UIKit to SwiftUI
When transitioning from UIKit to SwiftUI, it is important to note that the two frameworks are interoperable. This allows taking an incremental approach in introducing SwiftUI into the codebase and letting it run alongside UIKit, instead of taking a big-bang approach, halting the development of new features until all the codebase has been rewritten using SwiftUI.
Bottom-to-top approach
A recommended way of doing the migration would be a bottom-to-top approach. That means gradually using SwiftUI to build the UI for new features only. This has a significant advantage because it minimises the changes on the existing code.
Also, for the developers, it would be easier because it makes the learning curve a bit more manageable. Over time, as the developers gain more experience and the usage of this framework becomes staple , old screens will get converted too.
UI components library
In order to make the transition, one could start by building a collection of SwiftUI components that can be reused. This creates the incentive to use the new UI library gradually as new screens are developed, as it is more convenient to reuse existing UI components in a plug-and-play fashion.
Over time, the UI components will undergo changes and adaptations, and the most significant advantage of using reusable SwiftUI components is that these changes can be applied in only one place. Since these components are reused throughout the entire UI codebase, any changes made to them will be reflected in every instance where they are used. This promotes consistency and reduces the need to make changes to each instance of the component individually.
Example
But let’s take an example. Let’s take a look at the UIKit code that I used in my previous article of the series and how we can rewrite it in SwiftUI by making use of the interoperability. Yes, you guessed, we are going to use UIHostingController for this.
The SwiftUI view will be embedded as following:
The UIHostingController is a UIKit view controller that manages a SwiftUI view hierarchy, and is used when integrating SwiftUI into a UIKit view hierarchy. We use it to hold all our user interface and embed it into the UIKit view hierarchy.
That’s trivial, all that we need to do is:
- add the UIHostingViewController to the UIViewController as a child
- set its frame size to match the already existing frame size
- notify the UIHostingViewController that the move is complete
Conclusion
UIKit and SwiftUI can coexist thanks to the interoperability. When making the transition to the latter, plan a bottom-to-top approach by incrementally introducing new features that use the new UI framework, reducing more and more the percentage of UIKit codebase in the project. You may start by creating a SwiftUI design system of reusable components that can be shared across the whole UI spectrum. This approach makes it easier for the developers to ship new UI, incentivising the transition.
Thank you for reading! Got a suggestion? Please leave it in the comments section, feedback is always appreciated!
Let’s connect on LinkedIn!
If you’re interested in learning more about Xapo Bank — Bitcoin Bank providing simple and safe usability to retail customers, explore the resources at xapobank.com.
