once setting up an app’s person interface (UI), the prime of model is extremely crucial. The correct UI model tin brand an app awareness creaseless, responsive, equal pleasant, piece a UI model that doesn’t lucifer an app’s wants tin brand it awareness sluggish and breached. This rule extends to developer education arsenic fine; a UI model with fine-designed APIs tin change engineers to explicit themselves fluently, effectively, and appropriately, piece 1 with the incorrect abstractions oregon inconsistent APIs tin brand engineers’ jobs much hard by slowing them behind with pointless complexity.
astatine Airbnb, we privation our cell apps to supply a planet-people person education and a planet-people developer education. This tendency led america to physique our ain UI model named Epoxy successful 2016. Epoxy is a declarative UI model, which means that engineers depict what their UI ought to beryllium structured similar for a fixed surface government and the model past figures retired however to brand updates to the position hierarchy to render the surface contents. Epoxy makes use of UIKit nether the hood to render views.
The iOS UI model scenery shifted successful 2019 with the instauration of SwiftUI, a archetypal-organization declarative UI model that accomplishes galore of the aforesaid objectives arsenic Epoxy. though SwiftUI was not a bully acceptable for our wants throughout its archetypal 3 years, by 2022 it supplied accrued stableness and API availability. It was about this clip that we began to see adopting SwiftUI astatine Airbnb.
successful this station, we stock wherefore and however we finally changed Epoxy and UIKit with SwiftUI astatine Airbnb. We’ll item however we built-in SwiftUI into Airbnb’s plan scheme, explicate the outcomes of this attempt, and enumerate a fewer challenges we’re inactive running done. last speechmaking this station you’ll realize wherefore SwiftUI has met our advanced barroom for some person and developer education.
Evaluating and readying for SwiftUI
Switching to a fresh UI model is not a project that ought to beryllium undertaken frivolously. last overmuch probe, we posited that SwiftUI would not regress the person education and would better developer education due to the fact that of the pursuing hypotheses:
- versatile and composable: SwiftUI would message much almighty and versatile patterns to negociate position variants and styling on with generic views and position modifiers. This ought to considerably trim the figure of views required to physique the app, since it would beryllium some simpler to customise present views and to constitute fresh behaviour inline astatine the callsite.
- full declarative: SwiftUI codification would beryllium easier to ground astir and alteration complete clip. location ought to usually beryllium nary discourse switching betwixt crucial and declarative coding paradigms similar we had successful Epoxy, for which engineers often wanted to “driblet behind” into UIKit codification.
- little codification: arsenic a consequence of SwiftUI being full declarative, we believed it would return dramatically little codification to physique a SwiftUI position constituent. mostly, bug number correlates with strains of codification.
- quicker iteration: Xcode previews would change close-instantaneous iteration cycles connected SwiftUI position parts and screens, arsenic in contrast to 30 2nd oregon much physique and tally iteration cycles with UIKit.
- Idiomatic: SwiftUI would less cognitive overhead once gathering UI, owed to less customized paradigms and patterns. This would brand it simpler to onboard fresh engineers.
With these hypotheses successful head, we hatched a program to measure and to follow SwiftUI successful 3 phases:
- form 1: physique leafage views, specified arsenic reusable position parts, from our plan scheme
- form 2: physique full screens specified arsenic the preservation particulars leaf oregon the person chart leaf
- form three: physique absolute options composed from aggregate screens
arsenic of the penning of this station, we person efficiently accomplished the archetypal 2 phases of SwiftUI adoption and for form 3 await versatile navigation APIs to beryllium added to SwiftUI. For the constituent (form 1) and surface (form 2) phases, we carried out a tiny aviator successful which engineers signed ahead to attempt SwiftUI for their usage circumstances. The pilots had been utilized to cod suggestions and better our SwiftUI activity astatine that form earlier progressing to the adjacent. This attack enabled america to present worth astatine all phase of adoption, arsenic opposed to adopting SwiftUI for entire options from the acquire-spell with a ample and unsure infrastructure finance upfront.
Enabling SwiftUI
We made a figure of infrastructure and acquisition investments to fit engineers ahead for occurrence.
plan scheme
archetypal-people SwiftUI activity for Airbnb’s plan scheme was a cardinal precedence for accelerating SwiftUI adoption institution-broad. alternatively of simply bridging our current UIKit parts, we rebuilt the plan scheme successful SwiftUI to brand it cold much versatile and almighty.
all position constituent successful our plan scheme helps styling to better reusability by way of customization. We person a order of kind protocols which, once mixed with generated codification, let america to walk kind objects behind done the SwiftUI situation to mimic SwiftUI’s constructed successful styling paradigms. 1 kind of styling that conforms to this protocol is referred to as “versatile kinds”. present’s any illustration codification:
national protocol FlexibleSwiftUIViewStyle: DynamicProperty
/// The contented position kind of this kind, handed to `assemblage()`.
associatedtype contented
/// The kind of position representing the assemblage.
associatedtype assemblage: position
/// Renders a position for this kind.
@ViewBuilder
func assemblage(contented: contented) -> assemblage
This protocol permits america to make a kind entity with a postulation of settable properties that tin wholly customise the rendering of a constituent. A contented entity is handed to the kind truthful that it tin entree the position’s underlying government oregon interactions once creating a fresh position assemblage. present is an illustration kind implementation for a numeric stepper (with any styling omitted for brevity):
national struct DefaultStepperStyle: DLSNumericStepperStyle
national var valueLabel = TextStyle…
national func assemblage(contented: DLSNumericStepperStyleContent) -> any position
HStack
fastener(act: contented.onDecrement) subtractIcon
.disabled(contented.atLowerBound)
matter(contented.statement)
.textStyle(valueLabel)
fastener(act: contented.onIncrement) addIcon
.disabled(contented.atUpperBound)
nevertheless, with versatile kinds engineers tin adhd an wholly customized stepper kind with conscionable a fewer twelve traces of codification by implementing a fresh kind that conforms to DLSNumericStepperStyle. That kind tin beryllium fit connected a position utilizing an autogenerated position modifier:
DLSNumericStepper(worth: $worth, successful: zero...)
.dlsNumericStepperStyle(CustomStepperStyle())Since optimized accessibility activity is applied successful the DLSNumericStepper position, customized kinds robotically acquire the due accessibility behaviour. We person utilized this versatile styling attack passim the implementation of our plan scheme, which permits merchandise engineers to physique fresh constituent variations rapidly and with out accessibility bugs.
Epoxy Bridging
Epoxy powers 1000's of screens successful the Airbnb app. To change seamless adoption of SwiftUI, we constructed infrastructure to change Epoxy not lone to span SwiftUI views into UIKit-based mostly Epoxy lists, however besides to span Epoxy UIKit views to SwiftUI.
To span SwiftUI views to a UIKit Epoxy database, we created an itemModel position modifier that establishes the Epoxy individuality for the SwiftUI position. successful the implementation, this technique wraps the position into a UIHostingController and embeds it inside a postulation position compartment. This inferior unlocked the archetypal form of our SwiftUI rollout by making it trivial to follow SwiftUI successful our current Epoxy screens.
SwiftUIRow(
rubric: "line \(id)",
subtitle: "Subtitle")
.itemModel(dataID: id)likewise, 1 tin span UIKit views to SwiftUI with a position delay that creates a SwiftUI position from a UIKit constituent utilizing its contented, kind invariants, and immoderate further position configuration. successful the implementation, this API makes use of a generic UIViewRepresentable, which robotically creates and updates the UIView arsenic its contented and kind alteration.
EpoxyRow.swiftUIView(
contented: .init(rubric: "line \(scale)", subtitle:.),
kind: .tiny)
.configure discourse successful
mark("Configuring \(discourse.position)")
.onTapGesture
mark("line \(scale) tapped!")
fixed the vastly antithetic format scheme of SwiftUI, decently laying retired a UIKit constituent was a situation. We developed a configurable attack that robotically helps analyzable views specified arsenic UILabel, which requires an further structure walk to decently dimension.
Unidirectional information travel
With Epoxy we recovered that leveraging a unidirectional information travel form made our UI predictable and casual to ground astir. We constructed our screens truthful that the Epoxy contented is rendered arsenic a relation of the surface’s government. person interactions are dispatched arsenic actions that consequence successful mutations to the government, which set off a re-render of the surface. We usage a StateStore entity to home surface government and grip actions to mutate that government. To accommodate this form to SwiftUI, we up to date our StateStore to conform to ObservableObject which permits the shop to set off a re-render of the surface’s SwiftUI position connected government adjustments. We recovered that engineers most popular to proceed to physique screens successful SwiftUI utilizing this attack, since it allows the concern and government mutation logic to beryllium saved abstracted from the position logic. successful galore circumstances we have been capable to displacement surface logic from Epoxy to SwiftUI screens with nary modifications. To exemplify the similarities, present is a elemental antagonistic surface applied successful some position programs:
// successful Epoxy/UIKit:
struct CounterContentPresenter: StateStoreContentPresenter
fto shop: StateStore
var contented: UniListViewControllerContent
.currentDLSStandardStyle()
.gadgets
BasicRow.itemModel(
dataID: ItemID.number,
contented: .init(titleText: "number \(government.number)"),
kind: .modular)
.didSelect _ successful
shop.grip(.increment)
// successful SwiftUI
struct CounterScreen: position
@ObservedObject
fto shop: StateStore
var assemblage: any position
DLSListScreen
DLSRow(rubric: "number \(shop.government.number)")
.highlightEffectButton
shop.grip(.increment)
Testability
To guarantee a advanced choice merchandise, we needed our SwiftUI codification to beryllium testable by plan. Snapshot investigating is our capital attack for investigating views, truthful we usage a static explanation to supply named position variants some to our constituent browser and to our snapshot investigating work:
enum DLSPrimaryButton_Definition: ViewDefinition, PreviewProvider
static var contentVariants: ContentVariants
DLSPrimaryButton(rubric: "rubric") .
.named("abbreviated matter")
DLSPrimaryButton(rubric: "rubric") .
.disabled(actual)
.named("Disabled")
Since we’re returning position variants present, location is a batch of flexibility successful what you tin trial–the model accepts immoderate contented saltation oregon operation of position modifiers. moreover, we conform these definitions to SwiftUI’s PreviewProvider protocol and person these contented variants into the anticipated instrument kind truthful that engineers tin quickly iterate connected the constituent utilizing Xcode Previews.
dissimilar declarative UI frameworks connected another platforms, SwiftUI does not supply a constructed-successful investigating room. successful command to activity behavioral-kind assessments of parts and screens, we built-in the unfastened origin ViewInspector room, to which we’ve besides contributed.
acquisition
We heard from any of our equal corporations that a important situation successful adopting SwiftUI was gathering successful-home experience crossed a ample iOS squad. To code this proactively, we held aggregate fractional-week SwiftUI workshops centered connected SwiftUI fundamentals, which about fractional of our iOS engineering squad attended. Attendees reported that their assurance successful SwiftUI fundamentals accrued by 37%, and their assurance successful gathering fresh elements accrued by 39%. moreover, we recovered that attendees reported their SwiftUI experience arsenic eight% increased than these that did not be a shop about a twelvemonth future.
Findings connected SwiftUI
traces of codification
fixed Airbnb’s multimillion formation iOS codebase, we had been excited by the possible for SwiftUI to trim the magnitude of codification required to physique UI. successful an aboriginal experimentation successful which we rewrote our reappraisal paper we noticed a 6x simplification successful strains of codification –from 1,121 traces to a specified 174 traces of codification! complete the ancient 2 years we person seen reductions successful strains of codification of akin magnitudes arsenic our SwiftUI adoption has progressed.
show
UI show was a cardinal interest arsenic we evaluated SwiftUI. fortuitously, last moving aggregate experiments, we verified that the leaf show mark once utilizing SwiftUI was comparable to a UIKit implementation. We seen a tiny overhead once instantiating UIHostingController, however have been capable to trim this by including a reuse excavation of internet hosting controllers to Epoxy.
Adoption & Developer restitution
With overmuch pleasure astir SwiftUI inside the institution, integrated adoption of the model has been fast. Our constricted aviator of gathering parts successful SwiftUI started successful January 2022, with broad availability opening future that whitethorn. gathering full screens successful SwiftUI entered the aviator form successful October 2022 and past entered broad availability successful January 2023.
arsenic of September, we person complete 500 SwiftUI views and approximately 200 SwiftUI screens. galore of the screens for Airbnb’s 2023 summertime merchandise had been full powered by SwiftUI.
Airbnb’s iOS engineers are besides extremely happy with SwiftUI. successful our about new study, seventy seven% of study respondents stated that SwiftUI improved their ratio. galore respondents talked about that their ratio would better additional with much SwiftUI education, together with these that rated it arsenic slowing them behind. a hundred% of study respondents mentioned that SwiftUI did not negatively impact the choice of their options, and any cited SwiftUI arsenic an betterment to their codification choice.
Challenges
although the decision to SwiftUI has by and ample been a great occurrence, we person encountered the pursuing challenges:
- piece Swift and its surrounding instauration person been unfastened sourced, SwiftUI’s implementation stays a achromatic container. If SwiftUI had been unfastened sourced, we may amended realize the model and debug much efficaciously.
- Our visibility into the development of SwiftUI is constricted to yearly bulletins. If we had a clearer knowing of wherever SwiftUI is headed, we might amended prioritize our adoption direction and cognize wherever to put successful customized options.
- Airbnb helps the newest 2 iOS variations. If newer SwiftUI APIs had been backported to older iOS variations, we may return vantage of almighty fresh options much rapidly and pass little clip penning fallback options.
- successful command to full driblet UIKit, we volition demand a fit of SwiftUI APIs that activity customized transitions and navigation patterns.
- We’ve tally into a figure of challenges and limitations utilizing LazyVStack and ScrollView, together with:
– Insertion, elimination, and replace animations are frequently breached.
– Prefetching offscreen cells and prefetching pictures oregon information is not imaginable.
– any states are reset once scrolled offscreen. - The SwiftUI APIs for matter enter don’t activity each the options which their UIKit counter tops supported, truthful engineers essential span to UIKit.
- We person 18 unfastened feedbacks with pome that papers SwiftUI bugs oregon enhancements that we’ve travel crossed.
decision
successful spite of these challenges, general we person skilled creaseless cruising successful our cautious adoption of SwiftUI astatine Airbnb. By rebuilding our plan scheme, prioritizing acquisition, and offering seamless integration with our current frameworks, we person improved developer velocity and restitution piece sustaining a advanced choice barroom. We’re excited to ticker SwiftUI proceed to germinate and powerfulness much experiences successful our app!
acknowledgment to Eric Horacek, Matthew Cheok, Michael Bachand, Rafael Assis, Ortal Yahdav, Nick Fox and galore others for each of their contributions to SwiftUI astatine Airbnb.
each merchandise names, logos, and manufacturers are place of their respective homeowners. each institution, merchandise and work names utilized successful this web site are for recognition functions lone. usage of these names, logos, and manufacturers does not connote endorsement.