Tweet
Tweet

Slide 1

Slide 1 text

Does react-redux-firebase spark joy ? 2019/03/24 @Firebase Meetup in Osaka #2

Slide 2

Slide 2 text

Does react-redux-firebase spark joy? ૣ଎Ͱ͕͢ɺ react-redux-firebase ஌ͬͯΔਓʁ ΞΠεϒϨΠΫ

Slide 3

Slide 3 text

Does react-redux-firebase spark joy? ຊ೔࿩͢͜ͱ React-ReduxΞϓϦΛFirebaseͰ࡞ΔͳΒ͜ͷ ϥΠϒϥϦ͕ΊͪΌͪ͘ΌSpark Joy ͩΑ ͱ͍͏͓࿩Λ͠·͢ɻ

Slide 4

Slide 4 text

Does react-redux-firebase spark joy? ໨࣍ 00.react-redux-firebaseͱ͸ 02.࡞ͬͨαʔϏεʹ͍ͭͯ 02. ޷͖ͳͱ͜Ζ 03. ٧·ͬͨͱ͜Ζ 04. ݁࿦

Slide 5

Slide 5 text

00. react-redux-firebaseͱ͸

Slide 6

Slide 6 text

Does react-redux-firebase spark joy? 00. react-redux-firebaseͱ͸ - React-ReduxΞϓϦ͔ΒFirebaseΛར༻͢Δͱ͖ʹ࢖͑Δศརπʔϧ - ReactͷHOCͱͯ͠ར༻Ͱ͖Δ - Document͕ॆ࣮͍ͯ͠Δʢhttp://react-redux-firebase.com/ʣ - FirestoreΛ࢖͏ʹ͸ผ్Λ redux-firestore ར༻͢Δ https://github.com/prescottprue/react-redux-firebase

Slide 7

Slide 7 text

01. ࡞ͬͨαʔϏεʹ͍ͭͯ

Slide 8

Slide 8 text

Does react-redux-firebase spark joy? 01. ࡞ͬͨαʔϏεʹ͍ͭͯ - ొஃऀ͕ษڧձͰϑΟʔυόοΫΛಘΒΕʹ͍͘ - ͕࣌ؒͳ͔ͬͨΓɺஏ͔ͣͯ͘͠खΛ্͛ͮΒ͍ - ొஃऀ΁ͷ࣭໰΍ײ૝Λಗ໊ & ه໊Ͱ౤ߘͰ͖Δ - άϧʔϓνϟοτϥΠΫͳαʔϏε PutYourHandsUp ~Where feedback to the speakers gather. pyhu.nkgr.app

Slide 9

Slide 9 text

Does react-redux-firebase spark joy? 01. ࡞ͬͨαʔϏεʹ͍ͭͯ - ొஃऀ͕ษڧձͰϑΟʔυόοΫΛಘΒΕʹ͍͘ - ͕࣌ؒͳ͔ͬͨΓɺஏ͔ͣͯ͘͠खΛ্͛ͮΒ͍ - ొஃऀ΁ͷ࣭໰΍ײ૝Λಗ໊ & ه໊Ͱ౤ߘͰ͖Δ - άϧʔϓνϟοτϥΠΫͳαʔϏε PutYourHandsUp ~Where feedback to the speakers gather.

Slide 10

Slide 10 text

Does react-redux-firebase spark joy? 01. ࡞ͬͨαʔϏεʹ͍ͭͯ ΞʔΩςΫνϟͱ໾ׂ FrontEnd BackEndService React - ೝূ / DB / Hosting - ΞΫηεղੳ͸GoogleAnalitics 'JSFTUPSF Written in react-redux- firebase

Slide 11

Slide 11 text

02. ޷͖ͳͱ͜Ζ

Slide 12

Slide 12 text

Does react-redux-firebase spark joy? 02. ޷͖ͳͱ͜Ζ - withFirestoreΛHOCͰrecompose͢Δ͜ͱͰ Firestore͕ఏڙ͢Δؔ਺͕ར༻Ͱ͖ΔΑ͏ʹͳ Δ - Get / SetListener Λར༻͢Δ͜ͱͰ redux Storeʹ state.firestore.ordered.xxxͰΞΫη ε͢Δ͜ͱ͕Ͱ͖Δ - Ӭଓσʔλ͸Firestoreʹɻredux Store͸Ξϓ Ϧέʔγϣϯͷঢ়ଶ؅ཧʹప͢Δ͜ͱ͕Ͱ͖ Δɻ - setListenerΛ࢖͏͜ͱͰUpdate΍SetΛ࢖͏ ͱαʔόʔ͔Βfetch͠ͳͯ͘΋ϦΞϧλΠϜʹ state͕มߋ͞Είϯϙʔωϯτ͕࠶ඳը͞ΕΔ FirestoreΛReduxͷStoreͷΑ͏ʹѻ͑Δ

Slide 13

Slide 13 text

Does react-redux-firebase spark joy? 02. ޷͖ͳͱ͜Ζ - ͜Ε͚ͩͰTwitter΁ͷϩάΠϯϙοϓΞοϓͷ ग़ྗ -> ໭ΓͰϩάΠϯࡁΈϢʔβʔ৘ใͷऔ ಘ·ͰͰ͖Δʂ AuthपΓఏڙFunction ͕࢖͍΍͍͢ - ϩάΠϯεςʔλεΛνΣοΫͰ͖Δ isLoaded, isEmpty ͕௚ײత

Slide 14

Slide 14 text

03. ٧·ͬͨͱ͜Ζ

Slide 15

Slide 15 text

Does react-redux-firebase spark joy? 03. ٧·ͬͨͱ͜Ζ - ϥΠϒϥϦͷ໰୊Ͱ͸ͳ͘TypeScriptͷ໰୊͕ͩɺܕ͕ͳ ͍ͷͰࣗલͰఆ͕ٛඞཁɻ - PR౤͛Α͏͔ͱࢥ͕ͬͨɺαʔόʔ͔Βະऔಘ࣌ͳͲอ࣋ ͢Δσʔλ͕ҧ͏Έ͍ͨͳͷͰҰ୴ଘஔͯ͠͠·ͬͨ… react-redux-firebase , redux-firestore ͷ ܕఆ͕ٛͳ͍…

Slide 16

Slide 16 text

Does react-redux-firebase spark joy? 03. ٧·ͬͨͱ͜Ζ - ௨৴ͷ࢓૊Έ΍AuthͳͲΊͪΌͪ͘Όศརͳ൓໘ɺଞͷα ʔϏεʹ͸ͳ͍ͷͰɺҠΕͳ͍… - Firebase,Firestoreʹͳ͍ػೳ͸࢖͑ͳ͍ (GraphQLͱ͔WebαʔϏεͷϩάͱ͔) ΞϓϦέʔγϣϯ͕FirebaseʹϩοΫΠϯ͞ΕΔ

Slide 17

Slide 17 text

04ɽ݁࿦

Slide 18

Slide 18 text

Does react-redux-firebase spark joy? • ϑϩϯτΤϯυϗετ؀ڥͱͯ͠Firebase͸࠷ߴ • ϑϧϚωʔδυͳNoSQL DBͱͯ͠࢖͍΍͍͢ʂ • RealTimeͳ௨৴͕WebSocketͷ஌ݟ͕ͳͯ͘΋࣮ݱͰ͖ΔFirestore࠷ߴ • ࠓͷͱ͜ΖϨΠςϯγ΋ૣ͍ͱײ͡Δ͠ɺදࣔ଎౓͸໰୊ͳ͍ 04ɽ݁࿦ Firebase Firestore spark joy react-redux-firebase spark joy • Firebase࢖͏ͳΒͥͻ࢖͏΂͖ʂ