Intro to Firebase

View Github Repository Open presentation in a new window

firebase

See all presentation from firebase

Intro to Firebase

27 24

firebase-intro-presentation

On Github firebase / firebase-intro-presentation

Intro to Firebase

YOUR_NAME / @YOUR_TWITTER_HANDLE

The Realtime Backend

for your App

Creating an app shouldn't require managing complex infrastructure.

The Full Stack

The full stack is never really that simple

... and neither is the client side

The user doesn't care about your backend

The user expects

Speed

Offline

Multi-platform

Simple Authentication

Firebase

The Realtime Backend

for your App

The Firebase Backend

Forget the Server

Firebase apps can run on client-side code only

Cloud database

NoSQL data-store

Returns JSON from a RESTful API

Realtime Data

Whenever data is updated in Firebase, it sends the update down to every listening client

SDKs

Store Data

var ref = new Firebase("https://<your-firebase-app>.firebaseio.com/message"); ref.set('All the things'); let ref = Firebase(url: "https://<your-firebase-app>.firebaseio.com/message") ref.setValue("All the things") Firebase ref = new Firebase("https://<your-firebase-app>.firebaseio.com/message"); ref.setValue("All the things");

Sync Data

var ref = new Firebase("https://<your-firebase-app>.firebaseio.com/message"); ref.on("value", function(snap) { console.log(snap.val()); }); let ref = Firebase(url: "https://<your-firebase-app>.firebaseio.com/message") ref.observeEventType(.Value, withBlock: { snap in println(snap.value) }) Firebase ref = new Firebase("https://<your-firebase-app>.firebaseio.com/message"); ref.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(DataSnapshot snapshot) { System.out.println(snapshot.getValue()); } @Override public void onCancelled(FirebaseError error) { } });

Offline

Intermittent Offline

What happens when you go through a tunnel?

Firebase clients store a local cache of your data. When the user goes offline, the app still works as expected with the local cache.

Extended Offline

What happens when you go on a flight?

On mobile, Firebase persists data to a local store. The app will continue to work even across app restarts.

One line of code

Firebase.defaultConfig().persistenceEnabled = true Firebase.getDefaultConfig().setPersistenceEnabled(true);

Firebase supports several forms of authentication

Email & Password

Google

Twitter

Facebook

Github

Anonymous

...and even custom backends

Authentication

// Login with Google ref.authWithOAuthPopup('google', function(error, authData) { console.log(authData); }); ref.authWithOAuthProvider("google", token: "<OAuth Token>", withCompletionBlock: { error, authData in if error != nil { // Error authenticating with Firebase with OAuth token } else { // User is now logged in! println("Successfully logged in! \(authData)") } }) ref.authWithOAuthToken("google", "<OAuth Token>", new Firebase.AuthResultHandler() { @Override public void onAuthenticated(AuthData authData) { // the Google user is now authenticated with your Firebase app } @Override public void onAuthenticationError(FirebaseError firebaseError) { // there was an error } });

Authentication

// Listen for authentcated users ref.onAuth(function(authData) { if(authData) { console.log('User is logged in!'); } }); ref.authWithOAuthProvider("google", token: "<OAuth Token>", withCompletionBlock: { error, authData in if error != nil { // Error authenticating with Firebase with OAuth token } else { // User is now logged in! println("Successfully logged in! \(authData)") } }) ref.authWithOAuthToken("google", "<OAuth Token>", new Firebase.AuthResultHandler() { @Override public void onAuthenticated(AuthData authData) { // the Google user is now authenticated with your Firebase app } @Override public void onAuthenticationError(FirebaseError firebaseError) { // there was an error } });

Security

By default everyone can write and read 

						
{
  "rules": {
    ".read": true,
    ".write": true,
  }
}

Everyone can read, but no one can write 

						
{
  "rules": {
    ".read": true,
    ".write": false,
  }
}

Secure specific parts of your Firebase 

						
{
  "rules": {
    ".read": true,
    "message": {
      ".write": false
    }
  }
}

Special variables to power authentication 

						
{
  "rules": {
    ".read": true,
    "message": {
      ".write": "auth !== null",
      ".validate": "!data.exists()"
    }
  }
}

Security

Use $wildcards as route parameters

						
{
  "rules": {
    ".read": false,
    ".write": false,
    "users": {
      "$userid": {
        ".read": "true",
        ".write": "auth.uid === $userid"
      }
    }
  }
}

Hosting

When you're ready to launch

  						
firebase init
# select your firebase
firebase deploy
# party time

Hosting

Production-grade

Static Asset

Free SSL

CDN cached assets

One click rollbacks

(Optional) Live Coding

Tooling & Integration

Bindings

AngularFire

A chat app in AngularFire

						
var app = app.module('app', ['firebase']);
app.controller('ChatCtrl', function($scope, $firebaseArray) {
  var ref = new Firebase('https://<your-firebase>.firebaseio.com/messages');
  $scope.messages = $firebaseArray(ref);
});
						
					
						
<html>
  <body ng-app="app">
    <div ng-controller="ChatCtrl">
      <p ng-repeat="message in messages">message.text</p>
    </div>
  </body>
</html>

Geofire

Store and query items based on their geographic location in realtime

Well Documented

Firebase meta-data

170,000+ registered developers

1M concurrent users on Firebase sites

Joined Google October, 2014

Firebase in Production

  • Twitch.tv - Notifying users when realtime streams go live
  • Citrix - Manages presence in GoTo Meeting
  • CBS - Powers the chat for Big Brother's Live Stream
  • Warby Parker - Powering pneumatic tubes

Focus on your app

The user doesn't care about the backend

What matters is that your app is fast and enjoyable

Complete Platform

ASK ME QUESTIONS

YOUR_NAME / @YOUR_TWITTER_HANDLE
YOUR_JOB / @YOUR_COMPANY

Assets Used