MVVM for iOS

Transcript

1. MVVM for iOS MVVM for iOS @laiso @laiso 03/12/2014 03/12/2014

   potatotips#5(at COOKPAD) potatotips#5(at COOKPAD)

2. laiso is NOT laiso is NOT ແ৬ ແ৬ http://lai.so/

3. ΤϯλʔϓϥΠζ ΤϯλʔϓϥΠζObjective-C Objective-C ͷੈքͱ͸ ͷੈքͱ͸

4. มߋ͕πϥ͍ มߋ͕πϥ͍iOS iOSΞϓϦέʔ ΞϓϦέʔ γϣϯ γϣϯ Fat & Massive ViewController

   God object, Singleton UI testing is very hard

5. มߋʹཱͪ޲͔͏ มߋʹཱͪ޲͔͏iOS iOSΞϓϦ ΞϓϦ έʔγϣϯ έʔγϣϯ OSΞοϓσʔτʹΑΓΫϥΠΞϯτͷ؀ڥ͕ͲΜͲΜߋ ৽͞ΕͯΏ͘ ϢʔβʔαΠυͰಈ͘ͿΜݖݶ΍Өڹ͕େ͖͘มߋʹϦε Ϋ͕͋Δ(඼࣭ཁٻ͕ߴ͍)

   ωΠςΟϒUIͷมߋ͸HTML+JavaScriptͳͲΑΓॏ͘ͳΓ ͕ͪ

6. ઃܭվળ ઃܭվળ ίʔυΛཧղ͠΍͍ͨ͘͢͠ ςετΛॻ͖΍͍ͨ͘͢͠ มߋʹڧ͘ͳΓɺߴ଎ʹ։ൃ͍ͨ͠

7. MVVM MVVM (Model View ViewModel) (Model View ViewModel)

8. MVVM MVVM Windows / .NET WPF Silverlight JavaScript Framework AngularJS

   KnockoutJS

9. MVC MVC MVVM MVVM

10. Cocoa vs MVVM Cocoa vs MVVM ϓϥοτϑΥʔϜຖʹMVCͷߟ͑ํ͸ҧ͏ (Rails,Cocoa,Smalltalk) Controller !=

    ViewController MVVM View == View+ViewController

11. ViewController ViewController Ϗϡʔͷίϯτϩʔϥʔ ΞϓϦέʔγϣϯ/Ϟδϡʔϧ"ͷ"ίϯτϩʔϥʔͰ͸ͳ ͍ ର৅ͷϏϡʔΛอ໋࣋ͯ͠ྩ͢Δ

12. ViewModel ViewModel View-ModelɻϏϡʔͷͨΊͷϞσϧ σʔλόΠϯσΟϯάͷ࢓૊ΈͰσʔλΛϏϡʔͱ઀ଓ Ϗϡʔͳ͠Ͱ΋ΠϯλʔϑΣΠεΛૢ࡞Ͱ͖Δ

13. MVVM MVVMͷத৺ͱͳΔߟ͑ํ ͷத৺ͱͳΔߟ͑ํ એݴతͳViewςϯϓϨʔτ σʔλόΠϯσΟϯά

14. Storyboard(IB) Storyboard(IB) એݴతͳViewςϯϓϨʔτ Storyboard != View த਎͸Ξοϓϧͷಠࣗن֨ͷXMLςΩετϑΝΠϧ Xcode͕GUIσβΠϯπʔϧͱͯ͠ղऍ͢Δɻ ຊ෼͸ϏϡʔΛએݴͯ͠ΠϕϯτΛ઀ଓ͢Δ͜ͱ ʮUIύʔπΛը໘ʹදࣔͤ͞ΔͨΊͷπʔϧʯҎ্ͷ

    ҙຯ߹͍͕͋Δ

15. σʔλόΠϯσΟϯά σʔλόΠϯσΟϯά = Co‐ = Co‐ coa coaόΠϯσΟϯά όΠϯσΟϯά? ?

    Mac OS X޲͚ͷσʔλόΠϯσΟϯάػߏ iOSʹ͸དྷͯͳ͍ see "Cocoa Bindings Programming Topics" http://news.mynavi.jp/special/2005/cocoamvc/menu.html

16. σʔλόΠϯσΟϯά σʔλόΠϯσΟϯά = Re‐ = Re‐ activeCocoa activeCocoa https://github.com/ReactiveCocoa/ReactiveCocoa

17. ReactiveCocoa ReactiveCocoa Mac/iOSͰϦΞΫςΟϒϓϩάϥϛϯάΛ࣮ݱ͢Δҝͷϥ ΠϒϥϦ ؔ਺ܕϓϩάϥϛϯά෩ͷݴޠ಺DSL

18. ReactiveCocoa ReactiveCocoaͱ ͱGitHub GitHub GitHubࣾͷਓୡΛϝΠϯʹ։ൃ͞Ε͍ͯΔ GitHub͕Windows൛ΞϓϦέʔγϣϯΛ։ൃ͠ग़ͨ͋͠ ͨΓ͔Β׆ൃʹ GitHubʹC#/.NETܥͷ࣮ྗऀ͕͍ΔɻXamarin/Mono΋΍ ͬͯΔͦ͏ GitHubͷMacΞϓϦ͸ReactiveCocoaΛ࢖ͬͯMVVMΛ࣮

    ݱ͍ͯ͠Δ

19. ReactiveCocoa ReactiveCocoa มߋΛγάφϧͱ͍͏ΦϒδΣΫτͰදݱͰ͖ΔͷͰɺ ViewModel͸ViewͷৄࡉΛ஌Δඞཁ͕ͳ͍ ViewModelΛର৅ʹςετ͕ॻ͚Δ

20. RVMViewModel RVMViewModel ReactiveCocoa/ReactiveViewModel ಛఆͷγάφϧͷΠϯλʔϑΣΠεΛఆٛͨ͠ϕʔεΫϥ ε ViewModelͰܧঝͯ͠࢖͏

21. ViewModel ViewModelΛ࢓ࠐΉ Λ࢓ࠐΉ ViewControllerͷॳظԽ࣌ʹ // TipsListViewController - (id)init { //

    ... self.viewModel = [[TipsListViewModel alloc] init]; return self; }

22. ViewModel ViewModelΛ࢓ࠐΉ Λ࢓ࠐΉ StoryboardͷγʔέϯεͰInject // TipsListViewController - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

    { if ([[segue identifier] isEqualToString:@"showDetail"]) { NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow]; TipsDetailViewController *viewController = segue.destinationViewController; // ભҠઌͷViewModelΛॳظԽͯ͠ฦ͢ viewController.viewModel = [self.viewModel detailViewModelForIndexPath:indexPath]; } }

23. ViewModel ViewModelͷ୯ମςετ ͷ୯ମςετ it (@"ViewModelͷςετ", ^{ TipsDetailViewModel *viewModel = [[TipsDetailViewModel

    alloc] initWithModel:tips] expect(viewModel.title).to.equal(@"MVVM for iOS"); expect(viewModel.subTitle).to.equal(@""); expect(viewModel.author).to.equal(@"laiso"); });

24. Pros Pros UIͱϩδοΫͷ෼཭ ςετ͠΍͘͢ͳΔ ࠶ར༻͠΍͘͢ͳΔ ϦΞΫςΟϒUIԽͰͷԠ౴ੑ޲্

25. Cons Cons هड़ྔ͕૿͑Δ ReactiveCocoaͷޠኮΛशಘ͢Δඞཁ͕͋Δ ࣮ݧతͰ࣮ફ͢Δͷ͕೉͍͠ ϑϨʔϜϫʔΫଆͷڧ੍ྗ͸ͳ͍ͷͰͨͩ৑௕ʹͳͬ ͯΠϚΠνͳײ͡ͰऴΘΔՄೳੑ΋͋Δ UIʹର͢Δςετ͸ΧόʔͰ͖ͳ͍

26. ͜Ε͔Β ͜Ε͔Β 1. ෳ਺ͷ։ൃऀ͕͔͔ΘΔΑ͏ͳෳࡶͰن໛ͷେ͖ͳΞϓϦ έʔγϣϯΛ͏·͘։ൃͰ͖ΔΑ͏ʹ͢Δ 2. ςετͰอޢͰ͖ΔൣғΛ૿΍ͯ͠ϦϑΝΫλϦϯάͰί ʔυͷ෗ഊΛ๷͗ߴ଎ʹϦϦʔεͰ͖ΔΑ͏ʹ͢Δ 3. ํ๏࿦ͷಋೖͰ͸ͳ͘എܠͷ՝୊ʹؔ৺Λ࣋ͪࣗ෼ͨͪͰ

    ߟ͑Δ͜ͱͰվળ͍ͯ͘͠

27. ࢀߟࢿྉ ࢀߟࢿྉ Code Reuse with MVVM Model-View-ViewModel for iOS |

    Teehan+Lax ReactiveCocoa/Documentation/FrameworkOverview.md at master · ReactiveCocoa/ReactiveCocoa GUI Architectures

28. Functional Reactive Program‐ Functional Reactive Program‐ ming on iOS ming

    on iOS https://leanpub.com/iosfrp

29. Xamarin.iOS Xamarin.iOS C#޲͚ͷMVVMαϙʔτϥΠϒϥϦ https://github.com/MvvmCross/MvvmCross https://github.com/reactiveui/ReactiveUI

30. Thank You Thank You