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

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

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

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

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

Jiro Nagashima

March 22, 2018
Tweet

More Decks by Jiro Nagashima

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. ©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 full-size slide

  26. ©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 full-size slide

  27. ©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 full-size slide

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

    View full-size slide

  29. ©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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. ©2018 Wantedly, Inc.
    ࠂ஌

    View full-size slide

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

    View full-size slide