Age of Dynamic Web Pages – FireBase

Dynamic Web

Not so long ago web apps were slow and phlegmatic. The whole page had to be reloaded to update information. AJAX has only slightly improved this situation. Now we update separate blocks instead of reloading the whole page. Hardly had we got used to this technique, when a new web transformation appeared on the scene. It is dynamical web, where the content of pages updates by itself.

Now you can find such elements on Facebook or Twitter pages, for example. Data are changed there without our participation. As soon as someone has added a comment or re-tweeted the post, the changes are reflected on the page immediately.

There are several technologies behind dynamical web. WebSockets are the most important of them. You can read how to use them with Webix here. However, web sockets present a very low level of abstraction. Fortunately, it’s possible to get all the benefits of dynamic updates without diving so deeply into the details of data synchronization. There are several great solutions created by web enthusiasts. They allow avoiding difficulties and creating cool dynamic apps.

FireBase

FireBase is the online database that can be used to build real time mobile and web apps within minutes by using client-side code only.

This code defines some data collections and registers the handler that will be called each time new data are added. That’s it. In the world of dynamic web you don’t read data, but set the rules that define what to do when data are added or changed.

Also, to get your own online DB you need to register at firebase.com. They have a free plan which is more than enough for making simple apps and prototyping.

FireBase + Webix

FireBase provides a nice API, so integration with Webix is quite simple. The straight approach is to use the above described child_added event and call the add method of the component. Such code will display new record in the component just after adding it to database ( it will be added in real-time for all users who have the component on the page )

The important thing is that we have assigned data.key() to the obj.id. Webix and FireBase use different approaches for ID storing. FireBase has a special key method to retrieve the id, while Webix expects to find the “id” property directly in the data object.

The above snippet is fully working but it has one problem – it is slow. The component will repaint itself each time new data are added. To fix it, we can use a different Firebase event called “value”. This event occurs when data are updated in the collection and provides all data of collection at once.

In the above example, instead of calling add for each record we are waiting until all records from this collection are received and then use the parse method for loading data.

In a real app you will have to handle both value and child_added events. The first one is needed for loading the initial data. The second one will be used for adding new data dynamically. Actually, you will need to handle two more events as well: the child_changed event and the child_removed one. These events will occur after data changing and data deleting, respectively.

That’s all you need to save data from the Webix component back to FireBase DB. Once again, the code is rather simple. When some data have been added to the component, we are calling the related methods of FireBase API. Similar to adding operation we can write the code for deleting and editing.

Thus, we have a fully working two-way data syncing between FireBase and Webix component. Changes in Component are saved back to FireBase and are synced among all clients. Nice. Still, quite a lot of code needs to be written each time. We can do better. Instead of writing a bunch of code each time we can wrap the code in proxy objects and write only minimum necessary syntax.

Written by

Maksim Kozhukh

Pragmatic software developer with more than 12 years of web development experience. Prefers to work with Javascript and HTML. Maksim has worked with lots of different technologies from nearly forgotten ColdFustion to the bleeding edge of NodeJS and Go.