Image for post
Image for post

Best Practices in SwiftUI Composition

Some thoughts on SwiftUI view composition, code readability and application performance

Michael Long
Jun 15, 2019 · 8 min read

SwiftUI View Best Practices

View composition

struct FootnoteText : View {
let text: String
var body: some View {
MultiLineText(text: text, alignment: .center)
.font(.footnote)
}
}
struct MultiLineText: View {
var text: String = ""
var alignment: HAlignment = .leading
var body: some View {
Text(text)
.lineLimit(nil)
.multilineTextAlignment(alignment)
}
}
FootnoteText(text: $model.disclamer)
Text($model.disclamer)
.lineLimit(nil)
.multilineTextAlignment(.center)
.font(.footnote)

Focus on functionality, not appearance

Text($model.disclamer)
.foregroundColor(.red)
.foregroundColor(.green)
struct FootnoteText : View {
let text: String
var body: some View {
MultiLineText(text: text, alignment: .center)
.foregroundColor(.gray)
.font(.footnote)
}
}
FootnoteText(text: $model.disclamer)
.foregroundColor(.red)

Use Semantic Color

Image for post
Image for post

Architect with other platforms in mind

Group {
MyCustomTextField($model.username)
MyCustomTextField($model.password)
}
.font(.headline)
.background(Color.white.opacity(0.5))
.relativeWidth(1)

Let the system do it’s thing

Image for post
Image for post

Bind state as low in the hierarchy as possible

struct MyMainView : View {
@ObservedObject var model: MainViewModel
@EnvironmentObject var settings: UserSettings
var body: some View {
VStack {
MainContentView(model)
MainContentButtons(model)
FootnoteText(text: settings.fullVersionString)
}
}
}
struct MyMainView : View {
@ObservedObject var model: MainViewModel
var body: some View {
VStack {
MainContentView(model)
MainContentButtons(model)
ApplicationVersionFootnote()
}
}
}
struct ApplicationVersionFootnote : View {
@EnvironmentObject var settings: UserSettings
var body: some View {
FootnoteText(text: settings.fullVersionString)
}
}

Completion Block

Better Programming

Advice for programmers.

Michael Long

Written by

Michael Long is a Senior Lead iOS engineer at CRi Solutions, a leader in cutting edge iOS, Android, and mobile corporate and financial applications.

Better Programming

Advice for programmers.

Michael Long

Written by

Michael Long is a Senior Lead iOS engineer at CRi Solutions, a leader in cutting edge iOS, Android, and mobile corporate and financial applications.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store