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

Firebase Realtime Databaseをサービスで使った知見

Firebase Realtime Databaseをサービスで使った知見

Firebase Realtime Databaseをサービスのメインに使った上での知見です

Transcript

  1. Firebase
    Realtime
    Database
    &
    Frontend

    View Slide

  2. Name
    @brn (ꫬꅿ⨳ⵃ)
    Occupation
    ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،
    Company
    Cyberagent ،سذؙأةآؔ AI Messenger
    OSS
    Contributor of V8
    About
    http://info.b6n.ch

    View Slide

  3. Where to use?
    AI ًحإٝآٍ٦הְֲB to Bךثٍحزنحز؟٦ؽأך
    ٔ،ٕة؎يثٍحز堣腉ח⢪欽

    View Slide

  4. Why Firebase?
    Realtime Database׾ⵃ欽ׅ׷ֿהדWebSocketך盖椚׾׃זֻג
    幥׬♳
    荈⹛דず劍ׁ׸׷DBתד䩛חⰅ׷

    View Slide

  5. Why Not FireStore?
    ׉׮׉׮GoogleָFirebase׾顠 ׅ׷⵸ח圓眠׃׋ךד
    獳遤׮ٔأؙ넝׭זךד׍׳׏ה⿑׃ְ

    View Slide

  6. How to use?
    ؿٗٝزؒٝس⩎כ㛇劤涸חFirebase JS SDK׾ⵃ欽׃גًحإ٦آ
    ך「⥋כׅץג׉ֿח⟣ׇ׏ֹ׶
    鷏⥋כ荈⵸ךAPI؟٦غח䫎־ג؟٦غ؟؎سד剅ֹ鴥׫
    㛇劤涸חؿٗٝزؒٝسדWriteכ׃זְ

    View Slide

  7. Firebase
    Browser API
    POST
    Write
    Read

    View Slide

  8. Problems_1
    Firebaseך״ֲזRealtime Messaging禸ך׮ךחכծ
    ⴱ㔐ךر٦ة《䖤הַծ倜鋉ر٦ةהַ׉ְֲֲ嚊䙀ָזְ

    View Slide

  9. Pseudo Initialization
    זךד亻⡂涸חⴱ㔐ر٦ةה倜鋉ر٦ة׾ⴓ겲׃׋
    AI ًحإٝآٍ٦כ㛇劤涸חثٍحزꟚ㨣儗חכ䗳׆1ًحإ٦آ
    כRealtime Database♳ח֮׷⵸䲿זךדծ
    剑ⴱךchild_add؎كٝزָ饥׏גַ׵1000msך꟦ח「⥋׃׋ر٦
    ةכׅץג،٦ؕ؎ـر٦ةה׃ג《׶䪔׏גְ׷

    View Slide

  10. let firstTimeBatchBeganTime = Infinity;!
    let watchStartTime = 0;!
    const TIMEOUT_MS = 1000;!
    const updateInitialMessageFlag = () => {!
    // If first message from firebase is not sent,!
    // we will wait again.!
    if (watchStartTime <= firstTimeBatchBeganTime) {!
    watchStartTime = Date.now();!
    setTimeout(updateInitialMessageFlag, TIMEOUT_MS);!
    }!
    TalkStore.isInitialMessage = false;!
    };!
    setTimeout(updateInitialMessageFlag, TIMEOUT_MS);!

    View Slide

  11. messages.on('child_added',!
    async (childSnapshot, prevChildKey) => {!
    if (!isFinite(firstTimeBatchBeganTime)) {!
    firstTimeBatchBeganTime = Date.now();!
    }!
    ...!
    })!

    View Slide

  12. Problems_2
    React׾⢪׏גְ׷ךדծًحإ٦آ׾ꂁ⴨ח׃גٕ٦فדDOM⡲
    ׶׋ְ

    View Slide

  13. RxJS
    RxJSךbufferהintervalؔلٖ٦ة׾ⵃ欽׃ג300msךغحث׾⡲䧭ծ
    ׁ׵חscanؔلٖ٦ةד؎كٝزך珏겲ח䘔ׄג
    ⟃⵸ךر٦ةח穠さ׃׋׶刿倜׃׋׶ծ⵴ꤐ׃׋׶׃׋

    View Slide

  14. firebaseStream!
    .filter(({ type }) => {!
    return type === FirebaseEventType.CHILD_ADDED)!
    })!
    .buffer(Observable.interval(INTERVAL_MS))!
    .filter(v => v.length > 0)!

    View Slide

  15. Problems_3
    ַֿֿ׵ָ劤殢
    Firebase SDK׾؟٦غדⵃ欽׃ג剅ֹ鴥׫׾遤׏גְ׷ָ
    Timeout׃זְךד剅ֹ鴥׫㣟侁׾嗚濼דֹזְ

    View Slide

  16. Pseudo Timeout
    API؟٦غכ䌢ח202׾鵤ׅ״ֲח׃גծ
    ؿٗٝزؒٝسדٖأهٝأַ׵ךة؎ي،ؐز׾鏣㹀
    Firebaseַ׵ر٦ةָ䭷㹀׃׋儗꟦勻זֽ׸ל鷏⥋㣟侁ה׃ג《׶
    䪔ֲ

    View Slide

  17. Problems_4
    Firebase Realtime Databaseח呓秛ׁ׸גְ׷ر٦ة׾《׶⳿ׅ儗
    㣐ꆀךر٦ةחsort׾ַֽ׷ה♧儗涸חReadָ100%חז׏ג
    Firebaseָ⨡姺ׅ׷ֿהָ׻ַ׏׋

    View Slide

  18. Double Write
    ر٦ة׾BigTableפdouble write׃גRealtime Databaseכؿٗٝ
    زؒٝس⟃㢩כ⿫撑׃זְֿהח׃׋

    View Slide

  19. Firebase
    Browser API
    POST
    Write
    Read
    BitTable

    View Slide

  20. Problems_5
    ׮כװ״ֻ׻ַ׵זְָծ鹼䒀װꥺ㹱ָ㢳ְ

    View Slide

  21. It's so hard problem…
    Firebaseךⱔꞿ⻉׾ׅ׷ךָꬊ䌢חꨇ׃ְ׋׭
    植㖈כFirebaseָ衅׍׋׵堣腉⨡姺ׅ׷
    ׌׸ַ濼䜋׾فٔ٦ؤ

    View Slide

  22. Others
    剅ֹֹ׸זַ׏׋ֽוծ➭ח׮葿ղ䊨㣗׃ג׷

    View Slide

  23. Hiring
    FirebaseהGCP٥Kubernetes٥Scala׾⢪׏ג؟٦ؽأ⡲׶׋ְ➂
    כ僽ꬊ㡮ַֽגֻ׌ְׁ

    View Slide

  24. View Slide

  25. Summary
    ׀幠耮֮׶ָהֲ׀ְׂת׃׋

    View Slide