Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fluxで複雑な状態の変化を予測可能にするiOSアプリ開発
Search
Kenichi Yonekawa
April 13, 2016
Programming
9
20k
Fluxで複雑な状態の変化を予測可能にするiOSアプリ開発
Reactive Swift Meetup
http://wantedly.connpass.com/event/29039/
Kenichi Yonekawa
April 13, 2016
Tweet
Share
More Decks by Kenichi Yonekawa
See All by Kenichi Yonekawa
iOSアプリの設計とDependency Injection
yonekawa
22
17k
ネイティブアプリでもFluxしたい
yonekawa
0
2.3k
freeeモバイルチームの変遷と進化
yonekawa
0
7.8k
ReactiveCocoa Pitfalls at freee
yonekawa
2
850
RAC用クラス拡張の作り方
yonekawa
2
3k
Dive into Joybox
yonekawa
5
1.7k
Other Decks in Programming
See All in Programming
クラシルを支える技術と組織
rakutek
0
190
株式会社 Sun terras カンパニーデック
sunterras
0
240
CSC305 Lecture 01
javiergs
PRO
1
400
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
230
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
930
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
390
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
470
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.5k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimizing for Happiness
mojombo
379
70k
Fireside Chat
paigeccino
40
3.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Site-Speed That Sticks
csswizardry
11
880
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Cult of Friendly URLs
andyhume
79
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Context Engineering - Making Every Token Count
addyosmani
5
190
Transcript
@yonekawa 'MVYͰෳࡶͳঢ়ଶͷมԽΛ ༧ଌՄೳʹ͢ΔJ04ΞϓϦ։ൃ
None
None
GSFFFͷJ04ΞϓϦ
https://itunes.apple.com/jp/app/id811207074
ಛతͳ՝ • ͋ΔೖྗબʹΑͬͯՃͷϑΥʔϜ͕දࣔ/ඇදࣔʹ ͳͬͨΓ͢Δέʔε͕ଟ͘ɺViewͷঢ়ଶཧ͕ෳࡶ • 1ͭͷσʔλมߋॲཧʹରͯ͠ෳͷϞσϧ͕ؔ࿈͠ɺґଘ ͠߹͏͜ͱ͕ଟ͍ • ΞϓϦͱͯ͠ͷػೳͷଟ͞ɺͦΕΒ͕૬ޓʹؔ࿈͋͠͏ը໘ ભҠͷෳࡶ͞
MVVMͷ࠾༻ • ViewModelͰViewͷঢ়ଶͱϏδωεϩδοΫΛཧ • ReactiveCocoaͷRACSignalΛView͕subscribeͯ͠ঢ়ଶΛ όΠϯσΟϯά͢Δ • ViewModelʹมԽ͕ى͖Δͱ֘ͷϓϩύςΟͷมߋ͕ RACSignalʹΑͬͯ௨͞ΕɺView͕Ԡ͢Δ
ViewController ViewModel APIClient ߏ VIEW VIEW View ϝιουݺͼग़͠ RACSignal VIEW
VIEW Model
ݱঢ়ͷ՝ • ΞϓϦͷن͕େ͖͘ͳΔʹͭΕͯɺUIΠϕϯτγεςϜ ΠϕϯτʹΑΔঢ়ଶͷมԽΛཧͰ͖ͳ͘ͳ͖ͬͯͨ • ViewModelͱͷํόΠϯσΟϯάʹΑΔґଘؔͷ ༧ଌͷͮ͠Β͞ • ঢ়ଶͷཧͱϞσϧͷૢ࡞ͱυϝΠϯϩδοΫ͕ີ݁߹ •
Ͳ͜Ͱ୭ʹΑͬͯԿ͕มΘͬͯࠓͲ͏ͳͬͯΔͷ͔͕͍͔ ͚ͮΒ͍
WebϑϩϯτΤϯυ͔ΒֶͿ • JavaScriptͷੈքͰMVVM (2way-binding) ͏·͘ड͚ ೖΕΒΕͳ͔ͬͨ • ReactͷొʹΑͬͯΞʔΩςΫνϟͷτϨϯυFluxΛݩ ʹͨ͠୯ํϑϩʔ
Flux facebook/flux: Application Architecture for Building User Interfaces
ΑΓྑ͍ΞʔΩςΫνϟͷԾઆ • WebϑϩϯτΤϯυͷྺ࢙͔ΒɺfreeeΞϓϦ๊͕͍͑ͯΔ ํόΠϯσΟϯάͷຊ࣭తͳͳͷͰ • ୯ํϑϩʔͷίϯηϓτiOSʹ͓͍ͯViewͷঢ়ଶཧ Λ៉ྷʹ͢ΔͨΊʹ༗༻ͳͷͰ
'MVYͷ࠾༻
جຊϑϩʔ • Viewͷঢ়ଶΛStore͕࣋ͪɺStoreActionͷൃߦΛͪड ͚Δ • StoreΛ֎෦͔Βมߋ͢Δ͜ͱͰ͖ͣɺdispatch͞Εͨ ActionʹԠͯࣗ͡Ͱมߋ͢ΔͷΈ • StoreͦΕ͕มߋ͞Εͨ͜ͱͷΈΛViewʹ௨͢Δ •
มߋ͞ΕͨࠩΛૹͬͨΓ͠ͳ͍ • ViewৗʹStoreͷ࠷৽ͷঢ়ଶ͔Βߏங͞ΕΔ
։ൃํ • جຊతʹViewControllerͱ1:1ͰStoreΛ࡞Γঢ়ଶΛཧ͢Δ • ΞϓϦέʔγϣϯશମͷঢ়ଶʢೝূ͍ͯ͠Δͱ͔ʣΛཧ͢Δ StoreΛ࡞Γɺάϩʔόϧʹอ࣋͢Δ • APIϦΫΤετActionCreatorͰߦ͍ɺ݁ՌΛActionͷ Payloadͱͯ͠Storeʹड͚͢ •
Realm(DB)ͷอଘΞϓϦέʔγϣϯͷঢ়ଶมԽͱΈͳ͠ StoreͰߦ͏
Store ViewController Store ViewController ߏ Dispatcher Action Action Store Store
(Global) Store ViewController ActionCreator Action Action Application
ϥΠϒϥϦԽ • https://github.com/yonekawa/SwiftFlux • DispatcherͱͦΕʹඥͮ͘Action/StoreͷநԽ • ReduceStoreͱ͔Flux UtilsҰ෦࣮ͯ͠Δ • ϓϩτίϧࢦͰSwiftΒ͠͞Λҙࣝͨ͠
struct FetchTodo: Action { typealias Payload = [Todo] func invoke(dispatcher:
Dispatcher) { Session.sendRequest(FetchTodoRequest()) { result in switch result { case .Success(let todos): dispatcher.dispatch(self, result: Result(value: todos)) case .Failure(let error): dispatcher.dispatch(self, result: Result(error: error)) } } } } Action
class TodoStore: StoreBase { private(set) var todos: [Todo] private(set) var
error: Error? func init() { register(FetchTodo.self) { (result) in switch result { case .Success(let todos): error = nil self.todos = payload emitChange() case .Failure(let error): self.error = error emitChange() } } } } Store
class ViewController: UITableViewController { let store = TodoStore() func viewDidLoad()
{ super.viewDidLoad() store.subscribe { () in tableView.reloadData() } ActionCreator.invoke(FetchAction()) } } ViewController
࣮ઓೖ https://itunes.apple.com/jp/app/id1037197002
ϝϦοτ • ViewৗʹStore͔Βશͯߏங͞ΕΔͷͰɺݱࡏͷViewͷঢ় ଶ͕໌ࣔతʹͳΓݟ௨͕͠Α͘ͳΔ • StoreΛߋ৽͢ΔͷStore͔ࣗ͋͠Γಘͳ͍ͷͰɺঢ়ଶͷ มԽ֘ͷAction͕ൃߦ͞Ε͔ͨΛ͏͚ͩͰΑ͍ • APIϦΫΤετͷঢ়ଶΛม͑ಘΔϩδοΫͱঢ়ଶΛཧ͢ ΔॴΛ໌֬ʹ͚ΒΕΔ
Viewͷࠩߋ৽ • SwiftͷੈքʹReact͕ଘࡏ͠ͳ͍ɻͦΕͬΆ͍ͷ͍͘ ͔ͭ͋Δ͕Viewͷ࡞Γํ͕ಠࣗʹͳ͓ͬͯΓɺUIKit͕ఏڙ ͢Δͷ͔Β֎ΕΔͷϦεΫ͕ߴ͍ • ViewΛຖճ࠶ߏங͢Δͷίετ͕͔͔ΔͷͰࠩߋ৽͕ ඞཁɻ͔͠͠ؾΛ͚ͭͳ͍ͱঢ়ଶΛ࡞ͬͯ͠·͏ɻ • UITableViewͳͲΛ͏·ࠩ͘ߋ৽͢Δ൚༻తͳΈ͕΄
͍͠
ίʔυྔ૿͑Δ • ঢ়ଶΛม͑ΔͨΊʹຖճActionͱStoreʹ࣮͕ඞཁ • ୯७ͳೖྗͷөͳͲຖճDispatcherΛܦ༝ͯ͠Store ૹΔͷͰʹͳΔ • ঢ়ଶΛཧ͢ΔͨΊͷखؒͱͯ͋͠Δఔ͔ͨ͠ͳ͍
Τϥʔॲཧ • ActionΛ࡞Δͱ͖ʹൃੜͨ͠ΤϥʔΛͲ͏ѻ͏͖͔ɻࠓ Τϥʔը໘ͷঢ়ଶͷ̍ͭͱͯ͠Storeʹ͍ͯ͠Δ • SVProgressHUDͷΑ͏ͳग़͙ͯ͢ফ͑ΔUIΛ͏߹ɺ Store͕࣋ͭΤϥʔঢ়ଶΛஞҰϦηοτ͢Δͷ͕໘
Ξχϝʔγϣϯ • ۪ʹΔͱ͍͢͝ճͷϑϩʔ͕ճΔ • Ξχϝʔγϣϯͷ։࢝ͱऴྃΛঢ়ଶͱͯ͠ཧ͢Δ͖ʁ • ReactͰ͜Εঢ়ଶཧͷର֎ͱ͍ͯ͠Δ༷ࢠ
'MVYWT3FEVY
Redux • ΞϓϦέʔγϣϯͷঢ়ଶ1ͭͷStoreΦϒδΣΫτ͕ཧ ͢Δ • StateϦʔυΦϯϦʔͰActionͷൃߦʹΑͬͯͷΈมߋ͞ ΕಘΔ • ঢ়ଶͷભҠͨͩͷؔ(Reducer)ʹΑͬͯߦ͏
ReduxͷϝϦοτ • Store͕1͔ͭ͠ଘࡏ͠ͳ͍ͨΊɺঢ়ଶ͕มΘΔॴ͕ΑΓ ݶఆ͞Εͯݟ௨͘͢͠ͳΔ • ҰՕॴͰશͯͷঢ়ଶ͕มΘΔͨΊɺશͳมߋͷཤྺΛอ ࣋Ͱ͖Δ͜ͱʹΑΓɺUndo/RedoͳͲ༰қ • Reducerؔલͷঢ়ଶʹॲཧΛՃ͑ͯ৽͍͠ঢ়ଶΛฦͩ͢ ͚ͳͷͰςετ͍͢͠
Redux or Flux? • جຊతʹReduxͷSingle State TreeΑΓྑ͍ঢ়ଶཧͷ ΈΛఏڙͯ͘͠ΕΔͷͰΑ͍ • ReduxSingle
State TreeΛલఏʹσβΠϯ͞Ε͍ͯΔͷ ͰɺΞϓϦέʔγϣϯશମΛͦΕલఏʹ࡞Βͳ͍ͱ͍͚ͳ͍ • Flux੍͕؇͍ͷͰɺෳࡶͳUIΛ෦తʹஔ͖͑ΔͳͲ طଘͷΞϓϦʹೖΕ͍͢
ReSwift • https://github.com/ReSwift/ReSwift • ReduxͷSwift࣮ • ৄ͘͠ninjinkun͞Μ͕ͯ͘͠ΕΔͱࢥ͍·͢ɻ
·ͱΊ
·ͱΊ • ୯ํϑϩʔͷΞʔΩςΫνϟViewͷঢ়ଶΛݟ௨͢͠ ͯ͘͘͠ΕΔͷͰiOSʹ͓͍ͯϝϦοτ͕͋Δ • React͕ແ͍ͨΊStoreͷঢ়ଶ͔ΒޮΑ͘ViewΛ࡞Δͱ͜ Ζʹ՝͕͋Δ͕ɺͷ༨͋Γͦ͏ • ϥΠϒϥϦࠓͷͱ͜ΖReSwift͕ຊ໋͕ͩɺطଘΞϓϦʹ ద༻͢ΔͳΒγϯϓϧͳFlux͋Γ
SwiftFluxͷࠓޙͷల • ͬͱܕ҆શʹͰ͖ΔΑ͏ʹΠϯλϑΣʔεΛݟ͍ͨ͠ • ෳͷStoreΛଋͶͯཧͰ͖ΔStoreGroupతػೳ • ൚༻తͳࠩߋ৽ͷͨΊͷUIϢʔςΟϦςΟ