Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose vs SwiftUI (Android Worldwide 2...

Mohit S
October 26, 2021

Jetpack Compose vs SwiftUI (Android Worldwide 2021)

Mohit S

October 26, 2021
Tweet

More Decks by Mohit S

Other Decks in Programming

Transcript

  1. Jetpack Compose • MutableStateOf • Remember • Side Effects •

    @State • @ObservedObject • @Published SwiftUI
  2. Streams of data • LiveData -> observeAsState • Flow ->

    collectAsState • Observable -> subscribeAsState
  3. ImagesUiState.Loading -> { Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center,

    horizontalAlignment = Alignment.CenterHorizontally ) { CircularProgressIndicator() } }
  4. ImagesUiState.Loading -> { Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center,

    horizontalAlignment = Alignment.CenterHorizontally ) { CircularProgressIndicator() } }
  5. val queryState = remember { mutableStateOf("") } OutlinedTextField( value =

    queryState.value, onValueChange = { queryState.value = it } )
  6. val queryState = remember { mutableStateOf("") } OutlinedTextField( value =

    queryState.value, onValueChange = { queryState.value = it } )
  7. fun likeImage(imageId: Int) { isLiked.value = true viewModelScope.launch { val

    result = repo.likeImage(imageId) result.onFailure { isLiked.value = false } } }
  8. fun likeImage(imageId: Int) { isLiked.value = true viewModelScope.launch { val

    result = repo.likeImage(imageId) result.onFailure { isLiked.value = false } } }
  9. fun likeImage(imageId: Int) { isLiked.value = true viewModelScope.launch { val

    result = repo.likeImage(imageId) result.onFailure { isLiked.value = false } } }
  10. Jetpack Compose • MutableStateOf • Remember • Side Effects •

    @State • @ObservedObject • @Published SwiftUI
  11. func getImages() async { images = apiService.getImages() } Publishing changes

    from background threads is not allowed; make sure to publish values from the main thread !
  12. struct ContentView: View { @StateObject var repository = ImagesRepository() }

    Best Practice Use StateObject when creating objects.
  13. struct ContentView: View { 
 @State var showProgressBar = true

    
 }.task { await repository.getImages() showProgressBar = false }
  14. LazyVGrid(spacing: 10) { ForEach(repo.images, id: \.id) { item in Image(item.url)

    .resizable() .frame(minWidth: 0, maxWidth: .infinity) } }
  15. @State var searchText = “" var searchResults: [ImageData] { if

    searchText.isEmpty { return repository.images } else { return filterImages(searchText) }
  16. struct ImageDetailsView: View { 
 @State var isLiked: Bool =

    false 
 var body: some View { 
 }.onAppear { } }
  17. struct ImageDetailsView: View { 
 @State var isLiked: Bool =

    false 
 var body: some View { 
 }.onAppear { isLiked = imageData.isLiked } }
  18. struct ImageDetailsView: View { 
 @State var isLiked: Bool =

    false 
 var body: some View { 
 }.onChange(of: isLiked) { } }
  19. .onChange(of: isLiked) { newValue in if (newValue) { likeTask ?.

    cancel() likeTask = Task { await repository.likeImage(id: imageData.id) } } }
  20. .onChange(of: isLiked) { newValue in if (newValue) { likeTask ?.

    cancel() likeTask = Task { await repository.likeImage(id: imageData.id) } } }
  21. .onChange(of: isLiked) { newValue in if (newValue) { likeTask ?.

    cancel() likeTask = Task { await repository.likeImage(id: imageData.id) } } }
  22. Jetpack Compose • MutableStateOf • Remember • Side Effects •

    @State • @ObservedObject • @Published SwiftUI