$30 off During Our Annual Pro Sale. View Details »

WWDC20 Recap of SwiftUI & Combine

kagemiku
July 21, 2020

WWDC20 Recap of SwiftUI & Combine

Event: https://mercari.connpass.com/event/180254/
Some demos and screenshots are hidden due to NDA of Apple Developer Program.

kagemiku

July 21, 2020
Tweet

More Decks by kagemiku

Other Decks in Technology

Transcript

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

    View Slide

  2. 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

    View Slide

  3. RECAP OF
    ɾSWIFTUI
    ɾCOMBINE

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. APP STRUCTURE
    projectApp.swift
    BETA VERSION
    SCREENSHOT

    View Slide

  8. APP STRUCTURE
    projectApp.swift

    View Slide

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

    View Slide

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

    View Slide

  11. ▸ Scene & WindowGroup
    ▸ iOS14 introduces App/Scene/View hierarchy in SwiftUI protocol
    APP STRUCTURE
    APP
    SCENE
    VIEW
    VIEW

    Independent State

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. NEW COMPONENTS AND EFFECT
    ▸ ProgressView
    BETA VERSION
    SCREENSHOT

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. 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

    View Slide

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

    View Slide

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

    View Slide

  27. TEXT
    RECAP OF COMBINE

    View Slide

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

    View Slide

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

    View Slide

  30. 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!

    View Slide