MVVM for iOS

iOSアプリケーションの開発にMVVMアーキテクチャの考えを持ち込んで設計を見直そうという話をしました

Transcript

1. MVVM for iOS
   MVVM for iOS
   @laiso
   @laiso
   03/12/2014
   03/12/2014
   potatotips#5(at COOKPAD)
   potatotips#5(at COOKPAD)
   

   View Slide

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

   View Slide

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

   View Slide

4. มߋ͕πϥ͍
   มߋ͕πϥ͍iOS
   iOSΞϓϦέʔ
   ΞϓϦέʔ
   γϣϯ
   γϣϯ
   Fat & Massive ViewController
   God object, Singleton
   UI testing is very hard
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. MVC
   MVC
   MVVM
   MVVM
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. ViewModel
    ViewModelΛ࢓ࠐΉ
    Λ࢓ࠐΉ
    ViewControllerͷॳظԽ࣌ʹ
    // TipsListViewController
    - (id)init
    {
    // ...
    self.viewModel = [[TipsListViewModel alloc] init];
    return self;
    }
    

    View Slide

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];
    }
    }
    

    View Slide

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");
    });
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. ࢀߟࢿྉ
    ࢀߟࢿྉ
    Code Reuse with MVVM
    Model-View-ViewModel for iOS | Teehan+Lax
    ReactiveCocoa/Documentation/FrameworkOverview.md
    at master · ReactiveCocoa/ReactiveCocoa
    GUI Architectures
    

    View Slide

28. Functional Reactive Program‐
    Functional Reactive Program‐
    ming on iOS
    ming on iOS
    https://leanpub.com/iosfrp
    

    View Slide

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

    View Slide

30. Thank You
    Thank You
    

    View Slide