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

Slide 1

Slide 1 text

Firebase Realtime Database & Frontend

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Firebase Browser API POST Write Read

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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);!

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Firebase Browser API POST Write Read BitTable

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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