Tuesday 1 April 2014

Firebase: Store and sync data in real time

Check out this scalable, easy to use, web data storage for real time apps.

Example:

Firebase along with loads of cool demo apps and quickstart tutorials can be found here:  http://firebase.com

There’s also a web UI from administering your web db.

Try this out for yourself by spinning up a couple of browsers:  http://stevenhollidge.com/blog-source-code/firebase/index.html

Bear in mind the data is shared so whatever you type will appear above, be nice :)

Source:

<html>
<head>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://d5wez3l3q02.firebaseio-demo.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>

It’s written in Scala and they take care of the eventual consistency and scalability issues which leaves the developer to focus on the business problem.  There’s also lots of bindings available including Angular and Ember. 


Enjoy!