Data Flow Through SwiftUI - devstreaming-cdn.apple.com · Redistribution or public display not...

Post on 27-Jul-2020

5 views 0 download

Preview:

Click to see full reader
Report this document
SHARE

Transcript of Data Flow Through SwiftUI - devstreaming-cdn.apple.com · Redistribution or public display not...

#WWDC19

© 2019 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

Luca Bernardi, SwiftUI Engineer Raj Ramamurthy, SwiftUI Engineer

•Data Flow Through SwiftUI

•Principles of Data Flow •Anatomy of an Update •Understanding Your Data

•Principles of Data Flow •Anatomy of an Update •Understanding Your Data

•Principles of Data Flow •Anatomy of an Update •Understanding Your Data

What is data?

Tools for Data Flow

Property

@Binding

BindableObject

@Environment

@State

Data Access as a Dependency

PlayerView isPlaying: Bool

Data Access as a Dependency

PlayerView isPlaying: Bool

Data Access as a Dependency

PlayerView false

Data Access as a Dependency

falsePlayerViewPlayerView

Data Access as a Dependency

truePlayerView

Source of Truth

Source of Truth

accentColor: Color

isPlaying: Bool

store: MessageStore

post: PhotoPost

Duplicated Source of Truth

View

ViewView

isPlaying: Bool isPlaying: Bool

Duplicated Source of Truth

View

ViewView

isPlaying: Bool isPlaying: Bool

Duplicated Source of Truth

View

ViewView

isPlaying: BoolisPlaying: Bool

Single Source of Truth

View

ViewView

isPlaying: Bool

Single Source of Truth

View

ViewView

isPlaying: Bool

Single Source of Truth

View

ViewView

isPlaying: Bool

struct PlayerView : View { let episode: Episode

var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray) } } }

struct PlayerView : View { let episode: Episode

var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray) } } }

struct PlayerView : View { let episode: Episode

var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray) } } }

struct PlayerView : View { let episode: Episode

var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray) } } }

struct PlayerView : View { let episode: Episode var isPlaying: Bool

var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

struct PlayerView : View { let episode: Episode var isPlaying: Bool

var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

struct PlayerView : View { let episode: Episode var isPlaying: Bool var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

struct PlayerView : View { let episode: Episode var isPlaying: Bool var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

struct PlayerView : View { let episode: Episode var isPlaying: Bool var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

Cannot use mutating member on immutable value: 'self' is immutable

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

false

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

false

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

true

Wraps property access with additional behavior

What’s New in Swift WWDC 2019

Modern Swift API Design Thursday, 2:00

Property Wrapper

@State Property Wrapper

@State private var isPlaying: Bool = false

PlayerView

SwiftUI

@State Property Wrapper

@State private var isPlaying: Bool = false

PlayerView isPlaying = false

SwiftUI

Anatomy of a View Update

PlayerView

ButtonTextText

SwiftUI isPlaying = false

PlayerView

TextText

SwiftUI isPlaying = false

Anatomy of a View Update

Button

PlayerView

TextText

SwiftUI isPlaying = false

Anatomy of a View Update

isPlaying = true

Button

Anatomy of a View Update

PlayerView

SwiftUI

ButtonTextText

isPlaying = true

Anatomy of a View Update

PlayerView

ButtonTextText

SwiftUI isPlaying = true

PlayerView

ButtonTextText

Anatomy of a View Update

PlayerView

ButtonTextText

SwiftUI isPlaying = true

Every @State is a source of truth.

Views are a function of state, not of a sequence of events.

!

!

SwiftUI

!User Interaction

SwiftUI

Action

!User Interaction

SwiftUI

Action

!User Interaction

SwiftUI

Action

State

Mutation

!User Interaction

SwiftUI

Action

State

Mutation

!User Interaction

SwiftUI

Action

State

Mutation

View

Updates

!User Interaction

SwiftUI

Action

State

Mutation

View

Updates

!User Interaction

SwiftUI

Action

State

Mutation

View

Updates

Render

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

PlayButton() } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

PlayButton() } } }

struct PlayButton : View { @State private var isPlaying: Bool = false

var body: some View { Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

struct PlayButton : View { @State private var isPlaying: Bool = false

var body: some View { Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

struct PlayButton : View { @State private var isPlaying: Bool = false

var body: some View { Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

@Binding Property Wrapper

Read and write without ownership

Derivable from @State

@Binding var isPlaying: Bool

struct PlayButton : View { @Binding var isPlaying: Bool var body: some View { Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

struct PlayButton : View { @Binding var isPlaying: Bool var body: some View { Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

PlayButton(isPlaying: $isPlaying) } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

PlayButton(isPlaying: $isPlaying) } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = false var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

PlayButton(isPlaying: $isPlaying) } } }

PlayerViewController

PlayerView

PlayerViewController isPlaying

PlayButton

isPlaying

PlayerView

PlayerViewController isPlaying

PlayButton

isPlaying

PlayerView

PlayerViewController

isPlayingisPlaying

PlayerView

PlayerViewController

isPlaying

PlayButton

isPlaying

PlayerView

isPlaying

PlayButton

isPlaying

API

public struct Toggle<Label> : View { public init( isOn: Binding<Bool>, label: () -> Label ) }

public struct TextField : View { init( _ text: Binding<String> ) }

public struct Slider : View { public init<V : BinaryFloatingPoint>( value: Binding<V> ) }

API

Views are for Data

Layout Visual Effects Navigation

Gestures Drawing Animations

// Animated Changes

struct PlayButton : View { @Binding var isPlaying: Bool var body: some View { Button(action: { self.isPlaying.toggle() }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

// Animated Changes

struct PlayButton : View { @Binding var isPlaying: Bool var body: some View { Button(action: { withAnimation { self.isPlaying.toggle() } }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

// Animated Changes

struct PlayButton : View { @Binding var isPlaying: Bool var body: some View { Button(action: { withAnimation { self.isPlaying.toggle() } }) { Image(systemName: isPlaying ? "pause.circle" : "play.circle") } } }

Raj Ramamurthy, SwiftUI Engineer

•Working With External Data

Tools for Data Flow

@Binding

BindableObject

@Environment

@State

Property

!

SwiftUI

!User Interaction

SwiftUI

Action

State

Mutation

View

Updates

Render

User Interaction

SwiftUI

Action

State

Mutation

View

Updates

Render

!🔔⏰

User Interaction

SwiftUI

Action

State

Mutation

View

Updates

Render

!🔔⏰

Publisher

Combine Publisher

Single abstraction

Main thread: use .receive(on:)

Introducing Combine and Advances in Foundation Thursday, 10:00

Combine in Practice Thursday, 2:00

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = true @State private var currentTime: TimeInterval = 0.0

var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

PlayButton(isPlaying: $isPlaying)

Text("\(currentTime, formatter: currentTimeFormatter)") } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = true @State private var currentTime: TimeInterval = 0.0

var body: some View { VStack { Text(episode.title).foregroundColor(isPlaying ? .white : .gray) Text(episode.showTitle).font(.caption).foregroundColor(.gray)

PlayButton(isPlaying: $isPlaying)

Text("\(currentTime, formatter: currentTimeFormatter)") } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = true @State private var currentTime: TimeInterval = 0.0

var body: some View { VStack { // … Text("\(playhead, formatter: currentTimeFormatter)") } .onReceive(PodcastPlayer.currentTimePublisher) { newCurrentTime in self.currentTime = newCurrentTime } } }

struct PlayerView : View { let episode: Episode @State private var isPlaying: Bool = true @State private var currentTime: TimeInterval = 0.0

var body: some View { VStack { // … Text("\(playhead, formatter: currentTimeFormatter)") } .onReceive(PodcastPlayer.currentTimePublisher) { newCurrentTime in self.currentTime = newCurrentTime } } }

BindableObject Protocol

External

Reference type

Great for the model you already have

class PodcastPlayerStore { var currentTime: TimeInterval var isPlaying: Bool var currentEpisode: Episode

func advance() { ... } func skipForward() { ... } func skipBackward() { ... } }

class PodcastPlayerStore : BindableObject {

var didChange = PassthroughSubject<Void, Never>() // …

func advance() { currentEpisode = nextEpisode currentTime = 0.0 // Notify subscribers that the player changed didChange.send() } }

class PodcastPlayerStore : BindableObject {

var didChange = PassthroughSubject<Void, Never>() // …

func advance() { currentEpisode = nextEpisode currentTime = 0.0 // Notify subscribers that the player changed didChange.send() } }

Creating Dependencies on BindableObject

ViewModel

Creating Dependencies on BindableObject

ViewModel

@ObjectBinding

Creating Dependencies on BindableObject

ViewModel

@ObjectBinding

struct MyView :aView {a @ObjectBinding var model: MyModelObject ... }a

MyView(model: modelInstance)

Creating Dependencies on BindableObject

ViewModel

@ObjectBinding

struct MyView :aView {a @ObjectBinding var model: MyModelObject ... }a

MyView(model: modelInstance)

Creating Dependencies on BindableObject

View

@ObjectBinding

Model

struct MyView :aView {a @ObjectBinding var model: MyModelObject ... }a

MyView(model: modelInstance)

Creating Dependencies on BindableObject

View

@ObjectBinding

Model

struct MyView :aView {a @ObjectBinding var model: MyModelObject ... }a

MyView(model: modelInstance)

Creating Dependencies on BindableObject

View

@ObjectBinding

Model

Pass directly with @ObjectBinding

Automatic dependency tracking

struct MyView :aView {a @ObjectBinding var model: MyModelObject ... }a

MyView(model: modelInstance)

Creating Dependencies Indirectly

View

View

View

Model

Creating Dependencies Indirectly

View

View

View

Environment

Environment

Environment

Model

Creating Dependencies Indirectly

Environment

Environment

Environment

.environmentObject()

Model

View

View

View

Creating Dependencies Indirectly

Environment

Environment

Environment

@EnvironmentObject

.environmentObject()

Model

View

View

View

Creating Dependencies Indirectly

Environment

Environment

Environment

.environmentObject()

Model

@EnvironmentObject

View

View

View@EnvironmentObject

Creating Dependencies Indirectly

Environment

Environment

Environment

.environmentObject()

Model

@EnvironmentObject

View

View

View@EnvironmentObject

struct PlayerView : View { @EnvironmentObject var player: PodcastPlayerStore var body: some View { VStack { Text(player.currentEpisode.title) .foregroundColor(isPlaying ? .white : .gray) Text(player.currentEpisode.showTitle) .font(.caption).foregroundColor(.gray) PlayButton(isPlaying: $player.isPlaying) Text("\(player.currentTime, formatter: playheadTimeFormatter)") } } }

struct PlayerView : View { @EnvironmentObject var player: PodcastPlayerStore var body: some View { VStack { Text(player.currentEpisode.title) .foregroundColor(isPlaying ? .white : .gray) Text(player.currentEpisode.showTitle) .font(.caption).foregroundColor(.gray) PlayButton(isPlaying: $player.isPlaying) Text("\(player.currentTime, formatter: playheadTimeFormatter)") } } }

@ObjectBinding

View View View View View View

Model

@ObjectBinding

View View View View View View

Model

@EnvironmentObject

View View View View View View

Model Environment

@EnvironmentObject

View View View View View View

Model Environment

Environment

•Data applicable to an entire hierarchy •Convenience for indirection •Accent color, right-to-left, and more

Sources of Truth

@State BindableObject

View-local Value

Framework Managed

External Reference

Developer Managed

Building Reusable Components

Read-only: Swift property, Environment

Read-write: @Binding

Prefer immutable access

@Binding

First class reference to data

Great for reusability

Use $ to derive from source

@State @ObjectBinding

@Binding

@Binding

Using State Effectively

Limit use if possible

Use derived Binding or value

Prefer BindableObject for persistence

Example: Button highlighting

Next Steps

Minimize sources of truth

Understand your data

Build a great app!

More Informationdeveloper.apple.com/wwdc19/226

SwiftUI Essentials WWDC 2019

Integrating SwiftUI Thursday, 3:00

Building Custom Views with SwiftUI Friday, 9:00

Top related

S W I F T U I #: &9.1-&...That might sound the same, but there’s an important difference: Apple isn’t saying that you can use identical SwiftUI code on every platform, because
 Documents
iOS Memory Deep Dive - devstreaming-cdn.apple.com · Memory Footprint Pages Typically 16KB Page types • Clean • Dirty Number x of pages Page size = Memory in use
 Documents
Creating Great App Previews - devstreaming-cdn.apple.com · App Previews 30 seconds Demonstrate UI, functionality or features Captured footage iTunes Connect upload
 Documents
Designing for Apple Watchdevstreaming-cdn.apple.com/.../802/802_designing_for_apple_watch.pdfDesigning for Apple Watch Mike Stern User Experience Evangelist Design Session 802 #WWDC15.
 Documents
Bringing Your iOS Apps to OS X - devstreaming-cdn.apple.com · Bringing Your iOS Apps to OS X Cortis Clark Software Engineer. At a Glance. At a Glance 1. Rethink your design . At
 Documents
What’s New in Authentication - devstreaming-cdn.apple.com€¦ · •Sign In with Apple • Password-based authentication • Warnings for weak passwords • OAuth sign-in • USB
 Documents
Focus Interaction on tvOS - devstreaming-cdn.apple.com · Summary Focus Interaction in SpriteKit Focus API supports both UIKit and SpriteKit UIView and SKNode conform to UIFocusItem
 Documents
SwiftUI An Introduction · Praktikum iOS WS 19/20 SwiftUI –An Introduction ... Praktikum iOS WS 19/20 2. Native on all Apple Platforms • Uses the same API across all apple platforms
 Documents
232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction
 Documents
Lecture 7 Big - cs193p.sites.stanford.eduCS193p Spring 2020. Color. vs. UIColor. Color. What this symbol means in SwiftUI varies by context. Is a color-specifier , e.g., .foregroundColor(Color.green)
 Documents
What’s New in LLVM - devstreaming-cdn.apple.com · Swift: Closure function arguments are non-escaping by default • Should not be called after the function returns Easy to forget
 Documents
703 IntroducingCoreML 04 D - devstreaming-cdn.apple.com · void convolutionLayer(int kernelWidth, int kernelHeight, int inputFeatureChannels, int outputFeatureChannels, int strideX,
 Documents
App Development Using TVMLKit - devstreaming-cdn.apple.com · App Frameworks #WWDC16 Session 229 App Development Using TVMLKit Jeremy Foo tvOS Engineer. Agenda Extending Templates
 Documents
Building Apps with SwiftUI - CMSC 436
 Documents
iOS Development with SwiftUI - hackBCAiOS Development with SwiftUI Anthony Li Room 138 Please download Xcode! hackbca.com/ios While installing, ensure you have administrator access.
 Documents
•Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data
 Documents
Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate
 Documents
AVKit for tvOS - devstreaming-cdn.apple.com · Siri voice commands Older Apple TV remotes iOS Remote app Bluetooth keyboards Game controllers Infrared universal remotes. ... • Poster
 Documents
•Advances in Networking Part 2 - devstreaming - Apple Inc. · PDF fileIntroduction URLSession Easy-to-use API for networking • Emphasis on URL loading Supported on all Apple platforms
 Documents
304 iTunes Connect 03 03 FINAL DF - devstreaming-cdn.apple.com · Resources and Help Developer Guide Videos • Agreements, Tax, and Banking • App Previews • TestFlight • App
 Documents

Copyright © 2022 FDOCUMENTS