Slide 1

Slide 1 text

Firebase: Build Extraordinary Apps

Slide 2

Slide 2 text

+Kazunori Sato @kazunori_279 Kaz Sato Developer Advocate, Cloud Platform, Google Inc. Cloud community advocacy Cloud product launch support

Slide 3

Slide 3 text

Mobile App for Millions of People Authentication. Storing Data. Interactions.

Slide 4

Slide 4 text

“Make it work in the Cloud”

Slide 5

Slide 5 text

In the Cloud, you need… Front End. Business Logic. Database. Multiple Servers, Load Balancers, Replicas, Backups...

Slide 6

Slide 6 text

For Clients, you need to support… Smart Phones. Tablets. Desktops. Android, iOS and Browsers

Slide 7

Slide 7 text

Talking to a Backend Large Scale M-to-N Connections with Realtime messaging … It’s not easy

Slide 8

Slide 8 text

= Expensive Engineering Time

Slide 9

Slide 9 text

Is there a better way?

Slide 10

Slide 10 text

Firebase is a powerful platform for mobile and web applications.

Slide 11

Slide 11 text

Firebase User Authentication Realtime Database Static Hosting

Slide 12

Slide 12 text

Firebase User Authentication Realtime Database Static Hosting

Slide 13

Slide 13 text

Firebase User Authentication Realtime Database Static Hosting

Slide 14

Slide 14 text

Location Collaboration Gaming Realtime is…

Slide 15

Slide 15 text

Location Collaboration Gaming Realtime is…

Slide 16

Slide 16 text

Location Collaboration Gaming Realtime is…

Slide 17

Slide 17 text

Unreliable networks Multi Platform Realtime is hard! Complex Transport Stateful 2-way connection How to implement it?

Slide 18

Slide 18 text

Unreliable networks Multi Platform Realtime is hard! Complex Transport 4G/WiFi switching. Subways. Tunnels. Basements.

Slide 19

Slide 19 text

Unreliable networks Multi Platform Realtime is hard! Complex Transport Different Capabilities, Behaviors and Languages

Slide 20

Slide 20 text

Firebase in the Real World

Slide 21

Slide 21 text

CBS 50,000 Concurrent Users 27,000,000 chat messages

Slide 22

Slide 22 text

$40,000 Kickstarter 100,000 Users

Slide 23

Slide 23 text

200,000+ Developers

Slide 24

Slide 24 text

How to Develop?

Slide 25

Slide 25 text

Demo: mmoasteroids

Slide 26

Slide 26 text

Firebase Dashboard Database. Security. Analytics. Debugging. Deployment.

Slide 27

Slide 27 text

Setup // Firebase connection Stuff var firebaseRef = new Firebase("https://mmoasteroids.firebaseio.com"); var firebaseRefGame = firebaseRef.child('game');

Slide 28

Slide 28 text

Start up the user’s ship // Add player's ship to Firebase var myship = firebaseRefGame.child('players').push(); // Schedule player removal on disconnect at the backend myship.onDisconnect().remove();

Slide 29

Slide 29 text

// Write new ship location to Firebase on any update myship.set({ ship: { acc: this.acc, vel: this.vel, x: this.x, y: this.y, rot: this.rot, accb: KEY_STATUS.up }, user: currentUser }); Write our ship to firebase on updates

Slide 30

Slide 30 text

// Sync new enemy ships from Firebase to local game state firebaseRefGame.child('players').on('child_added', function (snapshot) { if (snapshot.key() !== myship.key()) { var enemy = new EnemyShip(); enemy.acc = snapshot.val().ship.acc; enemy.vel = snapshot.val().ship.vel; enemy.x = snapshot.val().ship.x; enemy.y = snapshot.val().ship.y; enemy.rot = snapshot.val().ship.rot; enemy.accb = snapshot.val().ship.accb; enemy.user = snapshot.val().user; enemy.visible = true; enemy.fref = firebaseRefGame.child('players').child(snapshot.key()); }}); We read enemy ships too...

Slide 31

Slide 31 text

firebaseRefGame.child('players').on('child_removed', function (snapshot) { if (snapshot.key() !== myship.key()) { var enemy = Game.sprites[snapshot.key()]; enemy.visible = false; delete Game.sprites[snapshot.key()]; Game.explosionAt(snapshot.val().ship.x, snapshot.val().ship.y); } else { Game.ship.collision(null); } }) We handle enemy ship “removal”

Slide 32

Slide 32 text

bullet.fref = firebaseRefGame.child('bullets').push({ s: myship.key(), x: bullet.x, y: bullet.y, vel: bullet.vel }); bullet.fref.onDisconnect().remove(); Bullets

Slide 33

Slide 33 text

// Sync enemy bullets from Firebase to local game state firebaseRefGame.child('bullets').on('child_added', function (snapshot) { var bullet = snapshot.val(); if (bullet.s !== myship.key()) { var enemybullet = new EnemyBullet(); enemybullet.x = bullet.x; enemybullet.y = bullet.y; enemybullet.vel = bullet.vel; enemybullet.visible = true; enemybullet.fref = firebaseRefGame.child('bullets').child(snapshot.key()); Game.sprites['bullet:' + snapshot.key()] = enemybullet; }}); Enemy bullets

Slide 34

Slide 34 text

firebaseRefGame.child('bullets').on('child_removed', function (snapshot) { var bullet = snapshot.val(); if (bullet.s !== myship.key()) { var enemybullet = Game.sprites['bullet:' + snapshot.key()]; if (enemybullet != null) { enemybullet.visible = false; } delete Game.sprites['bullet:' + snapshot.key()]; } }); Enemy bullet removal

Slide 35

Slide 35 text

Conclusions

Slide 36

Slide 36 text

Mobile Is Important!

Slide 37

Slide 37 text

Traditionally Complex!

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

https://firebase.com

Slide 41

Slide 41 text

Thank you! This work is licensed under a Creative Commons Attribution 2.0 Generic License.