Firebase introduction

Kewang

2

Live DEMO

https://db.tt/40igKVhc

3

Agenda

● Variety of sync mechanisms● Firebase

4

Variety of sync mechanisms

5

Variety of sync mechanisms

● Polling● Comet● Long Polling● WebSocket● Engine.IO (Socket.IO)● Polling & Push

6

Pollingsend scheduling request

7

Polling

client server

8

Polling

client server

T0T1

T2

9

Polling

client server

T0T1

T2

T4T5

T6

10

Polling

client server

T0T1

T2

T4T5

T6

T8T9

T10

11

Polling

● Pros– Easy to implement

● Cons– No efficiency

12

Cometa never died HTTP request

13

Comet

client server

14

Comet

client server

T0T1

15

Comet

client server

T0T1

16

Comet

client server

T0T1

T3T2

17

Comet

client server

T0T1

T3

T6

T2

T5

18

Comet

client server

T0T1

T3

T6T8

T2

T5T7

19

Comet

client server

T0T1

T3

T6T8

T12

T2

T5T7

T11

20

Comet

● Pros– Save more network traffic

● Cons– Blocking IO issue– Always get server response, can't send another request

21

Long Pollingsend a long time request repeatedly

when response received

22

Long Polling

client server

23

Long Polling

client server

T0T1

24

Long Polling

client server

T0T1

25

Long Polling

client server

T0T1

T4

T3

26

Long Polling

client server

T0T1

T4

T3

T5

27

Long Polling

client server

T0T1

T4

T3

T5

28

Long Polling

client server

T0T1

T4

T3

T5

T21T20

29

Long Polling

● Pros– Save a little network traffic– Can send another request

● Cons– I don't know

30

WebSocketFDX communications channels over a single TCP connection

31

WebSocket

client server

32

WebSocket

client server

33

WebSocket

client server

T0T1

T2

34

WebSocket

client server

T0T1

T2

T3T4

T5

35

WebSocket

client server

T0T1

T2

T3T4

T5T9

T10T11

36

WebSocket

client server

T0T1

T2

T3T4

T5

T17T18

T19

T9T10

T11

37

WebSocket

● Pros– Bidirectional communication– Save more network traffic

● Cons– Proxy & Firewall issue

38

Engine.IOcommunication layer for Socket.IO

39

Engine.IO - Socket.IO history0.1~0.6.2 0.6.3~0.6.17 0.7.0~0.9.17 1.0.0~now

websocket ✓ ✓ ✓ ✓server-events ✓flashsocket ✓ ✓ ✓

htmlfile ✓ ✓xhr-multipart ✓ ✓xhr-polling ✓ ✓ ✓

jsonp-polling ✓polling ✓

40

Engine.IO - Overview

41

Engine.IO - Overview

● Ensure the most reliable realtime communication

42

Engine.IO - Overview

● Ensure the most reliable realtime communication● Always establishes a long-polling connection first

43

Engine.IO - Overview

● Ensure the most reliable realtime communication● Always establishes a long-polling connection first

– then tries to upgrade to better transports that are "tested" on the side

44

Engine.IO - Upgrade transport seamlessly

45

Engine.IO - Upgrade transport seamlessly

● Switches from polling to another transport in between polling cycles

46

Engine.IO - Upgrade transport seamlessly

● Switches from polling to another transport in between polling cycles

● To ensure no messages are lost, the upgrade packet will only be sent once all the buffers of the existing transport are flushed and the transport is considered paused

47

Engine.IO

client server

48

Engine.IO

client server

T0T1

49

Engine.IO

client server

T0T1

50

Engine.IO

client server

T0T1

51

Engine.IO

client server

T0T1T6

T5

T7

52

Engine.IO

client server

T0T1

T11

T6T5

T7T10

53

Engine.IO

client server

T0T1

T11

T6T5

T7T10

54

Engine.IO

client server

T0T1

T11

T6

T12T13

T14

T5

T7T10

55

Engine.IO

● Pros– Auto-switch different network scenario

● Cons– Use particular protocol at server & client

56

Polling & Pushsimple sync mechanism

57

Polling & Push - Push off

client server

58

Polling & Push - Push off

client server

T0T1

T2

59

Polling & Push - Push off

client server

T0T1

T2

T4T5

T6

60

Polling & Push - Push off

client server

T0T1

T2

T4T5

T6

T8T9

T10

61

Polling & Push - Push on

client server SNS

62

Polling & Push - Push on

client server

T0T1

T2

SNS

63

Polling & Push - Push on

client server

T0T1

T2

T22T23

T24

SNS

64

Polling & Push - Push on

client server

T0T1

T2

T22T23

T24

SNS

T30

65

Polling & Push - Push on

client server

T0T1

T2

T22T23

T24

T31T32

T33

SNS

T30

66

Polling & Push

● Pros– Easy to implement

● Cons– No (official statement)

67

Firebase

68

Firebase

● Save data in the cloud● Realtime Data● Easy authentication● Bulletproof Security● Instant Scalability

69

Pattern 1 - Client Only

70

Pattern 1 - Client Only

● Developing a brand new application● Needs minimal integration with legacy systems or

other third party services● App doesn’t have heavy data processing needs or

complex user authentication requirements

71

Pattern 2 - Client & Server

72

Pattern 2 - Client & Server

● To integrate with third party APIs● Advanced authentication requirements● Can’t run computationally intensive code on a

client, or requires code to run on a trusted server

73

Pattern 3 - Existing App

74

Pattern 3 - Existing App

● An existing full-featured app, and aren’t planning a rewrite

● Codebase is large and cannot change● Add realtime features without touching the rest of

app

75

Live DEMO2

76

FAQ

77

FAQ

● Enterprise solution

78

FAQ

● Enterprise solution– Custom SLA– 24*7 support– Dedicated clusters– Training

79

FAQ

● Enterprise solution– Custom SLA– 24*7 support– Dedicated clusters– Training

● Concurrent connection

80

FAQ

● Enterprise solution– Custom SLA– 24*7 support– Dedicated clusters– Training

● Concurrent connection– Free plan has 50 max connections, otherwise is

unlimited

81

FAQ

● Enterprise solution– Custom SLA– 24*7 support– Dedicated clusters– Training

● Concurrent connection– Free plan has 50 max connections, otherwise is

unlimited● Lock-in

82

FAQ

● Enterprise solution– Custom SLA– 24*7 support– Dedicated clusters– Training

● Concurrent connection– Free plan has 50 max connections, otherwise is unlimited

● Lock-in– Export data to JSON

83

References

● Browser 與 Server 持續同步的作法介紹● Comet (programming)● Engine.IO: the realtime engine● Engine.IO Protocol● How Firebase Works● Firebase Callbacks - what's the underlying trigger?● Firebase under the hood - watching web sockets in

Chrome Developer Tools

84