SwiftUI

SwiftUI offers a declarative approach to user interface design, and it comes with property wrappers that provide different functionality. These guidelines outline the best practices and conventions for building native UI with SwiftUI and its property wrappers.

Project Structure

The project structure used Clean code structure, plus a few additional directories for SwiftUI and KIF specific such as ViewModifiers, Coordinators, and ViewIds.

└── ProjectName
    ├── Configurations
    ├── Resources
    ├── Sources
    │   ├── Application
    │   ├── Constants
    │   ├── Data
    │   │   ├── NetworkAPI
    │   │   └── ...
    │   ├── Domain
    │   │   ├── UseCases
    │   │   └── ...
    │   ├── Presentation
    │   │   ├── Models
    │   │   ├── Coordinators
    │   │   ├── Modules
    │   │   ├── Styles
    │   │   ├── ViewModifiers
    │   │   ├── Views
    │   │   └── ViewIds
    │   └── Supports
    │       ├── Helpers
    │       └── ...
    ├── ProjectNameTests
    └── ProjectNameKIFTests

Property Wrappers

• Wrap a view model of a view that is initialized within a view as @StateObject.

  struct LoginView: View {
  
      @ObservedObject private var viewModel = LoginViewModel()
  }
  

  struct LoginView: View {
  
      @StateObject private var viewModel = LoginViewModel()
  }
  

• Wrap a view model of a view as @ObservedObject if it was initialized from elsewhere.

  struct MyView: View {
  
      @StateObject private var viewModel = MyViewModel()
  
      var body: some View {
          // UI code here
          MySubView(model: viewModel)
      }
  }
  
  struct MySubView: View {
  
      @StateObject var viewModel: MyViewModel
  
      var body: some View {
          // UI code here
      }
  }
  

  struct MyView: View {
  
      @StateObject private var viewModel = MyViewModel()
  
      var body: some View {
          // UI code here
          MySubView(viewModel: model)
      }
  }
  
  struct MySubView: View {
  
      @ObservedObject var viewModel: MyViewModel
  
      var body: some View {
          // UI code here
      }
  }
  

• @Published should ONLY be applied to the view model’s properties that take responsibility for updating the view.

  class MyViewModel: ObservableObject {
  
      @Published private(set) var name = "Some Name"
      @Published private(set) var id = "dummy_id" // View does not consume this property
  
      func updateName(with name: String) {
          self.name = name
      }
  }
  
  struct MyView: View {
  
      @StateObject private var viewModel = MyViewModel()
  
      var body: some View {
          Text(viewModel.name)
      }
  }
  

  class MyViewModel: ObservableObject {
  
      @Published private(set) var name = "Some Name"
      private var id = "dummy_id" // View does not consume this property
  
      func updateName(with name: String) {
          self.name = name
      }
  }
  
  struct MyView: View {
  
      @StateObject private var viewModel = MyViewModel()
  
      var body: some View {
          Text(viewModel.name)
      }
  }
  

Conventions

ViewModifers and View Styles

• Ensure UI code remains DRY by leveraging SwiftUI’s built-in View Styles and ViewModifier.

  • View Styles

    Button("Press Me") { ... }
        .padding()
        .background(Color.green)
        .foregroundStyle(.white)
        .clipShape(Capsule())
    
    Button("Press Me") { ... }
        .padding()
        .background(Color.green)
        .foregroundStyle(.white)
        .clipShape(Capsule())
    

    Button("Press Me") { ... }
        .buttonStyle(BlueButtonStyle())
    
    Button("Press Me") { ... }
        .buttonStyle(BlueButtonStyle())
    
    struct BlueButtonStyle: ButtonStyle {
    
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .padding()
                .background(Color.green)
                .foregroundStyle(.white)
                .clipShape(Capsule())
        }
    }
    

  • Use ViewModifier to create a reusable modifier that can be applied to any view.

    Text("Rounded Label 1")
        .blur(radius: 30.0)
        .clipped()
    
    Button("Press Me") {...}
        .buttonStyle(BlueButtonStyle())
        .blur(radius: 30.0)
        .clipped()
    }
    

    Text("Rounded Label 1")
        .blur()
    
    Button("Press Me") {...}
        .buttonStyle(BlueButtonStyle())
        .blur()
    }
    
    fileprivate struct BlurModifier: ViewModifier {
    
        func body(content: Content) -> some View {
            content
                .blur(radius: 30.0)
                .clipped()
        }
    }
    
    extension View {
    
        func blur() -> some View {
            modifier(BlurModifier())
        }
    }
    

Naming

• A view class representing a whole screen must end with the suffix Screen.

  struct LoginView: View {...}
  

  struct LoginScreen: View {...}
  

Declare an extracted view

• Prioritize using a computed variable. Use a function if the extracted view requires parameter(s).

  var body: some View {
      logoView()
      buttonView(isFocused: true)
  }
    
  // Extracted View
  func logoView() -> some View {
      Image("nimble")
  }
    
  // Extracted View with parameters
  func buttonView(isFocused: Bool) -> some View {
      Button("nimble") {}
          .focus(isFocused)
  }
  

  var body: some View {
      logoView
      buttonView(isFocused: true)
  }
    
  var logoView: some View {
      Image("nimble")
  }
    
  func buttonView(isFocused: Bool) -> some View {
      Button("nimble") {}
          .focus(isFocused)
  }
  

View’s parameter as private

• Always mark a parameter private if it is not intended to be accessed publicly.

  struct ExampleView: View {
      let isShown: Bool
  }
  

  struct ExampleView: View {
      private let isShown: Bool
    
      init(isShown: Bool) {
          self.isShown = isShown
      }
  }