ReactorKitを利用した緩やかなアーキテクチャの移行

2018.03.22 iOS Flux / Redux 勉強会 の登壇資料です

https://wantedly.connpass.com/event/79914/

Transcript

1. 2018.3.22 -
   ©2018 Wantedly, Inc.
   ReactorKit Λར༻ͨ͠
   ؇΍͔ͳΞʔΩςΫνϟͷҠߦ
   iOS Flux / Reduxษڧձ
   Jiro Nagashima
   

   View Slide

2. ©2018 Wantedly, Inc.
   ͸͡Ίʹ
   

   View Slide

3. ©2018 Wantedly, Inc.
   ࣗݾ঺հ
   Ӭౡ࣍࿕@hedjirog
   User Growth νʔϜϦʔμʔWantedly VisitΞϓϦͷ։ൃ
   վળࢪࡦΛ࣮ࢪͭͭ͠
   શମͷ࣮૷ํ਑ͷܾఆͱ࣮ࡍͷมߋΛߦͳ͏
   

   View Slide

4. ©2018 Wantedly, Inc.
   ൃදͷͶΒ͍
   ෦෼త͔ͭஈ֊తͳΞʔΩςΫνϟͷҠߦͷࣄྫΛ঺հ
   Wantedly VisitΞϓϦͷ
   ReactorKit Λར༻ͨ͠
   

   View Slide

5. ©2018 Wantedly, Inc.
   ൃදͷͶΒ͍
   ৽نࣄۀ
   େن໛ͳϦϑΝΫλϦϯά
   # طଘΞϓϦͷվળࢪࡦͱಉ࣌ʹ࣮ࢪ
   POINT
   ෦෼త͔ͭஈ֊తͳΞʔΩςΫνϟͷҠߦͷࣄྫΛ঺հ
   Wantedly VisitΞϓϦͷ
   ReactorKit Λར༻ͨ͠
   

   View Slide

6. ©2018 Wantedly, Inc.
   Wantedly Visit ΞϓϦͱ։ൃମ੍
   Wantedly Visit ΞϓϦͷվम
   ReactorKit ͷಋೖ
   ReactorKit Λར༻࣮ͨ͠૷
   ReactorKitಋೖޙͷؾ͖ͮ
   ໨࣍
   

   View Slide

7. ©2018 Wantedly, Inc.
   Wantedly VisitΞϓϦͱ։ൃମ੍
   ͳͥ෦෼త͔ͭஈ֊తʹΞʔΩςΫνϟͷҠߦΛਐΊͨͷ͔ʁ
   

   View Slide

8. ©2018 Wantedly, Inc. https://wantedlyinc.com/ja/products
   Wantedly Visit
   

   View Slide

9. ©2018 Wantedly, Inc.
   Wantedly Visit ΞϓϦͱ։ൃମ੍
   ‣ ࣮૷มߋͷݕ౼͕ඞཁ
   w J04ΞϓϦ͸ެ։͞Εͯ೥͕ܦա
   w Objective-C͔ΒSwiftͷ࣮૷΁Ҡߦ
   w ϦϦʔε౰ॳ͔ΒͷAPIΫϥΠΞϯτ࣮૷͕ଘࡏ
   ‣ ݶΒΕͨϦιʔεͰ։ൃΛਐΊΔඞཁੑ
   w ৽نࣄۀʹϦιʔε͕ूத
   w େن໛ͳ࣮૷มߋΛߦͳ͏ϦιʔεΛ֬อͰ͖ͳ͍
   ‣ ΤϯδχΞͷۀ຿͸୯७ͳ։ൃ͚ͩͰͳ͍
   • த௕ظͷࢪࡦͷܾఆɾ࣮ࢪΛΤϯδχΞࣗ਎͕ߦͳ͏
   

   View Slide

10. ©2018 Wantedly, Inc.
    ΞʔΩςΫνϟҠߦͷഎܠ
    ‣ ࣮૷มߋͷݕ౼͕ඞཁ
    ‣ ݶΒΕͨϦιʔεͰ։ൃΛਐΊΔඞཁੑ
    ‣ ΤϯδχΞͷۀ຿͸୯७ͳ։ൃ͚ͩͰͳ͍
    େن໛ͳ࣮૷มߋΛߦͳΘͣɺվળࢪࡦͷ࣮ࢪͱซͤͯ
    ෦෼త͔ͭஈ֊తͳΞʔΩςΫνϟͷҠߦ͕ՄೳͳखஈΛٻΊ͍ͯͨ
    

    View Slide

11. ©2018 Wantedly, Inc.
    Wantedly VisitΞϓϦͷվम
    Ͳͷ෦෼ͰΞʔΩςΫνϟͷҠߦΛਐΊͨͷ͔ʁ
    

    View Slide

12. View Slide

13. View Slide

14. ©2018 Wantedly, Inc.
    վमՕॴืूը໘
    ‣ ଟ༷ͳίϯςϯπ
    w ձࣾ৘ใɺϝϯόʔͷϓϩϑΟʔϧɺԠԉίϝϯτ
    ‣ ෳ਺ͷAPIϦΫΤετ
    w ืूͷৄࡉɺλάͷҰཡɺؔ࿈ืूͷҰཡ
    ‣ Ϣʔβʔૢ࡞ʹΑΔঢ়ଶมߋ
    w ϒοΫϚʔΫɺԠืɺԠԉ
    w දࣔϝϯόʔͷ੾Γସ͑
    

    View Slide

15. ©2018 Wantedly, Inc.
    վमՕॴืूը໘
    ‣ ଟ༷ͳίϯςϯπ
    ‣ ෳ਺ͷAPIϦΫΤετ
    ‣ Ϣʔβʔૢ࡞ʹΑΔঢ়ଶมߋ
    ෳࡶͳը໘Ͱ෦෼తͳΞʔΩςΫνϟͷҠߦʹ੒ޭ
    

    View Slide

16. ©2018 Wantedly, Inc.
    ΞʔΩςΫνϟҠߦͷཱ໾ऀReactorKit
    https://github.com/ReactorKit/ReactorKit
    

    View Slide

17. ©2018 Wantedly, Inc.
    ReactorKitͷಋೖ
    ReactorKitͱ͸Կ͔ʁͳͥReactorKitΛಋೖͨ͠ͷ͔ʁ
    

    View Slide

18. ©2018 Wantedly, Inc.
    ‣ Fluxͷ࣮ݱ
    w ୯Ұํ޲ͷσʔλϑϩʔ
    w ঢ়ଶ؅ཧͷෳࡶ͞ͷղফ
    ‣ Reactive ProgrammingΛԠ༻
    w ετϦʔϜʹΑΔ6*ૢ࡞΍ঢ়ଶͷ఻ൖ
    w RxSwiftΛར༻
    w ඇಉظॲཧͷෳࡶ͞ͷղফ
    ReactorKit
    

    View Slide

19. ©2018 Wantedly, Inc.
    ReactorKit ͷ֓೦ਤ
    https://github.com/ReactorKit/ReactorKit#basic-concept
    ۃΊͯγϯϓϧ
    

    View Slide

20. ©2018 Wantedly, Inc.
    ReactorKit ಋೖͷܾΊख
    ‣ Flux ୯Ұํ޲ͷσʔλϑϩʔ
    ʹର͢Δظ଴
    w Wantedly Visit ΞϓϦͷಛ௃ͱͯ͠ɺঢ়ଶ؅ཧΛඞཁͱ͢Δ༷ʑͳը໘Λ༗͢Δ
    w ଟ༷ͳίϯςϯπͷදࣔɺߴ౓ͳݕࡧϑΟϧλʔɺνϟοτɺϓϩϑΟʔϧฤू
    ‣ RxSwift ͱซ༻Մೳ
    w RxSwiftΛར༻͍ͯ͠ΔͷͰɺซ༻͢Δख๏Λཱ֬͢Δඞཁ͕ͳ͍
    ‣ ෦෼త͔ͭஈ֊తʹಋೖ͕Մೳ
    • “Start Small”ͱ͍͏σβΠϯΰʔϧΛܝ͍͛ͯΔ
    

    View Slide

21. ©2018 Wantedly, Inc.
    ReactorKitΛར༻࣮ͨ͠૷
    ͲͷΑ͏ͳ࣮૷͔ʁ
    

    View Slide

22. View Slide

23. ©2018 Wantedly, Inc.
    ืूը໘ͷ࣮૷
    https://github.com/ReactorKit/ReactorKit#basic-concept
    

    View Slide

24. ©2018 Wantedly, Inc.
    ืूը໘ͷ࣮૷
    https://github.com/ReactorKit/ReactorKit#reactor
    

    View Slide

25. ©2018 Wantedly, Inc.
    ืूը໘ͷ࣮૷
    https://github.com/ReactorKit/ReactorKit#reactor
    ProjectViewController
    ProjectViewReactor
    

    View Slide

26. ©2018 Wantedly, Inc.
    Reactor ͷ࣮૷
    ProjectViewReactor
    1. ActionͱStateͷఆٛ
    2. mutateϝιουͱredueϝιουͷ࣮૷
    POINT
    https://github.com/ReactorKit/ReactorKit#reactor
    

    View Slide

27. ©2018 Wantedly, Inc.
    enum Action {
    case load
    case additionalLoad
    case toggleBookmarking
    case selectStaffing(Int)
    }
    Action ͷఆٛྫ
    ProjectViewReactor
    

    View Slide

28. ©2018 Wantedly, Inc.
    struct State {
    var project: Project
    var summaryTags: [ProjectSummaryTag] = []
    var relatedProjectSections: [ProjectRelatedProjectSection] = []
    var companyProjects: [Project] = []
    var isProjectLoaded: Bool = false
    var isBookmarking: Bool
    var isApplying: Bool
    var isSupporting: Bool
    var selectedStaffing: Staffing?
    }
    State ͷఆٛྫ
    ProjectViewReactor
    

    View Slide

29. ©2018 Wantedly, Inc.
    func mutate(action: Action) -> Observable {
    switch action {
    case .load:
    return Observable
    .merge(
    Observable
    .concat([
    projectService.project(id: currentState.project.id).asObservable().map { .setProject($0) },
    Observable.just(.setProjectLoaded(true)),
    ]),
    projectService.summaryTags(projectID: currentState.project.id).asObservable().map { .setSummaryTags($0) }
    )
    …
    }
    mutate ϝιουͷ࣮૷ྫ
    ProjectViewReactor
    

    View Slide

30. ©2018 Wantedly, Inc.
    func reduce(state: State, mutation: Mutation) -> State {
    switch mutation {
    case let .setProject(project):
    var state = state
    state.project = project
    state.isBookmarking = project.isBookmarking
    state.isApplying = project.isApplied
    state.isSupporting = project.isSupporting
    state.selectedStaffing = state.selectedStaffing ?? project.staffings?.first
    return state
    …
    }
    reduce ϝιουͷ࣮૷ྫ
    ProjectViewReactor
    

    View Slide

31. ©2018 Wantedly, Inc.
    ProjectViewController
    View ͷ࣮૷
    1. bindϝιουͷ࣮૷
    2. Actionͷ఻ൖͱStateͷ൓ө
    POINT
    https://github.com/ReactorKit/ReactorKit#reactor
    

    View Slide

32. ©2018 Wantedly, Inc.
    ProjectViewController
    func bind(reactor: Reactor) {
    rx.methodInvoked(#selector(viewDidLoad))
    .map { _ in Reactor.Action.load }
    .bind(to: reactor.action)
    .disposed(by: disposeBag)
    …
    state
    .map { $0.isBookmarking }
    .distinctUntilChanged()
    .bind(to: bookmarkButton.rx.isSelected)
    .disposed(by: disposeBag)
    …
    }
    bind ϝιουͷ࣮૷ྫ
    

    View Slide

33. ©2018 Wantedly, Inc.
    ืूը໘ͷ࣮૷
    https://github.com/ReactorKit/ReactorKit#reactor
    ProjectViewController
    ProjectViewReactor
    

    View Slide

34. ©2018 Wantedly, Inc.
    ReactorKitಋೖޙͷؾ͖ͮ
    ಋೖͯ͠෼͔ͬͨ͜ͱ͸Կ͔ʁ
    

    View Slide

35. ©2018 Wantedly, Inc.
    ؾ͖ͮ
    ‣ ςετख๏ཱ͕֬͞Ε͍ͯΔ
    w ԿΛͲ͏ςετ͢΂͖͔໌ݴ͞Ε͍ͯͯɺखஈ΋༻ҙ͞Ε͍ͯΔ
    w ςετख๏ཱ͕֬͞Εͣςετ͕ॻ͔Εͳ͍ͱ͍͏ࣄଶ͕ى͜ΓͮΒ͍
    ‣ ඇΞϓϦΤϯδχΞ͕ΞʔΩςΫνϟΛཧղ͠΍͍͢
    w ࣾ಺Ͱ͸webͷϑϩϯτ࣮૷ͰRedux Λར༻͍ͯ͠ΔͷͰલఏ஌͕ࣝ͋Δ
    w ReactorKitͷγϯϓϧ͞΋ड͚ೖΒΕ΍͍͢
    ‣ αϯϓϧ͕๛෋
    w ෳ਺ͷن໛ͷΞϓϦͷαϯϓϧ͕ެ։͞Ε͍ͯΔ
    w ඞཁͳ࣮૷ྫ͕ݟ͔ͭΔʢάϩʔόϧͳঢ়ଶͷѻ͍ɺςετίʔυͳͲʣ
    

    View Slide

36. ©2018 Wantedly, Inc.
    ࠂ஌
    

    View Slide

37. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    ”ReactorKit Meetup” ։࠵͠·͢
    ࡞ऀͷํΛ͓ট͖͢Δ༧ఆͰ͢ʂ
    Ϣʔβʔͷํɺ-5ر๬ऀͷํ͸͓੠ֻ͚͍ͩ͘͞ʂ
    

    View Slide