Prepping For A SwiftUI Future

Many of us are excited to adopt SwiftUI in our production apps next year. We might be working on side projects to wrap our heads around this new paradigm. However, at work the situation is more complex. I will show you how to architect your current app for a smoother migration and include real world examples of UIKit/SwiftUI interoperability. You will leave able to lead crucial conversations with your team about what we can do now for a successful migration next year.

Transcript

1. Prepping For A SwiftUI Future Veronica Ray, Senior Software Engineer at Compass
2. Flux Missing features Functional reactive programming MVVM Combine Testing Declarative Black box Less code to write Better performance App architecture SwiftUI Fun Composable Architecture Interoperability Missing documentation Collaboration with designers
3. Preparing Your Codebase
4. What App Architecture Is Best For SwiftUI? • MVVM • Flux • The Composable Architecture
5. Animal Crossing Creators • Creators post IDs online that you use to download outfits • There’s no way to save these IDs in the game • Animal Crossing Creators allows you to save your favorite creators
6. Hat tip to MA-6549-3814-5086 for this amazing outfit!
7. Why Use MVVM? • The “default” choice for SwiftUI • Many UIKit apps already use this successfully
9. Managing State
10. Why Use Flux? • Small amount of code needed • 3rd party libraries for it are lightweight
12. Why Use Composable Architecture? • Inspired by Flux, but more opinionated and heavyweight • Open source library with great documentation and examples • Example apps covering many domains • Videos showing thought process
13. Flux Pain Points
14. Views Contain The Data Needed To Render Themselves And Their Children
16. var body: some View { WithViewStore(self.store.scope(state: \.view)) { viewStore in
17. extension AppState { var view: AppView.ViewState { .init(editMode: self.editMode) } }
19. Once You Go iOS 13+ Only
20. Write All New Code In SwiftUI
21. A Pragmatic Approach • Don’t need a big rewrite of existing app • Take advantage of the faster development speed of SwiftUI in new projects • Need to master the art of interoperability with UIKit
22. If You’re Already Doing FRP
23. You Can Adopt SwiftUI Without Combine
25. Downsides Of Not Adopting Combine
26. https://github.com/CombineCommunity/rxswift-to-combine-cheatsheet/blob/master/Data/operators.csv
27. https://github.com/quickbirdstudios/CombineRxSwiftPerformance
28. Can’t Follow Standard SwiftUI Resources
29. Interoperability Spikes
30. Using SwiftUI Views Within UIKit Is Easy
31. private let backButton = UIHostingController(rootView: SearchBarBackButton())
32. Using UIKit Within SwiftUI Is NOT Easy
34. Step 1: UIViewRepresentable
35. public struct LabelRepresentation: UIViewRepresentable { var textColor: UIColor var font: UIFont var text: String public func makeUIView(context: UIViewRepresentableContext) -> Label { let label = Label() label.textColor = textColor label.font = font return label } public func updateUIView(_ uiView: Label, context: UIViewRepresentableContext) { uiView.text = text } }
36. public struct LabelRepresentation: UIViewRepresentable { var textColor: UIColor var font: UIFont var text: String public func makeUIView(context: UIViewRepresentableContext) -> Label { let label = Label() label.textColor = textColor label.font = font return label } public func updateUIView(_ uiView: Label, context: UIViewRepresentableContext) { uiView.text = text } }
37. public struct LabelRepresentation: UIViewRepresentable { var textColor: UIColor var font: UIFont var text: String public func makeUIView(context: UIViewRepresentableContext) -> Label { let label = Label() label.textColor = textColor label.font = font return label } public func updateUIView(_ uiView: Label, context: UIViewRepresentableContext) { uiView.text = text } }
38. public struct LabelRepresentation: UIViewRepresentable { var textColor: UIColor var font: UIFont var text: String public func makeUIView(context: UIViewRepresentableContext) -> Label { let label = Label() label.textColor = textColor label.font = font return label } public func updateUIView(_ uiView: Label, context: UIViewRepresentableContext) { uiView.text = text } }
39. Step 2: Add UIRepresentable View To SwiftUI View
40. public struct PageIndicatorView: View { @ObservedObject var model: PageIndicatorModel public var body: some View { LabelRepresentation(textColor: .white, font: .compassSansMedium(12), text: model.text) } }
41. Step 3: UIHostingController
42. imageCarouselView.didScrollHandler.subscribe(onNext: { [weak self] _ in guard self?.images.count ?? 0 > 1 else { return } self?.pageIndicatorView.rootView.model.index = (self?.currentPageIndex ?? 0) + 1 self?.pageIndicatorView.rootView.model.count = self?.images.count ?? 0 })
43. Summary • Decide now if you want to adopt a new app architecture • When you can, write all new code in SwiftUI • Adopt SwiftUI and Combine together unless you have a great reason to not use Combine • Do interoperability spikes in your production app