WWDC20 Recap of SwiftUI & Combine

by kagemiku

Slide 1

Slide 1 text

WWDC20 RECAP OF SWIFTUI & COMBINE @kagemiku (Akira Fukunaga) / Recap of WWDC20 at Mercari

Slide 2

Slide 2 text

ABOUT ME ▸ kagemiku (Akira Fukunaga) ▸ GitHub: @kagemiku ▸ Twitter: @kagemiku_en ▸ Software Engineer at Mercari JP ▸ Team: Client Architect ▸ Joined: April, 2019 (new grads) Last year

Slide 3

Slide 3 text

RECAP OF ɾSWIFTUI ɾCOMBINE

Slide 4

Slide 4 text

RECAP OF SWIFTUI ▸ App structure ▸ List and Collections ▸ New Components and Effect ▸ Data Managements

Slide 5

Slide 5 text

RECAP OF SWIFTUI ▸ App structure ▸ List and Collections ▸ New Components and Effect ▸ Data Managements

Slide 6

Slide 6 text

APP STRUCTURE projectApp.swift ContentView.swift No need AppDelegate.swift and SceneDelegate.swift

Slide 7

Slide 7 text

APP STRUCTURE projectApp.swift BETA VERSION SCREENSHOT

Slide 8

Slide 8 text

APP STRUCTURE projectApp.swift

Slide 9

Slide 9 text

APP STRUCTURE ▸ @main ▸ New attributes for indicating top-level entry point for program ﬂow (Swift 5.3) ▸ detail: https://docs.swift.org/swift-book/ReferenceManual/ Attributes.html#ID626

Slide 10

Slide 10 text

APP STRUCTURE ▸ App ▸ New protocol for representing the structure and behavior of an app. ▸ This protocol has `main` entry point

Slide 11

Slide 11 text

▸ Scene & WindowGroup ▸ iOS14 introduces App/Scene/View hierarchy in SwiftUI protocol APP STRUCTURE APP SCENE VIEW VIEW ↑ Independent State ↓

Slide 12

Slide 12 text

RECAP OF SWIFTUI ▸ App structure ▸ List and Collections ▸ New Components and Effect ▸ Data Managements

Slide 13

Slide 13 text

LIST AND COLLECTIONS ▸ LazyHStack & LazyVStack ▸ Finally, LazyStack is provided! ▸ Inside contents are initialized lazily BETA VERSION SCREENSHOT

Slide 14

Slide 14 text

LIST AND COLLECTIONS ▸ (DEMO) When using normal VStack BETA VERSION SCREENSHOT

Slide 15

Slide 15 text

LIST AND COLLECTIONS ▸ (DEMO) When using LazyVStack BETA VERSION SCREENSHOT

Slide 16

Slide 16 text

LIST AND COLLECTIONS ▸ LazyHGrid & LazyVGrid ▸ Finally, UI components like Collection are provided! BETA VERSION SCREENSHOT

Slide 17

Slide 17 text

LIST AND COLLECTIONS ▸ LazyHGrid & LazyVGrid BETA VERSION SCREENSHOT BETA VERSION SCREENSHOT BETA VERSION SCREENSHOT

Slide 18

Slide 18 text

RECAP OF SWIFTUI ▸ App structure ▸ List and Collections ▸ New Components and Effect ▸ Data Managements

Slide 19

Slide 19 text

NEW COMPONENTS AND EFFECT ▸ Toolbar and Label ▸ You can put toolbar item with Label ( = Text + Image ) BETA VERSION SCREENSHOT

Slide 20

Slide 20 text

NEW COMPONENTS AND EFFECT ▸ ProgressView BETA VERSION SCREENSHOT

Slide 21

Slide 21 text

NEW COMPONENTS AND EFFECT ▸ Link and openURL environment action ▸ Open external URL with default browser BETA VERSION SCREENSHOT

Slide 22

Slide 22 text

NEW COMPONENTS AND EFFECT ▸ (DEMO) matchedGeometryEffect: interpolates animation BETA VERSION SCREENSHOT

Slide 23

Slide 23 text

RECAP OF SWIFTUI ▸ App structure ▸ List and Collections ▸ New Components and Effect ▸ Data Managements

Slide 24

Slide 24 text

DATA MANAGEMENTS ▸ @StateObject ▸ New property wrapper for `ObservableObject` ▸ Creation and destruction is tied to the views life cycle @StateObject @ObservedObject created view is created struct is initialized destructed view is destructed struct is destructed

Slide 25

Slide 25 text

DATA MANAGEMENTS ▸ @StateObject ▸ New property wrapper for `ObservableObject` ▸ Creation and destruction is tied to the views life cycle

Slide 26

Slide 26 text

DATA MANAGEMENTS ▸ SceneStorage and AppStorage ▸ SceneStorage: Scene-scoped data storage ▸ AppStorage: App-scoped data storage (using UserDefaults)

Slide 27

Slide 27 text

TEXT RECAP OF COMBINE

Slide 28

Slide 28 text

TEXT RECAP OF COMBINE ▸ Almost nothing ▸ a bit new things……….

Slide 29

Slide 29 text

RECAP OF COMBINE ▸ assign(to:) ▸ Republishes elements received from a publisher to @Published property

Slide 30

Slide 30 text

SUMMARY ▸ Recap of SwiftUI ▸ App protocol structure is renewed ▸ App -> Scene -> View ▸ AppStorage and SceneStorage for storing data ▸ Lazy stacks and Grid components are provided ▸ New property wrapper @StateObject is introduced ▸ Recap of Combine ▸ Let’s expect next year’s WWDC!