Efficient development using SwiftUI and reusable components
Roger Pintó, Mobile Software Developer, Sage
Developers always try to simplify their life, either automating repetitive tasks, removing friction, or speeding up development. While working on a UI component, you must be sure that it will look perfect on all the devices, and to do so, you will need to iterate through a large number of views. Does this sound like a repetitive task? That’s because it is!
Enter SwiftUI and its Previews to increase efficiency by providing at a glance the component view in different states and screen sizes.
What is SwiftUI?
It is Apple’s new declarative syntax to build user interfaces, making it easier to read and write than ever before, saving time and maintenance. Xcode gets the best of SwiftUI, providing you with a visual interface of the code that you are writing. You can build your views right from the preview window or through code, and watch it come to life.
Additional benefits of SwiftUI, are that it comes with automatic support for Dynamic Type, Dark Mode, localization and accessibility, delivering amazing experiences to everyone.
SwiftUI also comes with a new Xcode feature, Previews. It allows you to simulate different states for your UI components and to simultaneously check that it will look exactly how you want it in all possible scenarios. This is very handy now that Apple has increased its product line up with even more device sizes.
SwiftUI in action
To test its ease of use, I’ve built a cell with the same UI as one used in Sage Accounting. You can appreciate in the image below that it provides a concise and easy to read implementation.
As mentioned before, in the last Apple Keynote, it released the iPhone Mini and Max, increasing their line up with even more different screen sizes. Here is where Xcode Previews comes in very handy, not just to check views in different dimensions, but also to test its accessibility and all the locales supported in a single place without doing anything else.
In the following image, you can see how a view will look like in the different accessibility sizes (top 3 component views) and in Dark Mode with German localization.
Is it compatible with existing projects?
SwiftUI is totally compatible with existing projects running iOS 13 or above, and it has a good interaction between UIKit and SwiftUI. To learn more interoperability, check the related articles in Sundell’s blog.
Take into consideration that even though Previews can be enabled in any project, in those with a large code base it will prompt issues trying to render the UI as it requires to continuously build, and it is very CPU intensive. Hence, using SwiftUI reusable components and previews make a much better developer experience.
What else can reusable components provide?
Everyone will agree that code reusability is a must, and UI components are no exception. So, being part of a large company, where multiple teams develop mobile applications, sharing synergies can increase development efficiency drastically.
Furthermore, an additional benefit of reusable components is that it allows app modularization, which provides a good code structure and faster build times. You can learn more about modularization in this post.
Distribution through Swift Package Manager
Once the reusable component is ready, it’s time to think about the best way to distribute it. There are a few different options like CocoaPods, Carthage and Swift Package Manager (SPM).
In a previous article, I’ve compared build times between Carthage and SPM, but in this case, I’ve created a package myself to see first-hand how easy it is to work with it. Especially now that with the release of Xcode 12, SPM supports non-source files, making resources like images, views, core data models, etc. available to distribute through that platform.
Let’s check how easy it is to build our first package with just a few lines of code:
After your package is created and pushed into a version control platform, it will be able throughout your network, making it easier than ever to collaborate between teams in reusable components.
As you can see, Swift Package Manager is really easy to use for both creating and consuming frameworks, making it a good solution to distribute your reusable components. To see more information about using SPM check the official documentation.
Final thoughts
By leveraging these new technologies together (SwiftUI, Previews and SPM), we can achieve better development efficiency and robustness, as well as lay the foundations for a shared component network.
References:
https://developer.apple.com/xcode/swiftui/
https://www.swiftbysundell.com/articles/getting-the-most-out-of-xcode-previews/
https://www.avanderlee.com/swiftui/previews-different-states/
https://www.swiftbysundell.com/articles/swiftui-and-uikit-interoperability-part-1/
