Contact

Technology

Jul 13, 2015

Build Real-Time Apps with Firebase

Jonathan Williamson

Jonathan Williamson

Build Real-Time Apps with Firebase

How fast are your applications? Because if they don’t react within 100 milliseconds, they’re delayed. Within one second, your users’ flow of thought is interrupted. After 10 seconds, you’ve lost your users’ attention entirely, as they switch to perform other tasks. In today’s world of Instagram, Twitter, and Slack, an application needs to be fast to compete. When considering real-time web programming, don’t reinvent the wheel—there are others who have made it easy.

Enter Firebase.

Firebase is a platform for building real-time applications using a cloud-based database that’s used as a service. Firebase provides the scalable, robust back-end, and you provide the front-end. This front-end can be anything from a web application written in JavaScript to an iOS application written in Objective-C.

real-time-apps-2

Some of Firebase’s custom libraries

Using their premade libraries or their RESTful API, browsers, mobile devices, and external services can consume the data. When one client updates data on the “Firebase,” all other active clients receive the fresh data instantaneously, giving the service the nickname, “Data binding for the back-end.”

Firebase started in San Francisco in the spring of 2011, and Google Cloud Services acquired it in October 2014. As of this post, there are currently 181,000 registered developers using the platform and more than one million concurrent users on Firebase-powered sites. Some of their recent customers include Citrix, CBS, Twitch, and Warby Parker.

WHO IS FIREBASE FOR?

Firebase’s data storage and synchronization services are useful for many different types of developers:

  • User interface developers can create fully functional web apps without writing any back-end code.

  • User experience designers with limited JavaScript knowledge can easily create prototype applications with real data synchronized across multiple devices.

  • Back-end developers can use Firebase to supplement existing data storage methods to handle scalable real-time interactions.

  • Product managers can leverage Firebase as a way to add real-time functionality to their applications without interrupting or rewriting existing services.

HOW TO USE FIREBASE FOR REAL-TIME WEB APPLICATIONS

Firebase provides an extensive JavaScript API for reading, writing, authenticating, advanced querying, and more. Firebase data is stored in a flat-file JSON structure. The API allows for editing and reading data from the top-level node of the JSON as well as at any subnode in the structure.

To write data to Firebase, simply use this code:

real-time-apps-3

The first line creates a connection to your Firebase location using a custom URL provided in your account dashboard. The second line sets the value at that location to be a specific string. Ours is set as, “Hello World.”

Reading from Firebase relies on events triggered when the data at a particular location changes. To read our data from Firebase, we can use this:

real-time-apps-4

Because we used the ‘value’ event, this code will be triggered by any change (addition, update, or removal) at this Firebase location. In our case, this will display “Hello World!” in the console.

You can also set the value at any Firebase location with a JSON object. This will create a new sub-tree of data at that location. In the following snippet, we set a JSON object as the value of our Firebase location:

real-time-apps-5

To read from the sub-location, simply use the child() method provided in the JavaScript API:

real-time-apps-6

This will read the value at the ‘message’ child of the Firebase location, thus printing “Hello” to the console.

Firebase also provides several other methods for reading and writing.

DEMO: REAL-TIME CHAT

No real-time programming discussion would be complete without a real-time chat demo. I’ve included an example application below where you can chat between a phone and a watch. You can click and send messages directly in the demo.

If you click on the ‘JS’ tabs and look though the code, you’ll see each demo uses the push() method to add data to the common Firebase, and they each use different methods to read back the data the other one sent over.

(Feel free to open each demo up in a separate browser or even on different computers to experience the real-time nature of the Firebase connection)

AUTHENTICATION AND SECURITY

Firebase also provides a simple API for authenticating users as well as robust “security rules” to control data access and manipulation. Firebase can integrate with your existing login server or authenticate solely with client-side code. It has built-in functionality for email/password authentication and third-party providers such as Facebook, Twitter, GitHub, and Google.

Firebase Security Rules are a custom declarative language for securing Firebase data through authorization and data validation. Using a JSON-like structure, administrators can declare “read” and “write” rules for any given level of the application data tree. The example security rules declaration below puts a constraint on reading at this Firebase location and data writing because the user has to be authenticated and the data has to be a string:

real-time-apps-9

ARCHITECTING A FIREBASE-POWERED APPLICATION

Firebase can fit in a few different places in application architecture:

Pattern 1: 100% Firebase-powered apps are ideal if:

  • You’re developing a brand-new application or rewriting an existing one from scratch.

  • Your application needs minimal integration with legacy systems or third-party services.

  • Your app doesn’t have heavy data processing needs or complex user authentication requirements.

Pattern 2: Firebase-powered apps with server code are ideal if:

  • You need to integrate with third-party APIs (like Twilio to send an SMS).

  • You have advanced authentication requirements (e.g., LDAP integration).

  • Your app has computationally intensive code that you can’t run on a client or requires code to run on a trusted server.

Pattern 3: Firebase-powered features in existing apps are ideal if:

  • You have an existing

     

    full-featured app and aren’t planning a rewrite.

  • Your codebase is large and depends on several services or components you can’t change.

  • You want to add real-time features without touching the rest of your app.

PRICING

Firebase provides multiple pricing tiers to cater to developers ranging from “hackers” to those involved in enterprise software development. As of this post, the current pricing models are as follows:

real-time-apps-13

The main differentiators between the plans are the number of “concurrent connections” and how much data will be flowing between the site and your users. Firebase defines concurrent connections as the number of open network connections to their servers. It’s definitely not a 1:1 ratio on the number of visitors to a site—Firebase states that one connection corresponds to roughly 1,400 monthly visitors.

It’s important to note the only hard cap on usage applies to the “hacker” (or free) plan. For each of the other plans, if an application overflows the current plan limits, Firebase begins charging a per-connection/MB overage fee if you exceed your limits more than 5% during that month. Firebase also allows you to change plans (upgrade or downgrade) at any time during the month, though refunds are not prorated.

A WORD ON FIREBASE HOSTING

Firebase Hosting is a production-grade hosting service included with every plan. My experience with the hosting service has been amazing. Using the hosting service means full-featured web apps can be coded, deployed, and maintained without writing a single line of back-end or server code. The hosting program also boasts automatic SSL and super fast CDNs available to help deliver content quickly and securely. In my opinion, the best part is the deploy time. With a few simple command line statements, you can deploy updates or rollback to a previous version in seconds.

CONCLUSION

Firebase is a powerful real-time service provider with a full-featured library and ample support for developers and product managers. Consider using it on your next project or bringing it into an existing one and enjoy the instantaneous gratification of real-time in the cloud. Please contact Credera if you have any questions or need any help.

MORE

Conversation Icon

Contact Us

Ready to achieve your vision? We're here to help.

We'd love to start a conversation. Fill out the form and we'll connect you with the right person.

Searching for a new career?

View job openings