Successfully reported this slideshow.
Your SlideShare is downloading. ×

SwiftUI와 TCA로 GitHub Search앱 만들기

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
LLVM UB Optimization
LLVM UB Optimization
Loading in …3
×

Check these out next

1 of 40 Ad
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

SwiftUI와 TCA로 GitHub Search앱 만들기

  1. 1. https://github.com/TheComposers/LetsGitHubSearch
  2. 2. 허규영(), 김대영(DeepWork) SwiftUI와 TCA로 GithubSearch 만들기 The Composable Architecture
  3. 3. 목차 Demo Declarative UI and SwiftUI TCA Workshop1: SwiftUI에 TCA 적용 Effect and Dependency Workshop2: Github API 연동 Workshop3: 실시간 검색 구현
  4. 4. Let's run demo
  5. 5. Starter Final
  6. 6. Declarative UI and SwiftUI
  7. 7. struct CounterView: View { @State var count = 0 var body: some View { HStack { Button("-") { count -= 1 } Text("(count)") Button("+") { count += 1 } } } }
  8. 8. Declarative UI and SwiftUI Declarative UI docs. fl utter.dev UI = f( state ) The layout on screen Builder methods The application state
  9. 9. WWDC19: Data fl ow through SwiftUI Data Flow Action View State 👨💻 User Interaction Render Update Mutate Declarative UI and SwiftUI
  10. 10. Now we know how SwiftUI works
  11. 11. TCA What is TCA? - The Composable Architecture introduced by PointFree - Unidirectional data flow architecture - ex) elm, Redux, MVI, ReactorKit
  12. 12. Architecture Diagram Reduce State Action View Update Mutate Send Handle Store TCA
  13. 13. Reduce State Action View Update Mutate Send Handle Store Architecture Diagram TCA "tap" Increment
  14. 14. Reduce State Action View Update Mutate Send Handle Store Architecture Diagram TCA count=0 Increment
  15. 15. Reduce State Action View Update Mutate Send Handle Store Architecture Diagram TCA count+=1
  16. 16. Reduce State Action View Update Mutate Send Handle Store Architecture Diagram TCA 1
  17. 17. SwiftUI + TCA in Counter example
  18. 18. struct Counter: ReducerProtocol { struct State: Equatable {...} enum Action: Equatable {...} func reduce(state: inout State, action: Action) } State,Action,Reducer TCA
  19. 19. struct State: Equatable { var count = 0 } State,Action,Reducer enum Action: Equatable { case decrement case increment } TCA
  20. 20. func reduce(state: inout State, action: Action) -> ...{ switch action { case .decrement: state.count -= 1 return .none case .increment: state.count += 1 return .none } } State,Action,Reducer TCA
  21. 21. struct CounterView: View { let store: StoreOf<Counter> var body: some View { WithViewStore(self.store) { viewStore in HStack { Button("−") { viewStore.send(.decrement) } Text("(viewStore.count)") Button("+") { viewStore.send(.increment) } } } } }
  22. 22. struct CounterView: View { let store: StoreOf<Counter> var body: some View { WithViewStore(self.store) { viewStore in HStack { Button("−") { viewStore.send(.decrement) } Text("(viewStore.count)") Button("+") { viewStore.send(.increment) } } } } }
  23. 23. Why should I use TCA? - Better State Management - Easy to debug - Enhance Testability - Modularization(Composability) The Composable Architecture
  24. 24. Workshop 1: SwiftUI에 TCA 적용 https://github.com/TheComposers/LetsGitHubSearch
  25. 25. Effect and Dependency
  26. 26. TCA Reduce State Action View Update Mutate Send Handle Store Architecture Diagram
  27. 27. TCA Reduce State Action View Update Mutate Send Handle Store E ff ect Dependency Architecture Diagram
  28. 28. Effect - Execute side effect - Trigger Action - Push side effects to boundary - Make reduce as pure function as possible
  29. 29. Dependency - Low coupling, High Cohesion - Using different Dependencies in environments - Make code maintainable
  30. 30. Dependency Using Dependency in differenct environments TCA protocol DependencyKey { static var liveValue = ... static var previewValue = ... static var testValue = ... } @Dependency(.appDependency) var appDependency
  31. 31. Workshop 2: GitHub API 연동 https://github.com/TheComposers/LetsGitHubSearch
  32. 32. Workshop 3: 실시간 검색 구현 https://github.com/TheComposers/LetsGitHubSearch
  33. 33. Wrap up
  34. 34. SwiftUI and TCA Why shold I use TCA? - Better State Management - Easy to debug - Enhance Testability - Modularization(Composability)
  35. 35. TCA State Management Reducer State Action View Update Mutate Send Handle Store E ff ect Dependency
  36. 36. SwiftUI and TCA State Management WWDC19: Introducing SwiftUI - Reducer.State (RepoSearch) - Mutate states Only in reduce function
  37. 37. - Handling Side Effect (GitHub API) - Manage Dependency (RepoSearchClient) SwiftUI and TCA Easy to Debug,Enhance Testability
  38. 38. SwiftUI and TCA Modularization - Divide Reducers for one module - Easy to compose Reducers - Operators to compose reducers (combine, pullback, forEach...)
  39. 39. References - WWDC19: Introducing SwiftUI - WWDC19: Data flow through SwiftUI - Stop using MVVM in SwiftUI - Droid Knights: Android Architecture - PointFree/swift-composable-architecture - TCA: Dependencies
  40. 40. Further Readings - PointFree/case-study - PointFree/case-study/Examples/Todos - RayWenderich

×