Scribd
Upload
0 views

iOS-Using-SwiftUI-with-our-existing-UIKit-codebase-Proposal 2

This proposal presents a strategy for integrating SwiftUI into an existing UIKit-based mobile application while preserving current architecture and workflows. It includes a hybrid approach with a SwiftUI wrapper system and design system bridging to facilitate seamless integration. The plan emphasizes gradual adoption, starting with new features and simple components, while ensuring compatibility and maintaining performance standards.

Uploaded by

Christian Lumugdan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

iOS-Using-SwiftUI-with-our-existing-UIKit-codebase-Proposal 2

This proposal presents a strategy for integrating SwiftUI into an existing UIKit-based mobile application while preserving current architecture and workflows. It includes a hybrid approach with a SwiftUI wrapper system and design system bridging to facilitate seamless integration. The plan emphasizes gradual adoption, starting with new features and simple components, while ensuring compatibility and maintaining performance standards.

Uploaded by

Christian Lumugdan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

[iOS] Using SwiftUI with our

existing UIKit codebase


Proposal
by Zonily Jame Pesquera

Executive Summary
This proposal outlines a strategy for incrementally integrating SwiftUI into our existing
UIKit-based mobile application while maintaining compatibility with our current architecture
and development patterns.

Current State
The application currently uses:
UIKit for view construction
SnapKit for programmatic constraints
MVVM architecture with UIViewController handling business logic

Proposed Solution
Propose to implement a hybrid approach that allows SwiftUI views to be seamlessly
integrated into existing UIKit ViewControllers while maintaining our current architectural
patterns so our workflows won't be affected too much
Key Components
1. SwiftUI Wrapper System
1 // Main wrapper to host SwiftUI views in UIKit
2 class SwiftUIWrapper<Content: View>: UIView {
3 private var hostingController: UIHostingController<Content>
4
5 init(content: Content) {
6 self.hostingController = UIHostingController(rootView:
content)
7 super.init(frame: .zero)
8
9 // Add the hosting controller's view as a subview
10 hostingController.view.backgroundColor = .clear
11 addSubview(hostingController.view)
12
13 // Setup constraints
14
hostingController.view.translatesAutoresizingMaskIntoConstraints =
false
15 NSLayoutConstraint.activate([
16 hostingController.view.topAnchor.constraint(equalTo:
topAnchor),
17
hostingController.view.bottomAnchor.constraint(equalTo:
bottomAnchor),
18
hostingController.view.leadingAnchor.constraint(equalTo:
leadingAnchor),
19
hostingController.view.trailingAnchor.constraint(equalTo:
trailingAnchor)
20 ])
21 }
22
23 required init?(coder: NSCoder) {
24 fatalError("init(coder:) has not been implemented")
25 }
26
27 // Update the SwiftUI view's content
28 func update(content: Content) {
29 hostingController.rootView = content
30 }
31 }
32
33 // Extension utilities for easy integration
34 extension UIView {
35 func addSwiftUIView<Content: View>(_ view: Content) ->
SwiftUIWrapper<Content> {
36 let wrapper = SwiftUIWrapper(content: view)
37 addSubview(wrapper)
38 return wrapper
39 }
40 }
41
42 extension UIStackView {
43 func addArrangedSwiftUIView<Content: View>(_ view: Content) ->
SwiftUIWrapper<Content> {
44 let wrapper = SwiftUIWrapper(content: view)
45 addArrangedSubview(wrapper)
46 return wrapper
47 }
48 }
49
50 extension UIViewController {
51 func addSwiftUIView<Content: View>(_ view: Content) ->
SwiftUIWrapper<Content> {
52 let wrapper = SwiftUIWrapper(content: view)
53 self.view.addSubview(wrapper)
54 return wrapper
55 }
56 }

2. Design System Bridging


1 // MARK: - Color Extensions
2 extension Color {
3 init(_ uiColor: UIColor) {
4 if #available(iOS 15, *) {
5 self.init(uiColor: uiColor)
6 } else {
7 var red: CGFloat = 0
8 var green: CGFloat = 0
9 var blue: CGFloat = 0
10 var alpha: CGFloat = 0
11
12 uiColor.getRed(&red, green: &green, blue: &blue,
alpha: &alpha)
13
14 self.init(
15 .sRGB,
16 red: Double(red),
17 green: Double(green),
18 blue: Double(blue),
19 opacity: Double(alpha)
20 )
21 }
22 }
23 }
24
25 extension UIColor {
26 var color: Color {
27 return Color(self)
28 }
29 }
30
31 // MARK: - Font Extensions
32 extension Font {
33 init(_ uiFont: UIFont) {
34 self = Font(uiFont as CTFont)
35 }
36
37 static func custom(_ font: UIFont) -> Font {
38 return Font(font as CTFont)
39 }
40
41 // Common typography conversion
42 static func setTypography(_ font: UIFont) -> Font {
43 return Font(font as CTFont)
44 }
45
46 // Note: `OmnixTypography` is an existing class name, we won't
change this for now
47 static func setTypography(_ typography: OmnixTypography) ->
Font {
48 return Font(typography.font as CTFont)
49 }
50 }
51
52 extension UIFont {
53 var font: Font {
54 return Font(self as CTFont)
55 }
56 }
57
58 // MARK: - View Extension
59 extension View {
60 func typography(_ typography: OmnixTypography) -> some View {
61 self.font(.setTypography(typography))
62 }
63 }

Implementation Strategy
1. View Integration Pattern
1 class ExampleViewController: UIViewController {
2 private lazy var swiftUIContent = addSwiftUIView(
3 ExampleSwiftUIView(
4 viewModel: viewModel
5 )
6 )
7
8 override func viewDidLoad() {
9 super.viewDidLoad()
10
11 // Setup constraints using existing SnapKit patterns
12 swiftUIContent.snp.makeConstraints { make in
13 make.edges.equalToSuperview()
14 }
15 }
16 }

2. Migration Approach
Start with new features using SwiftUI
Gradually refactor existing views starting with simple, self-contained components
Keep complex interactive elements in UIKit initially
Maintain existing navigation patterns using UIKit

Benefits

Category Benefits

Developer Experience Faster UI development with declarative syntax


Better preview capabilities using SwiftUI previews
Reduced boilerplate code
Code Quality More maintainable UI code
Better separation of concerns
Easier testing of UI components
Future Proofing Gradual adoption of Apple's modern UI framework
No disruption to existing functionality
Ability to leverage new SwiftUI features

Technical Considerations

Category Details

Compatibility Minimum iOS target version: iOS 13+


Backward compatibility maintenance
Support for existing CMS integration
Performance Monitor memory usage for wrapped views
Optimize view hierarchy depth
Consider lazy loading for complex SwiftUI views

You might also like