Firebase logo
Scalable real-time backend

Demo #1

TodoMVC

AngularJS

        todomvc.controller('TodoCtrl', function TodoCtrl(
          $scope, $location, todoStorage) {
          var $scope.todos = todoStorage.get();
          $scope.$watch('todos', function (newValue, oldValue) {
            // ...
            if (newValue !== oldValue) {
              todoStorage.put(todos);
            }
          }

          $scope.addTodo = function () {
            $scope.todos.push({
              title: newTodo,
              completed: false
            });
          }
        })
      

TodoMVC

AngularJS + AngularFire

        todomvc.controller('TodoCtrl', function TodoCtrl(
          $scope, $location, angularFire) {
          var url = 'https://todomvc-angular.firebaseio.com/';
          angularFire(url, $scope, 'todos', {}).then(function () {
            $scope.$watch('todos', function () {
              // ...
            }

             $scope.addTodo = function () {
               $scope.todos[new Firebase(url).push().name()] = {
                title: newTodo,
                completed: false
              };
            }
          }
        }
      

Demo #2

http://szimek.github.io/presentation-firebase-intro?follow=true

Presentation synchronization

Broadcasting

        ref = new Firebase('https://presentations.firebaseio.com');

        auth = new FirebaseSimpleLogin(ref, function(error, user) {
          if (error) return console.log(error);
          if (!user) auth.login('github'); // show popup
        });

        document.addEventListener('slideenter', function (event) {
          ref.child('firebase-intro').set(event.slideNumber);
        });
      

Presentation synchronization

Listening

        ref = new Firebase('https://presentations.firebaseio.com');

        ref.child('firebase-intro').on('value', function (snapshot) {
          var slideNumber = snapshot.val();
          window.slideDeck.loadSlide(slideNumber);
        });
      

References

References

        firebaseRef = new Firebase(
          'https://presentations.firebaseio.com/firebase-intro'
        );

        // or

        ref = new Firebase('https://presentations.firebaseio.com/');
        firebaseRef = ref.child('firebase-intro');
      

Writing data

Writing data

Primitives

        ref = new Firebase(
          'https://presentations.firebaseio.com/firebase-intro'
        );

        ref.set(slideNumber, function (error) {
          if (error) console.log(error);
        });
      

Writing data

Objects

        ref = new Firebase('https://presentations.firebaseio.com');

        ref.set({"firebase-intro": slideNumber});

        ref.update({"firebase-intro": slideNumber});
      

Writing data

Lists

        var ref = new Firebase('https://chat.firebaseio.com/messages');

        ref.child('message_1').set({user_id: 'Alice', text: 'Hello'});

        // other user

        ref.child('message_1').set({user_id: 'Bob', text: 'Hello'});
      

Writing data

Lists

        var ref = new Firebase('https://chat.firebaseio.com/messages');

        // Automatically generate unique child name.
        var newRef = ref.push();
        newRef.set({user_id: 'Bob', text: 'Hello'});
      

Reading data

Reading data

        var ref = new Firebase(
          'https://presentations.firebaseio.com/firebase-intro'
        );

        ref.on('value', function (snapshot) {
          var value = snapshot.val();
        }
      

Reading data

Events

  • value
  • child_added
  • child_changed
  • child_removed
  • child_moved

Queries

no WHERE

Queries

Methods

  • limit()
  • startAt()
  • endAt()

Queries

Examples

        var ref = new Firebase('https://chat.firebaseio.com/messages');

        // Returns up to 100 child records
        // and keeps total number of child elements at or below 100.
        var limitedRef  = ref.limit(100);
      

Queries

Examples

        var ref = new Firebase('https://chat.firebaseio.com/messages');

        // Fetch all chat messages sent at or after 7:32 PM on 2/11/2012
        ref.startAt(1329017600).on('child_added', ...);
      

Queries

Examples

        var ref = new Firebase('https://chat.firebaseio.com/messages');

        // Fetch 100 most recent messages before 7:32 PM on 2/11/2012
        ref.endAt(1329017600).limit(100).on('child_added', ...);
      

Queries

More info

Authentication

Authentication

Firebase Simple Login

Authentication

Firebase Simple Login

        ref = new Firebase('https://chat.firebaseio.com');

        auth = new FirebaseSimpleLogin(ref, function(error, user) {
          // handle error and user state
        });

        auth.login('password', {
          email: 'bob@example.com',
          password: 'password'
        });
      

Authentication

Firebase Custom Login

Generate custom JSON Web Token on your server using your Firebase secret.

Then use it on the client to authenticate to Firebase.

        var ref = new Firebase("https://chat.firebaseio.com/");

        ref.auth(AUTH_TOKEN, function(error) {
          if(error) {
            console.log("Login Failed!", error);
          } else {
            console.log("Login Succeeded!");
          }
        });
      

Authorization

Authorization

Rules

        {
          "rules": {
            ".read": true,
            ".write": "auth.provider == 'github' && auth.username == 'szimek'"
          }
        }
      

Authorization

Rules

        {
          "rules": {
            "users": {
              "$user": {
                ".read": "$user == auth.username",
                ".write": "$user == auth.username"
              }
            }
          }
        }
      

Data validation

Data validation

Rules

        {
          "rules": {
            "tweets": {
              "$id": {
                ".read": true,
                ".write": true,
                ".validate": "newData.hasChildren([message'])",

                "message": {
                  ".validate": "newData.isString() && newData.val().length <= 140"
                }
              }
            }
          }
        }
      

Integrations

Integrations

Official libraries

Alternatives

Alternatives

Applications

Thank You!