Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Does react-redux-firebase spark joy?

Does react-redux-firebase spark joy?

Nokogiri

March 23, 2019
Tweet

More Decks by Nokogiri

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 00. react-redux-firebaseͱ͸

    View full-size slide

  6. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 02. ޷͖ͳͱ͜Ζ

    View full-size slide

  12. 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ͷΑ͏ʹѻ͑Δ

    View full-size slide

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

    View full-size slide

  14. 03. ٧·ͬͨͱ͜Ζ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide