Angular2とMVVM

4/20 2016 ng-sake#2

Transcript

1. Angular 2 ͱMVVM ng-sake #2 @laco0416
2. MVVMͱ͸ʁ
3. MVVMͱ͍͏ߟ͑ํ • GUIΞϓϦͷΞʔΩςΫνϟͷ1ͭ • ݯྲྀ͸XAML • WPF/Silverlight/WindowsετΞΞϓϦ
4. XAML • Extensible Application Markup Language • ΞϓϦέʔγϣϯΛϚʔΫΞοϓ͢Δݴޠ • .Netݴޠʹม׵Մೳ • ਌࿨ੑ • ڧྗͳσʔλόΠϯσΟϯάػߏ
5. 7JFX 7JFX.PEFM .PEFM Data-Binding Α͋͘ΔMVVMͷਤ Call Event Presentation Business
6. Model/View/ViewModel • ViewModelͱModelͷڥքΛͲ͜ʹஔ͘ʁ • Model͕ᐆດͩͱViewModel΋ᐆດʹͳΔ • ͍͍ͩͨڮ౉͢͠Δ͚ͩͳΒMVCͩͬͯͦ͏ͩ͠MVP ͩͬͯͦ͏͡ΌΜ • ViewModelͷ੹೚Λ͸͖ͬΓͤ͞ͳ͍ͱ
 MVVM͸࡞Εͳ͍
7. ViewModel ͷ੹೚ • View͸ϓϥοτϑΥʔϜʹґଘ͢Δ • Model͸ϓϥοτϑΥʔϜʹґଘ͠ͳ͍ • ModelΛ֤ϓϥοτϑΥʔϜͰදࣔ͢ΔͨΊͷ Ξμϓλʔ = ViewModel
8. Angular 2 Component
9. 7JFX 7JFX.PEFM .PEFM Data-Binding MVVMͷਤ(࠶) Call Event Presentation Business
10. 5FNQMBUF $PNQPOFOU 4FSWJDF Data-Binding Angular 2ʹஔ͖׵͑Δ Call Event Presentation Business
11. ຊ౰ʹʁ
12. 5FNQMBUF $PNQPOFOU Data-Binding Angular 2ͬͯ͜͏͡ΌΜ Event Presentation Business
13. %0. 5FNQMBUF $PNQPOFOU ΋ͬͱ͍͑͹ Presentation Business Data-Binding Rendering Event ϓϥοτϑΥʔϜґଘ
14. Component͸VMͰ͸ͳ͍ • Model+Controller͕Ұ൪͍ۙ • ΞϓϦέʔγϣϯͱ͍͏Ϟσϧͷϊʔυ • ComponentΛDOMʹ౤Ө͢ΔTemplate͕Ұ൪VMʹ͍ۙ
15. MVVM͸MVW for XAML • XAMLͰ͸View͸σʔλόΠϯσΟϯά͋Γ͖ • View͕σʔλΛࢀর͢Δઌ͕ඞཁ • ViewʹϩοΫΠϯ͞ΕͨσʔλϞσϧ͕ඞཁ • ͔ͩΒViewModel͕ඞཁͩͬͨ • ͦ΋ͦ΋HTML/JSͷؔ܎ͱҧ͏
16. ݁࿦ • MVVM͸AngularͰ໨ࢦ͢΋ͷ͡Όͳ͍ • Component͸Model+Controllerͱߟ͑Δ • View΁σʔλΛఏڙ͢Δ • View͔ΒΠϕϯτΛड͚औΔ • Componentಉ࢜͸਌ࢠؔ܎ΛऔΔ(ґଘؔ܎͕͋Δ) • ϓϥοτϑΥʔϜΛҙࣝ͠ͳ͍
17. ࢀߟ • GUIΞʔΩςΫνϟύλʔϯͷجૅ͔ΒMVVM ύλʔϯ΁ • MVVMͷModelʹ·ͭΘΔޡղ