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

First Published: 23 November 2016
Updated on: 17 June 2019

I spent a good chunk of 2016 building an app with Ionic 2 and Firebase 3 and it was enjoyable and a great learning opportunity.

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

We all know the basics, like setting up our app, how to connect with Firebase, etc.

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 back-end 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.

AngularFire2:

  • 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!