Learn Firebase fast and simple, a complete beginners guide

Lucas Zibell
Wolox
Published in
9 min readNov 16, 2018

--

Have you ever wanted to make a simple web app? Well, if you have, you will probably be aware of the fact that an app has normally a back-end which includes the logic and integration with a database, and a front-end which helps the user interact with our application.

So, returning to the previous question, If you want a simple app in which requires a small database and some users, Is there a need for a full back-end system? Well no, actually there is a really cool service from Google called Firebase which gives you a pretty good database (now on, DB) and I’m going to talk about the advantages and disadvantages that this service has.

Is important to know that when we talk about a small database we are not refering to a small amount of data, actually Firebase storage manages a really high amount of files and information. As you may know, there are relational DB and non-relational DB also known as NoSQL databases. Firestore (Firebase DB) applies to the second type, the non-relational DB one; it is a document-oriented database.

What is a document-oriented Database?

First of all, there are no tables in NoSQL. In Document-oriented databases, all the information is saved in documents as JSON, mainly designed for storing, retrieving, and managing document-oriented information, also known as semi-structured data. The main concept of a document-oriented database is that the document contains vast amounts of data which can be made available usefully. These docs can be accessed as a regular directory in which you can have different collections and each collection has documents that hold the desired information. Furthermore, each collection can have inner collections. You can have an entire tree of documents, however, this practice is not recommended and you should avoid having more than three levels of nesting.

A simple firebase collection with its inner documents.

So when we say it should be small we are refering to relations between inner files. It’s easy to lose track of the relations between files in this kind of DBs, so the references between the files and their elements should be easy to understand to avoid spending hours of work following inner relations.
This is due to Firestore being schema-less which means you can insert different kinds of data and no schema validator will check their type, and because you will never have references between docs so the referential integrity won’t ever be granted.

Back-end vs Firebase

One of the best reasons for using Firebase is you can develop an entire application without knowing back-end technologies such as Node or Ruby on Rails. Is this something good? Well, it mainly depends on the depth and the scope of the project. For small to medium sized projects, Firebase is the best choice, you have all the code in the same place, the deploy is done altogether, you have the full control of the queries and the DB, the integration is easier to make as you are constantly editing and working with the queries from your front-end code than having to talk constantly with the back team and to interact with code that it is the most you probably haven’t done. Before it, be aware of not scaling the project more than it was supposed to because once the complexity and the scope of the app reaches a certain point it is much more comfortable to have a proper back-end. Think that it as a class in OOP (Object-oriented programming) where you can have a lot of logic in that class but once it outgrows in its responsibilities it starts to become a “god-class” that you might start creating new classes if you don’t want to end up with lots and lots of code in the same place. A same situation happens with Firebase, once you have to start making lots of queries from multiples collection and on top of what you have to merge with locally, your code and service will have more responsibility than it should. So, once you see this happen, you might be needing a proper back-end.

How do you use Firebase?

Well, actually Firebase has something that is really simple to use once you get to know it. Step by step and as a quick tutorial, firstly you will need to initialize firebase with your project’s credentials. After that, you can get collections or specific documents with methods like .collection() and .doc() respectively.

Simple code example for getting collections and documents from the database

The code above returns a promise which will resolve into something called a snapshot: this structure will contain a single doc if you are using .doc() or an array of docs if you are only using .collection(). To transform this snapshot into the desire data, we advise to do a .then() at the end of the function and parse the data as it is shown on the following code snippet.

Code example for parsing the snapshot

Sometimes we won’t need the entire collection, we would like to filter, order, or to limit the data. For these more complex queries you can add a .where() and start adding conditions that the items in collection will have to accomplish. Be aware because Firebase has some big disadvantages for making queries: here we mention these disadvantages and a possible solution for each one.

  • You don’t have logical OR: To achieve this, you should create separate queries for each condition and then merge them locally.
  • There is no ‘different clause’ such as ‘!=’: You should divide the query in two: one for less than and the other one for greater. Instead of asking “all the people with different ages than 45”, you should make a query that gets all the people that are older than 45, and another one for all of those who are younger than 45, and merge them locally.
  • You can’t run a query against multiple collection or subcollections, just run it against one target: To solve this, you should create different queries for each collection and then merge them as we did in the previous point.

Continue with the query tools, you can use .limit() for limiting the number of items that the collection will bring, as the name says; and .orderBy() for specifying the name for which it will be ordered.

An example of a query which returns 10 students whose ages are over 21 and order by name

Last but not least, by using .set() you can edit the value of the elements. Also, you have .delete() to remove a doc permanently from a collection. These methods are easier to use but here I leave a code snippet as an example.

Two examples of code, one which overwrites an element and the other one deletes it

With all these methods, you can perform from simple to more complex queries and reach all the database content. But, what if you want to use triggers or special methods that affect the DB directly? Well, in those cases, Firebase has something called cloud functions.

What are cloud functions?

These functions aren’t with your regular code. These ones have to be done in another file that the Firebase-cli creates for you, which has its own build and is deployed separately. These functions give Firebase the real power it needs. If you are using Firebase without cloud functions you are only using 30% of it. It would be like using Netflix just to see a film which you can buy on youtube.

Some of the most important cloud functions’s features are:

  • You can create triggers and apply them to certain collections or
    sub-collections. And will be executed when a certain operation is produced on that collection. For example, do you want to send an email to all the users when a new game comes out? Well, you can create a trigger on the collection games that will activate when a new one is set, and in the trigger send an email to all the users. The actions this trigger can be attached to are ‘onCreate’ ‘onUpdate’ ‘onDelete’ or ‘onWrite’.
  • You can create HTTP functions as cloud functions, for them to be called like this, ‘https://us-central1-<project-id>.cloudfunctions.net/widgets/<id>’. So, from your code you can execute a cloud function using HTTP methods such as GET, POST, PUT, DELETE. Therefore you can access lambda functions from your code and get access to the full potential of cloud functions.

Keep in mind that these functions are kept in a separate file, so if you are trying to test them you’ll have to host them separately or deploy them in a secure environment for testing.

Talking about security

How can you access your own DB from code? When you create your own project, Firebase will generate a specific set of keys for you, being this ‘apiKey’, ‘authDomain’, ‘databaseUrl’, etc. All of this are the same ones that I used on the first image. With them, you can access your own DB from code with the method .initializeApp() Which will connect your local project to your Firebase environment. It is really important to keep these keys hidden and do not commit them into any repository, because with it anyone can access your DB, to prevent this, Firebase allows you to create specific rules to avoid having undesired people making queries directly into the DB, however it is always a good practice to keep your keys as secretly as possible. Furthermore, if you are insecure about these being filtered you can always regenerate them from the Firebase console in your project, leaving the previous ones deprecated. So if you need to keep a high-security measure you can be updating the keys every week or even every day in a very simple way and just using them in your code from a .env (Just remember, never upload them to any repository and generate rules on Firebase console to limit the people who can access the DB)

From my point of view

All in all, Firebase is a great service, you have everything already done but although there are some features that are a little bit rough around the edges, after the first queries you get used to it and everything works smoother and smoother. I would totally recommend it for anyone who wants to start a simple app and doesn’t want to lose time on developing the back-end. After all, Firebase gives you everything you will need and if you want even more control, cloud functions are what you are looking for. So if you are wondering on how to start a small/medium app don’t think it twice and try Firebase, you won’t regret it.

Did you like the post? Don’t doubt and leave your clap and comment below, we would really love to chat with you and hear your opinions about this.

Finally, if you would like to use Firebase but want to avoid learning it and would prefer to use it with simple HTTP methods I created an npm package called firestore-service that has a pretty neat interface. Go ahead and give stars to the repository, it will really help us out to keep improving.

Keep in mind it’s one of the first versions of the package and it will keep upgrading, so please go ahead and fill GitHub with issues and if you want to collaborate go ahead and leave a pull request, we are always looking for new developers interested in making it grow.

--

--