Firebase & AngularJS => 3 Way Data Binding Magic

Saturday, October 18, 2014

Firebase is a realtime synchronization network

Build apps fast - no servers required

Data persistence in realtime

Comes with authentication and security rules, serves as the complete backend

3 Way Data Binding with a data persistence store

Characteristics:

  1. Data store to store the apps data, the data is propagated back to app in real time
  2. When data is stored all clients are instantly notified in realtime
  3. It acts as a message bus as well as a persistence layer
  4. Security system built in, get message notification, data persistence, a complete backend

Let's start with a simple example using firebase and jquery, add a reference to firebase, jquery and a custom JAVASCRIPT file just above the ending body tag


Navigate to firebase homepage and sign in or register


Create a new firebase, take note of the endpoint url


View the firebase forge, here is where the data will be stored in json format


Create a reference to the root of the firebase


In the HTML file add a couple of input text boxes for the chatters name and message


Add a keypress event handler on the message textbox, whenever enter/return is hit this event will fire and the data will be sent and stored to the firebase


View the web page in the browser


Insert a name and message and press enter


View in the firebase forge the data has been instantly inserted


The set() function can also be used to write objects, write an object to firebase with name and message properties


Type in a name and message and hit enter


View in the forge the message object has been instantly updated


Use push instead of set so that a list of messages can be supported, makes creating lists easy


To tell firebase to inform us that a new message has arrived, add a callback to list of chat messages using on() method, then method takes two arguments the event type and the callback function, child_added event will notify us of new messages


Foreach chat message firebase will invoke the callback with snapshot containing the message's data, extract the message data from the snapshot by using the val function and assigning it to a variable, then invoke the displayMessage function to display the messages


Refresh web page view the message list from firebase


Type in a new message, instantly the message is displayed in the message list


In real time the message from Mary is persisted to the data store in the firebase forge and updated in the HTML template


Open two instances of the browser on the same url of the firebase chatter


Firebase, the data is shown in real time on all clients and persisted in the firebase data store, this process is even more enhanced using angularjs


This is an example of two way data binding in angularjs, the directive ng-model on the input and the angular expression in the h2 tag, type in a string in the textbox the h2 also gets updated


View the page in a browser, insert a string, the h2 instantly reflects the value


Firebase extends this two way synchronization to a cloud database, take the model that is stored in memory on the client, whenever it changes, the changes are sent back to the model, so the model is always up to date, let's build a simple chat application using firebase and angularfire, include firebase and angularfire scripts in the head section


Define firebase as a dependency in the module definition


Inject firebase as a dependency in the controller, add firebase as an argument to the controller's constructor


Create a new instance of firebase at the specified url, bind the ng-model posts to the firebase location


Now the model posts is bound to a firebase url via $firebase, whenever data changes in firebase the model will be immediately updated and hence the view, this is the magic of three way data binding, insert an ng-repeat to iterate over all posts and display the properties, this is in the ng-controller body tag


Add the addpost function which we will bind to the ng-keydown directive in the view, the add method stores the message in firebase as an object, angularfire creates a two way data binding between the model and firebase as angular creates a two way data binding between the model and the view


In the view add a label and two inputs, notice the ng-model directive binding the input values to scope variables in the controller or model and the ng-keydown directive, invoking the add function passing in the type of event as an argument


Open the web page in a couple of browsers, here firefox and chrome, the best browsers


Type in a username and message in one browser, press enter, view it immediatley reflects on all clients


View the data has also been persisted in the firebase forge


Insert a couple of messages, view the immediate update on all web pages


And view the data persisted in the firebase forge, in real time, the data in the backend and on all devices accessing the web page are in synch, with the newest data


Finally open a new instance of the web page in another client, in this case safari, view the fresh data displayed


Default Success Warning Important Info Inverse
B S W I ? O