Firebase

Store and sync data instantly...

Basic client-server architecture

Basic data-centric architecture

Data-centric architecture

Data Center > Amazon > Heroku > Firebase

Store & Sync Data Instantly
Service, not an open-source project
CRUD
Authentication
Security

Create an account at firebase.com

Simple example

Simple message board

<a href="https://torid-inferno-7130.firebaseio.com" target="_blank">Link to my firebase url</a>

<form>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type="text" id='messageInput' placeholder='Message'/>
    <button class="btn">Submit</button>
</form>

$('form').on('submit', function(e) {
        e.preventDefault();
        var name = $('#nameInput').val();
        var text = $('#messageInput').val();
        messagesRef.push({name: name, text: text});
        $('#messageInput').val('');
    });

var $messageList = $('#list');

var messageQueryRef = messagesRef.limitToLast(10);
    // query: .orderByChild('name').equalTo('rouben').limitToLast(10)

// Add a callback that is triggered for each chat message.
    messageQueryRef.on('child_added', function (snapshot) {

//GET DATA
        var data = snapshot.val();
        var username = data.name || "anonymous";
        var message = data.text;
        var id = snapshot.key();

// DISPLAY MESSAGE
        $('<li data-key="'+ id +'">' + username + ': ' + message + '</li>').appendTo($messageList);
    });

messageQueryRef.on('child_removed', function(snapshot) {
        var id = snapshot.key();
        $('[data-key="' + id + '"]').remove();
    });

messageQueryRef.on("child_changed", function(snapshot) {
        //GET DATA
        var data = snapshot.val();
        var username = data.name || "anonymous";
        var message = data.text;
        var id = snapshot.key();
        $('[data-key="' + id + '"]').html(username + ': ' + message);
    });
</script>

Simple example of using Angular

Simple example of using AngularFire

<div ng-app="sampleApp">
    <a href="https://torid-inferno-7130.firebaseio.com" target="_blank">Link to my firebase url</a>
    <div ng-controller="SampleCtrl" >
        <input type="text" ng-model="data.value"/>
        <h1 ng-bind="data.value"></h1>
    </div>
</div>

// create an AngularFire reference to the data
            var sync = $firebase(ref);

// create a synchronized object, all server changes are downloaded in realtime
            var dataObj = sync.$asObject();

// set up 3-way data-binding
            dataObj.$bindTo($scope, "data");

}
    ]);
</script>

Message board with AngularFire

<div ng-app="sampleApp">
    <a href="https://torid-inferno-7130.firebaseio.com" target="_blank">Link to my firebase url</a>
    <div ng-controller="SampleCtrl" >
        <ul>
            <li ng-repeat="message in messages">
                {{ message.name }}: {{ message.text }}
            </li>
        </ul>

<form ng-submit="add(newItem)">
            <input type='text' ng-model="newItem.name" placeholder='Name'>
            <input type="text" ng-model="newItem.text" placeholder='Message'/>
            <button class="btn">Submit</button>
        </form>
    </div>
</div>

// create an AngularFire reference to the data
            var sync = $firebase(ref);

// $scope.data = sync.$asObject();
            $scope.messages = sync.$asArray();

$scope.add = function(obj) {
                $scope.messages.$add(obj);
                $scope.newItem.text = '';
            };
        }
    ]);
</script>

Tic Tac Toe AngularFire

<div ng-app="sampleApp" class="main">
    <a href="https://torid-inferno-7130.firebaseio.com" target="_blank">Link to my firebase url</a>
    <div ng-controller="SampleCtrl" >

<button ng-click="restart()">Restart</button>

</div>
</div>

// create an AngularFire reference to the data
            var sync = $firebase(ref);

// create a synchronized object, all server changes are downloaded in realtime
            var dataObj = sync.$asObject();

// set up 3-way data-binding
            dataObj.$bindTo($scope, "game");

$scope.restart = function() {
                $scope.game.board = [{id: 0}, {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}, {id: 6}, {id: 7}, {id: 8}];
            };

$scope.userImage = 'http://travelorientation.com/uploads/3/3/7/4/3374996/7681024_orig.png';

dataObj.$loaded().then(function() {
                if(!$scope.game.board)
                    $scope.restart();
            });

$scope.cellClicked = function(cell) {
                cell.image = $scope.userImage;
            };
        }
    ]);
</script>

Firebase

Store and sync data instantly...

Basic client-server architecture

Basic data-centric architecture

Data-centric architecture

Data Center > Amazon > Heroku > Firebase

Create an account at firebase.com

Simple example

Simple message board

Simple example of using Angular

Simple example of using AngularFire

Message board with AngularFire

Tic Tac Toe AngularFire

Remember that Firebase is a service, not an open-source project

Rouben Meschian

rmeschian@gmail.com