Tweet
Tweet

Slide 1

Slide 1 text

RxJS֓ཁͱ ϦΞΫςΟϒ ΞʔΩςΫνϟ ng-japan 2016 OpenWeb Technology Daisuke. Takaoka With

Slide 2

Slide 2 text

About me ߴԬେհ ελʔτΞοϓCTOɺٕज़ސ໰ɺٕज़૬ஊͳͲ ϑϩϯτ͔ΒΠϯϑϥ·Ͱ ࠷ۙόοΫΤϯυͰRxJS࢖ͬͯ·͢
 Angular2࢖ͬͯ਺೔ͳͷͰ
 ؒҧͬͯͯ΋͝צห͍ͩ͘͞ŋŋŋ @dsuket

Slide 3

Slide 3 text

TechFeed IUUQTUFDIGFFEJP *5ςΫϊϩδʔઐ໳ͷΩϡϨʔγϣϯαʔϏε

Slide 4

Slide 4 text

What’s TechFeed ? ڵຯͷ͋ΔτϐοΫΛબ୒͢Δͱɺຖ೔ͦͷτϐοΫ ʹؔ࿈͢ΔχϡʔεΛϋΠϥΠτͰ͓ಧ͚͠·͢ɻ

Slide 5

Slide 5 text

΋ͪΖΜɺ ʮϦΞΫςΟϒϓϩάϥϛϯάʯ τϐοΫ΋͋Γ·͢ʂ https://techfeed.io/channels/Reactive%20Programming

Slide 6

Slide 6 text

techfeed.io Register now!!

Slide 7

Slide 7 text

RxJS֓ཁ

Slide 8

Slide 8 text

What RxJS? Reactive Extensions for JavaScript • .NETͷϥΠϒϥϦͱͯ͠஀ੜ • ࣌ؒ࣠ͷ͋ΔඇಉظετϦʔϜ • ؔ਺ܕϦΞΫςΟϒϓϩάϥϛϯάʢFRPʣ • Angular2Ͱ΋࠾༻ʂ

Slide 9

Slide 9 text

Functional Reactive programming The introduction to Reactive Programming you've been missing ݴ͍͍ͨ͜ͱ͸શ෦͜͜ʹ͋Δ ʲ຋༁ʳ͋ͳ͕ͨٻΊ͍ͯͨϦΞΫςΟϒϓϩάϥϛϯάೖ໳

Slide 10

Slide 10 text

ؔ਺ܕϦΞΫςΟϒϓϩάϥϛϯά (FRP) ͱ͸? ʮStackoverflowͷ໛ൣతղ౴ʯ Conal Elliott • ࣌ؒΛ͔͚ͯμΠφϛοΫʹมԽ͢Δ஋͸ɺϑΝʔετΫϥεͷ ஋Ͱ͢ɻͦΕΒΛؔ਺ͷ in/out ʹͯ͠૊Έ߹ΘͤΔ͜ͱ͕Ͱ͖· ͢ɻ͜ΕΛ Behavior ͱݺͼ·͢ɻ • Behavior ͸ɺ੩తͳಈ࡞΍࣌ܭͷΑ͏ͳ࣌ؒͱ͍͍͔ͬͨͭ͘ͷ ϓϦϛςΟϒͳ΋ͷ͔Βߏஙͨ͠ޙɺॱ൪·ͨ͸ฒྻʹ઀ଓʹ͠ ·͢ɻnݸͷ Behavior ͸ɺ࿈ଓͨ࣌ؒ͠ͷΑ͏ͳ཭ࢄతͳ nݸͷ ؔ਺ʹΑͬͯ߹੒͞Ε·͢ɻ • ͦͷ ཭ࢄతݱ৅Λදͨ͢Ίʹ ༗ݶ·ͨ͸ແݶʹग़ݱ͢Δετ ϦʔϜΛ࣋ͭ Event ͕͋Γ·͢ɻEvent ͸࣌ؒͱ஋ͷϖΞͰ͢ɻ ݩMSͷResearcherͰFRPͷ࢝૆ͱݴΘΕΔConal Elliottͷղઆɻ
 Α͘ࢀর͞ΕΔ͕ɺ৽ਓ޲͖Ͱ͸ͳ͍

Slide 11

Slide 11 text

ؔ਺ܕϦΞΫςΟϒϓϩάϥϛϯά (FRP) ͱ͸? ʮReactive Manifestoʯ
 ϦΞΫςΟϒγεςϜͱ͸:
 ଈԠੑɺ଱ো֐ੑɺ஄ྗੑɺϝοηʔδۦಈΛඋ͑Δ ϓϩδΣΫτϚωʔδϟ΍ϏδωεܥͷਓؒʹݟͤΔ΋ͷͷΑ͏ͩɻ

Slide 12

Slide 12 text

ؔ਺ܕϦΞΫςΟϒϓϩάϥϛϯά (FRP) ͱ͸? "Rx = Observables + LINQ + Schedulers” ɾObservables: σʔλετϦʔϜ
 ɾLINQ(Language-Integrated Query): ΫΤϦ
 ɾSchedulers: ฏߦੑ੍ޚ ͱͯ΋ॏͨ͘ɺզʑΛࠞཚͤ͞ΔϚΠΫϩιϑτతͳ΋ͷͩɻ

Slide 13

Slide 13 text

ؔ਺ܕϦΞΫςΟϒϓϩάϥϛϯά (FRP) ͱ͸? ඇಉظσʔλετϦʔϜΛ༻͍Δϓϩάϥϛϯά • ετϦʔϜͱ͸࣌ؒॱʹฒΜͩਐߦதͷΠϕϯτͷྻ • ετϦʔϜͷΠϕϯτΛඇಉظʹॲཧ • ετϦʔϜΛ߹੒ɺ࡞੒ɺϑΟϧλ͢Δศརͳؔ਺܈ • ܰྔͰԿͰ΋ετϦʔϜʹͰ͖Δ

Slide 14

Slide 14 text

ϘλϯΫϦοΫͷΠϕϯτετϦʔϜ ΫϦοΫΠϕϯτ ετϦʔϜͷ׬ྃ Τϥʔ ࣌ؒॱʹฒΜͩΠϕϯτྻΛඇಉظʹॲཧ͢Δ ετϦʔϜ ʹ Observable (*1) *1 ʢࢲ͸͜ΕΛഅ໊ࣛ͛ͨલͩͱײ͡ΔͷͰɺετϦʔϜͱݺͿɻ@andrestaltzʣ

Slide 15

Slide 15 text

μϒϧ ΫϦοΫ ͷྫ

Slide 16

Slide 16 text

Push vs Pull Observable͸ϒϩοΫͤͣʹෳ਺ͷ஋Λ
 ϦΞΫςΟϒʹॲཧͰ͖ΔɻPromise++ What are the Reactive Extensions for JavaScript (RxJS)? ୯Ұͷ໭Γ஋ ෳ਺ͷ໭Γ஋ 1VMMಉظతର࿩ܕ 0CKFDU "SSBZ 4FU .BQ 0CKFDU 1VTIඇಉظ3FBDUJWF 1SPNJTF 0CTFSWBCMF

Slide 17

Slide 17 text

Passive vs Reactive Bar͸Foo͔Βૢ࡞͞Εɺ
 ঢ়ଶ͕֎෦ʹґଘ͢Δɻ Bar͸FooͷΠϕϯτΛड͚
 ࣗ਎Ͱঢ়ଶΛ؅ཧ͢Δɻ ReactiveϓϩάϥϛϯάͰ͸ࣗ਎ʹ੹೚Λ΋ͭϞδϡʔϧΛͭ͘Γɺ֎෦ ͷঢ়ଶΛมߋ͢Δ͜ͱΑΓ΋Ϟδϡʔϧࣗ਎ͷػೳʹয఺Λ߹ΘͤΔɻ
 ؔ৺ͷ෼཭ʹܨ͕Δ Observables › Cycle.js How Reactive Programming can help reduce code spaghetti Passive/Reactive ϓϩάϥϛϯάͷҧ͍ΛֶͿ

Slide 18

Slide 18 text

ͳͥReactiveProgramming͕ඞཁ͔ʁ ”” ݱ୅ͷΞϓϦ͸ɺߴ౓ʹΠϯλϥΫςΟϒͳମݧϢʔβʔʹ༩͑ ΔͨΊʹɺଟ਺ͷϦΞϧλΠϜΠϕϯτΛѻ͍ͬͯΔɻզʑ͸͜ ΕΛద੾ʹऔΓѻ͏πʔϧΛ୳͓ͯ͠ΓɺϦΞΫςΟϒϓϩάϥ ϛϯά͕ͦͷ౴͑ͳͷͩɻ @andrestaltz

Slide 19

Slide 19 text

ͳͥReactiveProgramming͕ඞཁ͔ʁ ”” Ϣʔβʔ͸ϦΞϧλΠϜΛظ଴͍ͯ͠Δɻੈք͸pushʹҠಈ͠ ͨɻϢʔβʔ͸զʑ։ൃऀ͕௥͍ͭ͘ͷΛ଴͍ͬͯΔɻ Intro to Rx - Why Rx?

Slide 20

Slide 20 text

Rx ʹ޲͍͍ͯΔ΋ͷɺ͍ͳ͍΋ͷ RxΛ࢖͏΂͖΋ͷ • Ϛ΢ε΍ϘλϯΫϦοΫͷΑ͏ͳUIΠϕϯτɺΞϓϦέʔγϣϯͷΠϕϯτɺΠϯϑ ϥ΍γεςϜͷΠϕϯτɺωοτϫʔΫΠϕϯτɺCEPͳͲͷඇಉظΠϕϯτॲཧશൠ Rx͕࢖͑Δ΋ͷ • λεΫ΍ɺඇಉظγεςϜίʔϧͳͲ୯Ұͷඇಉظॲཧ ޲͔ͳ͍΋ͷ • طଘͷಉظॲཧΛஔ͖׵͑Δ͚ͩͷ΋ͷ • ϝοηʔδΩϡʔͳͲɺγʔέϯγϟϧͳτϥϯβΫγϣϯ͕ඞཁͳ΋ͷ intro to Rx - When is Rx appropriate?

Slide 21

Slide 21 text

ECMAScript Observable • Observable ͕ ES7ʹఏҊ͞Ε͍ͯͯೖΓͦ͏
 https://github.com/zenparsing/es-observable ೦ͷͨΊɺAngular1Ϣʔβʔʹ͸ࢥ͍ೖΕਂ͍ Object.observe ͱ͸ผ෺w
 ࠓ౓͸ͪΌΜͱೖΓͦ͏ʁ • RxJS(v5)͸ ES7 Observable ४ڌ

Slide 22

Slide 22 text

Rxͷ஥ؒୡ Languages • RxJava, RxJS, Rx.NET, RxScala, RxGroovy, RxJRuby, • UniRx, RxCpp, RxClojure, Rx.rb RxPY, RxKotlin, RxSwift Platforms and frameworks • RxNetty, RxAndroid, RxCocoa http://reactivex.io/languages.html

Slide 23

Slide 23 text

Other FRP libraries • Bacon.js • RxJSͷޙൃ FRPϥΠϒϥϦɻRxJSΑΓ΋Ұ؏ੑ͋Γɺ ࢖͍΍͍͕͢ύϑΥʔϚϯεʹগ͠೉͋Γʁ • Kefir • Bacon.jsͷ͞ΒʹޙൃɻলαΠζɺলϝϞϦɻ ͲͪΒ΋ES7 Observableͱ͸ҟͳΓͦ͏ͳͨΊɺࠓޙ͕ඍົ

Slide 24

Slide 24 text

RxJSجૅ

Slide 25

Slide 25 text

RxJSͷ஫ҙ • ݱࡏ RxJS ͸ 4ܥͱ5ܥ͕͋ΓɺϦϙδτϦ͕ҧ͏ • 4ܥ: Reactive-Extensions/RxJS • 5ܥ: ReactiveX/RxJS ʢ·ͩbeta2ɻAngular2Ͱ࠾༻ʣ • v5ͰAPI͕౷ഇ߹͞Εͯ݁ߏมΘͬͯΔʂ • ᷿ͷυΩϡϝϯτ͸΄ͱΜͲ͕4ܥɻ֓೦͸େ͖͘͸มΘͬͯͳ͍͕ɻɻ • Migrating from RxJS 4 to 5 ඞಡ • ·ͩυΩϡϝϯτ͞Εͳ͍෺΋ଟ͍ͷͰιʔεಡΉඞཁ΋ • ຊࢿྉ͸ v5 ରԠͰઆ໌͠·͢

Slide 26

Slide 26 text

RxJSͷجຊ RxJS = Observables + Operators + Schedulers • Observable: σʔλετϦʔϜ
 Rx.Observable.of / from / create ͳͲͰࣗ༝ʹ࡞ΕΔɻ • Operators: ΫΤϦ
 mapͱ͔filterͱ͔ɺObservableΛૢ࡞͢Δؔ਺ • Schedulers: ฒߦੑͷίϯτϩʔϧ

Slide 27

Slide 27 text

جຊతͳॲཧ • ݩͷsource͔ΒObservableΛ࡞੒͠ɺΦϖϨʔλͰૢ ࡞͠ɺͦͷ݁ՌΛड͚ͯॲཧ͢Δɻ • ετϦʔϜ͔ΒσʔλΛड͚औΔ͜ͱΛSubscribeͱ͍ ͏ɻ • v5 Ͱ ES7 ObservableͷΠϯλʔϑΣΠεʹ߹Θͤͨ • ʢجຊతʹ͸ʣSubscribe͢Δͱσʔλ͕ྲྀΕ࢝ΊΔɻ

Slide 28

Slide 28 text

؆୯ͳαϯϓϧ const stream = Rx.Observable.range(0,5) // 0,1,2,3,4 .map(x => x * 3) // => 0,3,6,9,12 .filter(x => x%2); // => 3,9 stream.subscribe({ next: x => console.log(‘Next:' + x), error: err => console.error('Error:', err), complete: () => console.log('Completed'), }); => "Next:3" => "Next:9" => "Completed"

Slide 29

Slide 29 text

API֓ཁ • ͱʹ͔͘ΦϖϨʔλͷ਺͕ଟ͍ɻ • v4ܥͰ144ݸɺv5.0.0.beta.2Ͱ΋98ݸ • ੜ੒ɺม׵ɺϑΟϧλϦϯάɺ݁߹ͳͲ • Ҏ߱Α͘࢖͏෺ϐοΫΞοϓ

Slide 30

Slide 30 text

ࢀߟ: reactivex.io • RxͷΦϖϨʔλΛݴޠຖʹղઆ • ਤ͕೉ղɻ׳ΕΕ͹ಡΊΔ

Slide 31

Slide 31 text

ࢀߟ: RxMarbles • ΦϖϨʔλΛΠϯλϥΫςΟϒʹਤղ

Slide 32

Slide 32 text

ࢀߟ: ͦͷଞΑ͘ಡΉࢿྉ • RxJS/observable.md at master · Reactive-Extensions/RxJS • v4ͷAPIυΩϡϝϯτ • RxJS/MIGRATION.md at master · ReactiveX/RxJS • v4͔Β5΁ͷϚΠάϨʔγϣϯΨΠυ • RxJS/src/operator at master · ReactiveX/RxJS • v5 ͷΦϖϨʔλҰཡʢsrcʣ • RxJS Advent Calendar 2015 • @bouzuya ͞Μͷᕒ਎ͷಠΓΞυΧϨ

Slide 33

Slide 33 text

ੜ੒ • Rx.Observable.of • ୯Ұͷ஋ΛͱΓɺͦΕΛฦ͢ετϦʔϜΛੜ੒ • just/return ͸ofʹٵऩ͞Εͨ • Rx.Observable.from • ഑ྻɺPromiseɺObservableͳͲΛऔΓɺͦΕΒෳ਺ͷ஋ͷετ ϦʔϜΛੜ੒ • Rx.Observable.range / repeat • ࢦఆൣғɺ·ͨ͸஋ͷ࿈ଓͨ͠ετϦʔϜΛੜ੒ • Rx.Observable.interval / timer • ҰఆִؒͰ܁Γฦ͢ • Rx.Observable.create • subscriberΛҾ਺ʹ೚ҙͷ஋Λྲྀ͢ετϦʔϜΛੜ੒

Slide 34

Slide 34 text

ม׵ • map (select) • ஋Λม׵͢Δ • select ͸ v5 Ͱഇࢭɻ஋ΛऔΔ৔߹͸ɺmapTo ʹɻ • mergeMap (flatMap) • map ݁Ռ͕Observable΍഑ྻͷ৔߹Α͘࢖͏ • v5 Ͱ mergeMap ʹɻObservableΛऔΔ৔߹͸ɺmergeMapTo ʹɻ • scan • reduceͬΆ͍͕ɺ౎౓஋Λྲྀ͢ • groupBy • άϧʔϓ෼͚ʢ෼ׂʣ͢Δ • buffer / bufferCount / bufferTime • ਺΍࣌ؒͰΠϕϯτ·ͱΊΔ

Slide 35

Slide 35 text

ϑΟϧλϦϯά • filter (where) • ஋ͳͲͰϑΟϧλϦϯά͢Δ • where ͸ v5 Ͱഇࢭɻ • first / last • ࠷ॳ΍࠷ޙͷ஋͚ͩΛऔΔ • skip / skipLast • ࢦఆͷnݸΛඈ͹͢ɻskipLast ͸ v5Ͱഇࢭ • take / takeLast • ࢦఆͷnݸΛऔಘ͢ΔɻtakeLast͸࠷ޙͷnݸɻ • distinct • ϢχʔΫʹͯ͠औಘ͢Δɻ • sample / debounce • ࢦఆִؒຖͷ࠷ޙͷ஋Λऔಘ͢Δɻ

Slide 36

Slide 36 text

݁߹ • startWith • ॳظ஋Λ࠷ॳʹૠೖ • merge • ετϦʔϜΛ݁߹͢Δɻෳ਺Ͱ΋OK • switch • ετϦʔϜΛॱʹྲྀ͢ • combineLatest • ෳ਺ͷετϦʔϜͷ࠷ޙͷ஋Λ݁߹͢Δɻ • Ͳ͔͜1ͭͰ΋དྷΕ͹ɺଞͷετϦʔϜͷ௚ۙͷ஋ͱ݁߹͢Δ • zip • ෳ਺ͷετϦʔϜͷ࠷ޙͷ஋Λ݁߹͢Δɻ • શ෦ἧ͔ͬͯΒग़ྗ͞ΕΔɻ • and / then / when • v5Ͱഇࢭʁ

Slide 37

Slide 37 text

࣮ફRxJS

Slide 38

Slide 38 text

ζϯυίΩϤγ

Slide 39

Slide 39 text

·ͩ·ͩଓ͘ŋŋŋ

Slide 40

Slide 40 text

࡞ͬͯΈͨ https://jsbin.com/kecove/edit?js,console

Slide 41

Slide 41 text

ղઆ1: randomStream const randomStream = Rx.Observable .create(observer => { observer.next(!Math.floor(Math.random()*2)); observer.complete(); }); Everything is a stream Observable.create ͰɺϥϯμϜʹtrue/falseΛฦ͢ ετϦʔϜΛ࡞੒

Slide 42

Slide 42 text

ղઆ2: zundokoStream const zun = Rx.Observable.of('ズン'); const doko = Rx.Observable.of('ドコ'); return randomStream .flatMap(val => (val ? zun : doko)); “ζϯ” ͱ ”υί” Λฦ͢ετϦʔϜΛ࡞੒͠ɺ randomStreamͷ஋ʹΑͬͯ੾Γସ͑Δɻ

Slide 43

Slide 43 text

ղઆ3: intervalStream return Rx.Observable.interval(400) .mergeMapTo(zundoko) .do(val => console.log(val)) .bufferCount(5, 1) .takeWhile(val => val.join('') !== 'ズンズンズンズンドコ'); Observable.interval Ͱ 400msຖʹ܁Γฦ͢ετϦʔϜΛ࡞੒͠
 ͦΕΛmargeMapToͰzundokoStreamʹஔ͖׵͑Δɻ
 doͰ్த݁ՌΛग़ྗͭͭ͠ɺbufferCount ͰskipΛ1Ͱ5ݸηο τɻtakeWhile Ͱ໨తͷจࣈྻʹͳΔ·Ͱ܁Γฦ͢ɻ

Slide 44

Slide 44 text

ղઆ4: subscribe const source = createStream(); source.subscribe({ next: () => {}, error: err => console.log('Error: ', err), complete: () => console.log('キ・ヨ・シ！'), }); ࡞੒ͨ͠StreamΛsubscribeͯ͠ɺ׬ྃ࣌ʹจࣈ ྻΛग़ྗ͢Δɻ

Slide 45

Slide 45 text

༨ஊ ಉ͜͡ͱ͕͜Ε1ߦ(87byte)ͰࡁΈ·͢ʢྦ
 ʢ͖ͬ͞ͷ͸764byteʣ for(n=3;n-64;console.log(n-64?(n|=2*Math.random())&1?' ドコ':'ズン':'キ・ヨ・シ!'))n<<=6 jsͰζϯυίΩϤγͷίʔυΰϧϑ

Slide 46

Slide 46 text

RxJS·ͱΊ • ࠓ͔ΒReactive Programming΍ΔͳΒRxJS 5ʂ • ΦϖϨʔλ͕ࢁ΄Ͳ͋ͬͯ࢖͍͜ͳ͢ͷ͸೉ ͍͠ɻ • ·ͣ͸೉͍͜͠ͱߟ͑ͣʹɺجຊతͳΦϖϨʔ λͰ࡞ͬͯΈΔɻ ʢͦ͏͠ͳ͍ͱ͍ͭ·Ͱ΋׬੒͠ͳ͍ɾɾɾʣ

Slide 47

Slide 47 text

Reactive Architecture RxJS + 2

Slide 48

Slide 48 text

RxJS in Angular2 • Angular2Ͱ͸Ұ෦ͰRxJSΛ࠾༻ • HTTP • EventEmitter • ίϯϙʔωϯτΠϕϯτ΍HTTPϦΫΤετΛ Observableͱͯ͠ѻ͑Δʂ • ViewͰ΋ObservableΛදࣔՄೳ

Slide 49

Slide 49 text

Angular2 Architecture Angular2͸Componentࢦ޲
 RxJS࢖ͬͯσʔλϑϩʔΛߟ͑ΒΕͳ͍͔

Slide 50

Slide 50 text

Reactive Architecture UNIDIRECTIONAL USER INTERFACE ARCHITECTURES ϢʔβʔΠϕϯτΛ୯Ұํ޲ͷσʔλϑϩʔͱ ͯ͠ѻ͏ΞʔΩςΫνϟͷҰཡΛ঺հ FluxɺReduxɺBESTɺModel-View-Updateɺ Model-View-IntentɺNested Dialogues

Slide 51

Slide 51 text

Flux • Store, View, Action, Dispatcher ͔Β੒Δ • View͸ReactComponentͷೖΕࢠʹͳΔ • ViewͰϨϯμϦϯάͱΠϕϯτϋϯυϦϯάΛߦ͏

Slide 52

Slide 52 text

Redux • Singleton Store, Provider, Actions, Reducers • View Provider͸ReactҎ֎ʹ΋AngularɺEmberͳͲͰ΋Մ • View͔ΒAction͕ݺ͹ΕɺActionຖʹReducerͰstateΛߋ৽͢Δ

Slide 53

Slide 53 text

Model-View-Update • “The Elm Architecture” ͱͯ͠஌ΒΕΔɻRedux͸͜Εʹinspire͞Εͨɻ • Model, View, Action, UpdateΛComponentͱͯ͠֊૚ߏ଄ԽͰ͖Δɻ

Slide 54

Slide 54 text

Model-View-Intent • Cycle.js Ͱ࠾༻͞Ε ObservableΠϕϯτετϦʔϜΛσʔλϑϩʔͱ͢Δ • UserΠϕϯτϋϯυϥ͸IntentͰએݴ͞ΕɺϨϯμϦϯάͱ͸෼཭ • MVI͸ComponentʹͳΓɺ֊૚తʹ࢖͑Δ

Slide 55

Slide 55 text

Angular2ͰͷReactive Architectureͷݕ౼ • Angular2ͷComponent͸ར༻͍ͨ͠ɻ֊૚Խͱؚ͔Ίɻ • MVIͷObservableத৺ͷߟ͑͸Αͦ͞͏ɻ • ComponentʹModelɼIntent૬౰ΛObservableͰೖΕͯΈΔɻ • ϞσϧΛObservableʹ͠ɺViewͰ΋ͦΕΛ࢖͏ • ΠϕϯτϋϯυϦϯά͸AngularͷόΠϯσΟϯά͕ศརͳͷͰͦΕ Λ࢖͏ɻ • όΠϯσΟϯάΛView͔Βग़͢͜ͱ͕ඞͣ͠΋ਖ਼ղͰ͸ͳ͍ͷͰ͸ɻʢؔ৺ͱٕज़ͷ ෼཭ʣ

Slide 56

Slide 56 text

$PNQPOFOU Angular2 MVI 6TFS .PVTF *OUFOU 0CTFSWBCMF .PEFM 
 Πϯελϯεม਺ 0CTFSWBCMF 7JFX UFNQMBUF 4DSFFO formCtrl͔ΒϢʔβʔҙਤ
 ΛΠϯςϯτͱͯ͠Observableʹ Πϯςϯτ͔Β஋ΛऔΓग़͢
 ObservableͳΠϯελϯεม਺ Observableม਺Λ
 asyncͰviewʹόΠϯυ

Slide 57

Slide 57 text

Angular2 MVI Sample ஍ຯͳαϯϓϧ࡞ͬͯΈͨɻ • https://github.com/dsuket/angular2-mvi

Slide 58

Slide 58 text

@Component({ selector: 'bmi', styles: [require('./bmi.component.scss')], template:`
Weight:
{{weight$ | async}} kg
Height:
{{height$ | async}} cm

BMI is {{bmi$ | async}}

`, directives: [FORM_DIRECTIVES], }) bmi.component.ts

Slide 59

Slide 59 text

export class BmiComponent { // Models private weight$; private height$; private bmi$; // Controls private weightCtrl = new Control(); private heightCtrl = new Control(); constructor() { // Intents const weightChanges = this.weightCtrl.valueChanges; const heightChanges = this.heightCtrl.valueChanges; // Bind intents to models this.weight$ = weightChanges.map(Number).startWith(60); this.height$ = heightChanges.map(Number).startWith(170); this.bmi$ = this.weight$.combineLatest(this.height$) .map(this.calcBmi); } calcBmi(data) { const [weight, height] = data; const heightMeters = height * 0.01; return Math.round(weight / (heightMeters * heightMeters)); } } bmi.component.ts

Slide 60

Slide 60 text

ߟ࡯ Pros • ͳ͔ͳ͔ΩϨΠʹॻ͚ͦ͏ɻ • @Input ͳͲͰObservableΛ΍ΓͱΓͯ͠ɺComponentؒ࿈ܞ΋؆୯ ʹͰ͖ͦ͏ɻ Cons • ຖճ async ॻ͘ͷ͕ͪΐͬͱ໘౗͍͘͞ɻ • ͦ΋ͦ΋͜ͷॻ͖ํ͕޾ͤͳͷ͔Ͳ͏͔Α͘෼͔Βͳ͍ɻɻ • ύϑΥʔϚϯεతʹͲ͏͔ؾʹͳΔɻ • ngFor ͕ Observable Λͦͷ··ѻ͑ͳ͍ͷ͕࢒೦

Slide 61

Slide 61 text

༨ஊ ͖ͬ͞ͷ zundoko Λ Angular2 + MVI Ͱ࡞ͬͨ • dsuket/zundoko-angular • Demo લηογϣϯͰ @shumpei ͕࡞ͬͨελʔλʔΩοτ࢖͑͹͙͢Ͱ͖ͨɻ ͚Ͳɺશ෦ObservableͰ࡞Δͷ͸πϥΠŋŋŋ
 ࣌ؒͷ౎߹Ͱ݁ہී௨ͷόΠϯσΟϯάʹͳͬͨͱ͜Ζ΋

Slide 62

Slide 62 text

ࢀߟ • Cycle.js • Reactive Data Flow in Angular 2 • How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid • Taking advantage of Observables in Angular 2 • todomvc-ng2-reactive • angular2-reactive-starter

Slide 63

Slide 63 text

·ͱΊ • Observable͸ES7Ͱ΋࠾༻͞Εͦ͏ͳͷͰɺࠓ ͔Β΍͓ͬͯ͜͏ʂ • ObservableΛத৺ͱͨ͠σʔλϑϩʔΞʔΩς Ϋνϟ͸ࠓ೥ྲྀߦΔʂʁ • TechFeedͰτϨϯυΛ௥͍͔͚Α͏ʂ