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