Copy the 5 hacks I use when building Ionic and Firebase mobile apps

Libraries and Versions

Last Reviewed: Sep 13, 2020

I spend a good chunk of my time building apps with Ionic and Firebase and it is enjoyable and a great learning opportunity.

Today I want to write a little less technical than usual and dive into 5 "hacks" that will let you work better with Ionic and Firebase.

Today we'll check out things like AngularFire and transactions.

5 Ionic and Firebase hacks

Transactions

Transactions are awesome, let's say you are updating points in a basketball game, every time you hit the button it adds 2 points to the team, but you are not the only one that's doing it, a coworker is also updating, so there's a chance that you're both overriding each other's inputs.

Use the transactions feature when working with complex data that could be corrupted by concurrent updates.

For example:

function toggleStar(postRef, uid) {
  postRef.child(uid).transaction(function (post) {
    post.votes += 1;
    return post;
  });
}

That snippet makes sure that if you're up-voting a post and other people are doing it, you always get the correct result.

Providers

Providers help keep your data logic separated from your views, and I use them for connecting and managing the data with Firebase because, in the strange event that I might want to migrate someplace else, all I have to do is update those providers.

For example:

If I need to create a record in my database, I won't create it from the Page itself. Instead, I'll create a provider that handles it, and then I'll call that provider from that page (and any other pages I need it)

So, inside my page I can just do:

this.myProvider.coolFunction();

See? My Page doesn't care how the record is created, that's the provider, if I move from Firebase to my backend nothing will change in my page, I'll just need to update my provider.

AngularFire

This is a must for me, the folks at firebase created a special library to integrate your Angular/Ionic projects to Firebase much much easier.

@angular/fire:

Observable based: Meaning it uses the power of rxjs, Angular and Firebase.
Real-time bindings: Synchronize database collections as objects or lists.
Authentication: Monitor authentication state in real-time.

Understanding DATA

All Firebase database data is stored as JSON objects. There are no tables or records. When we add data to the JSON tree, it becomes a key in the existing JSON structure.

This was the hardest part for me because I was used to PostgreSQL where there are tables and relationships, so before jumping into writing code, I suggest you take 10 minutes to read about firebase data here.

Understanding Security

Security is a huge topic, and it's essential. Traditionally, it has been one of the most challenging parts of app development.

Firebase makes it a whole lot easier to secure your app. They take care of some parts entirely, like managing your users' passwords.

For everything else, they created a declarative language for securing your data.

You can read more about it here.

Am I missing something you think could be an excellent hack? Leave a comment below and let me know!