Explora la concurrencia en SwiftUI

Explora la concurrencia en SwiftUI

Descubre cómo SwiftUI aprovecha la concurrencia de Swift para crear apps seguras y receptivas. Explora cómo SwiftUI usa al actor principal de forma predeterminada y descarga el trabajo a otros actores. Aprende a interpretar anotaciones de concurrencia y a administrar tareas asincrónicas con el bucle de eventos de SwiftUI para lograr animaciones fluidas y actualizaciones de IU. Sabrás cómo evitar carreras de datos y escribir código sin miedo.

Capítulos
- 0:00 - Introducción
- 2:13 - Actor principal: Meadows
- 7:17 - Fallas de concurrencia
- 16:53 - Campamento de código
- 23:47 - Próximos pasos
Recursos
Videos relacionados

WWDC25
- Adopción de la concurrencia en Swift
- Codificación conjunta: Mejora una app con la concurrencia en Swift
WWDC23
- Explore SwiftUI animation

// UI for extracting colors

struct ColorScheme: Identifiable, Hashable {
    var id = UUID()
    let imageName: String
    var colors: [Color]
}

@Observable
final class ColorExtractor {
    var imageName: String
    var scheme: ColorScheme?
    var isExtracting: Bool = false
    var colorCount: Float = 5

    func extractColorScheme() async {}
}

struct ColorExtractorView: View {
    @State private var model = ColorExtractor()

    var body: some View {
            ImageView(
                imageName: model.imageName,
                isLoading: model.isExtracting
            )
            EqualWidthVStack {
                ColorSchemeView(
                    isLoading: model.isExtracting,
                    colorScheme: model.scheme,
                    extractCount: Int(model.colorCount)
                )
                .onTapGesture {
                    guard !model.isExtracting else { return }
                    withAnimation { model.isExtracting = true }
                    Task {
                        await model.extractColorScheme()
                        withAnimation { model.isExtracting = false }
                    }
                }
                Slider(value: $model.colorCount, in: 3...10, step: 1)
                    .disabled(model.isExtracting)
            }
        }
    }
}

5:55 - AppKit and UIKit require @MainActor: an example

// AppKit and UIKit require @MainActor
// Example: UIViewRepresentable

struct FancyUILabel: UIViewRepresentable {
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        // customize the label...
        return label
    }
}

6:42 - UI for extracting colors

// UI for extracting colors

struct ColorScheme: Identifiable, Hashable {
    var id = UUID()
    let imageName: String
    var colors: [Color]
}

@Observable
final class ColorExtractor {
    var imageName: String
    var scheme: ColorScheme?
    var isExtracting: Bool = false
    var colorCount: Float = 5

    func extractColorScheme() async {}
}

struct ColorExtractorView: View {
    @State private var model = ColorExtractorModel()

    var body: some View {
            ImageView(
                imageName: model.imageName,
                isLoading: model.isExtracting
            )
            EqualWidthVStack(spacing: 30) {
                ColorSchemeView(
                    isLoading: model.isExtracting,
                    colorScheme: model.scheme,
                    extractCount: Int(model.colorCount)
                )
                .onTapGesture {
                    guard !model.isExtracting else { return }
                    withAnimation { model.isExtracting = true }
                    Task {
                        await model.extractColorScheme()
                        withAnimation { model.isExtracting = false }
                    }
                }
                Slider(value: $model.colorCount, in: 3...10, step: 1)
                    .disabled(model.isExtracting)
            }
        }
    }
}

8:26 - Animated circle, part of color scheme view

// Part of color scheme view

struct SchemeContentView: View {
    let isLoading: Bool
    @State private var pulse: Bool = false

    var body: some View {
        ZStack {
            // Color wheel …

            Circle()
                .scaleEffect(isLoading ? 1.5 : 1)

            VStack {
                Text(isLoading ? "Please wait" : "Extract")

                if !isLoading {
                    Text("^[\(extractCount) color](inflect: true)")
                }
            }
            .visualEffect { [pulse] content, _ in
                content
                    .blur(radius: pulse ? 2 : 0)
            }
            .onChange(of: isLoading) { _, newValue in
                withAnimation(newValue ? kPulseAnimation : nil) {
                    pulse = newValue
                }
            }
        }
    }
}

13:10 - UI for extracting colors

// UI for extracting colors

struct ColorExtractorView: View {
    @State private var model = ColorExtractor()

    var body: some View {
            ImageView(
                imageName: model.imageName,
                isLoading: model.isExtracting
            )
            EqualWidthVStack {
                ColorSchemeView(
                    isLoading: model.isExtracting,
                    colorScheme: model.scheme,
                    extractCount: Int(model.colorCount)
                )
                .onTapGesture {
                    guard !model.isExtracting else { return }
                    withAnimation { model.isExtracting = true }
                    Task {
                        await model.extractColorScheme()
                        withAnimation { model.isExtracting = false }
                    }
                }
                Slider(value: $model.colorCount, in: 3...10, step: 1)
                    .disabled(model.isExtracting)
            }
        }
    }
}

13:47 - Part of color scheme view

// Part of color scheme view

struct SchemeContentView: View {
    let isLoading: Bool
    @State private var pulse: Bool = false

    var body: some View {
        ZStack {
            // Color wheel …

            Circle()
                .scaleEffect(isLoading ? 1.5 : 1)

            VStack {
                Text(isLoading ? "Please wait" : "Extract")

                if !isLoading {
                    Text("^[\(extractCount) color](inflect: true)")
                }
            }
            .visualEffect { [pulse] content, _ in
                content
                    .blur(radius: pulse ? 2 : 0)
            }
            .onChange(of: isLoading) { _, newValue in
                withAnimation(newValue ? kPulseAnimation : nil) {
                    pulse = newValue
                }
            }
        }
    }
}

17:42 - UI for extracting colors

// UI for extracting colors

struct ColorExtractorView: View {
    @State private var model = ColorExtractor()

    var body: some View {
            ImageView(
                imageName: model.imageName,
                isLoading: model.isExtracting
            )
            EqualWidthVStack {
                ColorSchemeView(
                    isLoading: model.isExtracting,
                    colorScheme: model.scheme,
                    extractCount: Int(model.colorCount)
                )
                .onTapGesture {
                    guard !model.isExtracting else { return }
                    withAnimation { model.isExtracting = true }
                    Task {
                        await model.extractColorScheme()
                        withAnimation { model.isExtracting = false }
                    }
                }
                Slider(value: $model.colorCount, in: 3...10, step: 1)
                    .disabled(model.isExtracting)
            }
        }
    }
}

18:55 - Animate colors as they appear by scrolling

// Animate colors as they appear by scrolling

struct SchemeHistoryItemView: View {
    let scheme: ColorScheme
    @State private var isShown: Bool = false

    var body: some View {
        HStack(spacing: 0) {
            ForEach(scheme.colors) { color in
                color
                    .offset(x: 0, y: isShown ? 0 : 60)
            }
        }
        .onScrollVisibilityChange(threshold: 0.9) {
            guard !isShown else { return }
            withAnimation {
                isShown = $0
            }
        }
    }
}

- 0:00 - Introducción
- SwiftUI aprovecha Swift Concurrency para ayudar a los desarrolladores a crear apps rápidas y sin carrera de datos. Swift 6.2 presenta un nuevo modo de lenguaje que marca todos los tipos en un módulo con @MainActor de manera implícita. SwiftUI ejecuta código simultáneamente de diversas maneras y proporciona anotaciones de concurrencia en sus API para ayudar a los desarrolladores a identificar y gestionar la concurrencia. La sesión se centra en comprender cómo SwiftUI gestiona la concurrencia para evitar las carreras de datos y mejorar el rendimiento de la app.
- 2:13 - Actor principal: Meadows
- El protocolo de vista de SwiftUI se encuentra aislado por @MainActor, lo que lo convierte en el valor predeterminado de tiempo de compilación para el código de IU. Esto significa que la mayor parte del código de IU se ejecuta implícitamente en el hilo principal, lo que ayuda a simplificar el desarrollo y garantizar la compatibilidad con UIKit y AppKit. Los modelos de datos instanciados dentro de una vista también se aíslan automáticamente. Las anotaciones de @MainActor de SwiftUI reflejan su comportamiento en el momento de ejecución y la semántica prevista, no solo las conveniencias del momento de compilación.
- 7:17 - Fallas de concurrencia
- SwiftUI usa subprocesos en segundo plano para tareas computacionalmente intensivas, como animaciones y cálculos de formas (por ejemplo, el método “path” del protocolo “Shape”, el cierre “visualEffect”, el protocolo “Layout", el cierre “onGeometryChange”) para evitar fallas en la IU. La anotación “Sendable” indica posibles condiciones de carrera de datos cuando se comparten datos entre el actor principal y los subprocesos en segundo plano. Para evitar las carreras de datos, minimiza el uso compartido de datos. Cuando sea necesario compartir datos, haz copias de estos.
- 16:53 - Campamento de código
- Las devoluciones de llamadas de acción de SwiftUI son síncronas por diseño para garantizar las actualizaciones inmediatas de la IU, especialmente para animaciones y estados de carga. Las tareas de larga ejecución deben iniciarse de forma asíncrona, pero las actualizaciones de la IU deben permanecer síncronas. Separa la lógica de la IU de la lógica no relacionada con la IU (asíncrona) usando el estado como un puente para activar las actualizaciones correspondientes una vez que se completen las tareas asíncronas. Mantén el código asíncrono en la vista simple y concéntrate en informar al modelo sobre los eventos de la IU. La lógica sensible al tiempo requiere que la entrada y la salida de SwiftUI sean síncronas.
- 23:47 - Próximos pasos
- Swift 6.2 viene con una excelente configuración de aislamiento de actores. Si tienes una app, pruébala. Podrás eliminar la mayoría de tus anotaciones @MainActor. Mutex es una herramienta importante para que una clase se pueda enviar. Consulta la documentación oficial para saber cómo hacerlo. Anímate a escribir pruebas unitarias para el código asíncrono en tu app. Intenta hacerlo sin importar SwiftUI.

Explore Get Started

Stay Updated

Explore Platforms

Featured

Explore Technologies

Featured

Explore Community

Featured

Explore Documentation

Release Notes

Explore Downloads

Featured

Explore Support

Featured

Quick Links

Capítulos

Recursos

Videos relacionados

WWDC25

WWDC23