This is going to be a very short post, why? Well Firebase it’s really simple.
From their landing page:
Scalable real-time backend
Build apps fast without managing servers
That is Firebase, a real-time easy to use back-end, they have a tutorial that should teach you in five minutes the basics (i’t actually less than five minutes).
But well, too many praises, lets play a little bit with this technology.
first thing to do is to sign up for the service (easier with your github account), and create a firebase.
Mine is goingo be named fblab
We’re going to create a jsFiddle with this example:
(you can check the final result here, but if you want to test by yourself the example is pretty easy).
1- Add jQuery as a Framework or extension.
2- Add the Firebase app as an external resource in our jsfiddle:
https://cdn.firebase.com/v0/firebase.js
3- Add the following markup:
<h1>Simple list in Firebase</h1>
<!-- input text that contains the chat message -->
<input type="text" id="js-message" />
<input type="button" value="Send" id="js-send" />
<!-- list that just display the chat messages -->
<ul id="js-chat-list"></ul>
4- And the following JavaScript
// this is the Firebase that points to the address that we create in the Firebase site Dashboard var myDataRef = new Firebase('https://fblab.firebaseio.com/'); // get a reference to the message input text var messageText = document.getElementById('js-message'); // get the chat user nickname var username = prompt('Please provide your nickname'); // store a message object to our Firebase var _sendMessage = function() { // set anonymous user as anon if(!username) { username = 'anon'; } // if there's no text return, no validation for this basic example if(!messageText.value) { return; } // save the message to our Firebase endpoint taking advantage of the list capabilities, in this case we are saving an array of message objects myDataRef.push({nick: username, message: messageText.value}); // reset the message text input messageText.value = ''; }; // utility function that just print a chat message var _addToChatList = function(chatMessage) { // because it is out of the scope of this tutorial lets just append the message to out list with jquery var liMessage = $('<li/>').append(chatMessage.nick + ' says: ' + chatMessage.message); $('#js-chat-list').append(liMessage); }; // add callback to our Firebase for when a new child is attached // to dive more into the Firebase events go to: // https://www.firebase.com/docs/reading-data.html myDataRef.on('child_added', function(snapshot) { _addToChatList(snapshot.val()); }); // add event listener to the send button var el = document.getElementById("js-send"); el.addEventListener("click", _sendMessage, false);
As you can see the demo is very simple, although you can get an idea of what you can do with Firebase. Here we have a screenshot of the final result:
Firebase has a free plan for developers, a rest api, and a full api for Java, Objective-C and JavaScript.
I can easily see myself doing my prototypes with Firebase, it was fun.