Angular2とMVVM - Speaker Deck

Angular2とMVVM

by laco

Slide 1

Slide 1 text

Angular 2 ͱMVVM ng-sake #2 @laco0416

Slide 2

Slide 2 text

MVVMͱ͸ʁ

Slide 3

Slide 3 text

MVVMͱ͍͏ߟ͑ํ • GUIΞϓϦͷΞʔΩςΫνϟͷ1ͭ • ݯྲྀ͸XAML • WPF/Silverlight/WindowsετΞΞϓϦ

Slide 4

Slide 4 text

XAML • Extensible Application Markup Language • ΞϓϦέʔγϣϯΛϚʔΫΞοϓ͢Δݴޠ • .Netݴޠʹม׵Մೳ • ਌࿨ੑ • ڧྗͳσʔλόΠϯσΟϯάػߏ

Slide 5

Slide 5 text

7JFX 7JFX.PEFM .PEFM Data-Binding Α͋͘ΔMVVMͷਤ Call Event Presentation Business

Slide 6

Slide 6 text

Model/View/ViewModel • ViewModelͱModelͷڥքΛͲ͜ʹஔ͘ʁ • Model͕ᐆດͩͱViewModel΋ᐆດʹͳΔ • ͍͍ͩͨڮ౉͢͠Δ͚ͩͳΒMVCͩͬͯͦ͏ͩ͠MVP ͩͬͯͦ͏͡ΌΜ • ViewModelͷ੹೚Λ͸͖ͬΓͤ͞ͳ͍ͱ  MVVM͸࡞Εͳ͍

Slide 7

Slide 7 text

ViewModel ͷ੹೚ • View͸ϓϥοτϑΥʔϜʹґଘ͢Δ • Model͸ϓϥοτϑΥʔϜʹґଘ͠ͳ͍ • ModelΛ֤ϓϥοτϑΥʔϜͰදࣔ͢ΔͨΊͷ Ξμϓλʔ = ViewModel

Slide 8

Slide 8 text

Angular 2 Component

Slide 9

Slide 9 text

7JFX 7JFX.PEFM .PEFM Data-Binding MVVMͷਤ(࠶) Call Event Presentation Business

Slide 10

Slide 10 text

5FNQMBUF $PNQPOFOU 4FSWJDF Data-Binding Angular 2ʹஔ͖׵͑Δ Call Event Presentation Business

Slide 11

Slide 11 text

ຊ౰ʹʁ

Slide 12

Slide 12 text

5FNQMBUF $PNQPOFOU Data-Binding Angular 2ͬͯ͜͏͡ΌΜ Event Presentation Business

Slide 13

Slide 13 text

%0. 5FNQMBUF $PNQPOFOU ΋ͬͱ͍͑͹ Presentation Business Data-Binding Rendering Event ϓϥοτϑΥʔϜґଘ

Slide 14

Slide 14 text

Component͸VMͰ͸ͳ͍ • Model+Controller͕Ұ൪͍ۙ • ΞϓϦέʔγϣϯͱ͍͏Ϟσϧͷϊʔυ • ComponentΛDOMʹ౤Ө͢ΔTemplate͕Ұ൪VMʹ͍ۙ

Slide 15

Slide 15 text

MVVM͸MVW for XAML • XAMLͰ͸View͸σʔλόΠϯσΟϯά͋Γ͖ • View͕σʔλΛࢀর͢Δઌ͕ඞཁ • ViewʹϩοΫΠϯ͞ΕͨσʔλϞσϧ͕ඞཁ • ͔ͩΒViewModel͕ඞཁͩͬͨ • ͦ΋ͦ΋HTML/JSͷؔ܎ͱҧ͏

Slide 16

Slide 16 text

݁࿦ • MVVM͸AngularͰ໨ࢦ͢΋ͷ͡Όͳ͍ • Component͸Model+Controllerͱߟ͑Δ • View΁σʔλΛఏڙ͢Δ • View͔ΒΠϕϯτΛड͚औΔ • Componentಉ࢜͸਌ࢠؔ܎ΛऔΔ(ґଘؔ܎͕͋Δ) • ϓϥοτϑΥʔϜΛҙࣝ͠ͳ͍

Slide 17

Slide 17 text

ࢀߟ • GUIΞʔΩςΫνϟύλʔϯͷجૅ͔ΒMVVM ύλʔϯ΁ • MVVMͷModelʹ·ͭΘΔޡղ