Tutorial: Refactoring the UI

[Peter Friese]

Refactor code to use MVVM pattern

• Create folder structure

  Features
  ├─ Reminders
  │  ├─ Views
  │  ├─ Model
  

• Rename the ContentView to ReminderListView
• Create a view model
  • Explain why:
    • our code is littered with low-level code that manipulates our data model.
    • this makes our code harder to maintain, and harder to understand
    • as we add more features and screens to the app, we will add more code that will manipulate the app’s data model
    • to avoid any inconsistencies in behaviour, it is a good idea to centralise data access and management
    • for now, we’re going to extract this code into a view model, but later we will go one step further and add a repository / store to handle backend access for us.
  • Implement a view model

Refactor the UI to be more reusable

• Extract the list row into a separate view - Explain why: as we add more and more features to the app, the code for rendering the rows will become more and more complex. For example, we will add the following features:
  - Showing the note
  - Showing the flag
  - Showing the date / time
  - Showing the priority
  - Showing thumbnails of the attached images in different sizes and arrangements)
  • Refactor the code, use the refactoring tools that are available in the current Xcode version
  • For more details on refactoring, see my video series / the SwiftUI Component book
• Turn the tappable image in to a toggle
  • Explain why: SwiftUI has a custom component for on/off states, and it’s good practice to use the most appropriate component for the job
  • Refactor the code
    • Replace this with a plain toggle
    • Now, this looks awful, but thankfully this is a styleable component
    • Briefly explain the concept of styling
    • Show the code for styling the toggle
  • For more details on styling, check out my blog post / the SwiftUI component book