35

I am working on an Angular App, which is connected with Firebase Real-time database. I am currently using AngularFire for accessing Firebase database.

After reading Vanilla Firebase and AngularFire documentation, and after implementing some portion of my app, I saw that all the things required from Firebase database can be achieved with the help of Vanilla Firebase, without any help of AngularFire.

Also, AngularFire provides only limited number of resources as compared to Vanilla Firebase. So, why would I want to use AngularFire, instead of Vanilla Firebase, when it has many resources available with it? I cant get my head around this scenario.

What are the benefits of using AngularFire over Vanilla Firebase?

Ravi Shankar Bharti
  • 8,922
  • 5
  • 28
  • 52
  • 1
    It's not an either-or choice; you can use both. If the object and list bindings in AngularFire are useful and save you effort, you might want to use them. Doing so doesn't mean you cannot use the Firebase SDK as well. – cartant Jan 10 '17 at 20:05
  • some of the benefits i found about using AngularFire over Vanilla Firebase is binding of an angular variable with a defined path in firebase. Something that helps deal with Apply and digest cycle while updating te binded variable. But i didnt understand it completely. Can anyone shed light on that part and help me understand this. – Ravi Shankar Bharti Feb 06 '17 at 15:54
  • also where can I find more documentation for angularfire2? the examples on the firebase website should also include these – Ruben Jul 26 '17 at 15:09
  • What is Vanilla firebase? Can you provide me its link, please? – Krishna Karki Dec 22 '17 at 09:37
  • 1
    @KrishnaKarki Vanilla Firebase is just simple firebase, nothing else. Vanilla is used in case of standalone libraries. You can see Firebase official docs for this. https://firebase.google.com/docs/reference/js/ – Ravi Shankar Bharti Dec 24 '17 at 08:18
  • @KrishnaKarki Vanilla Firebase is the original firebase from google. We use vanilla term in such scenario like vanilla ice cream. angular is flavour of firebase. meaning a lib built upon firebase for doing few things in a better way as described in the ans – Dexter Apr 13 '18 at 15:16
  • In angular 13 the AngularFire 7.2 throws typescript errors [during compliation](https://github.com/angular/angularfire/issues/3090) - and when you try e.g. use explicite types like `Observable` or use `User` class - for login function - it will casue TS errors... – Kamil Kiełczewski Jan 10 '22 at 23:24
  • 1
    It looks like it is pointless to use this library at this moment: firebase have typings so you can use it directly. To opaque fb promises use `from` rxjs operator. When new wersion angular/fb appears then you must wait for this lib updates (nobody knows how long), currently it throws TS compilation erros, fb lib is quite simple bu this lib is quite complicated, poor documentation... [more here](https://github.com/angular/angularfire/issues) – Kamil Kiełczewski Jan 11 '22 at 11:02

1 Answers1

46

Angularfire

Well, angularfire is sort of a helper library. It's supposed to make your life easier by providing bindings that were created in order to make the integration between angular and firebase more seamless.

A practical example:

Developers normally need to make use of arrays in order to display data. However, firebase does not store any data in array form. Instead, it uses a JSON-like structure. That being said, to make it easier for everyone to wrap their heads around retrieving data from firebase as an array, angularfire gives you $firebaseArray(), which essentially converts the data from a certain location and returns you that same data inside of an array (a read-only pseudo-array).

Note that all of that could be accomplished by just retrieving the data manually with vanilla firebase and then converting the data you got from firebase (as an object) to an array on the client side.

You should use angularfire when it makes sense to you and if it makes your life easier. That is what it is there for. If you can accomplish everything you need by just using vanilla firebase, there's no reason to complicate things. I should also point out that you can use firebase and angularfire at the same time. As cartant mentioned in the comments, it is not an either-or choice, as both play together very well. That means that you can use vanilla firebase for more specific use cases, while utilizing angularfire for other purposes.

All in all, everything that is possible to do with angularfire is also possible with vanilla firebase, although it may require a whole bunch of extra code. In other words, angularfire is built on top of firebase and will not offer you new firebase features. Essentially, it makes using firebase with angular a lot more fun and practical.

Angularfire2

Angularfire2 is a totally different story, since it actually integrates RxJS observables and other reactive patterns with firebase, all of which are not available by default in vanilla firebase.

For the most part though, they both serve the same purpose. Angularfire2 is also an abstraction on top of firebase that provides real time bindings which were meant to facilitate the integration between firebase and angular2. Additionally, it gives you the possibility of working with firebase in a reactive way.

Luis Fernando Alves
  • 819
  • 8
  • 7
  • hm.. It looks like it is pointless to use this library at this moment: firebase have typings so you can use it directly. To opaque fb promises use `from` rxjs operator. When new wersion angular/fb appears then you must wait for this lib updates (nobody knows how long), currently it throws TS compilation erros, fb lib is quite simple bu this lib is quite complicated, poor documentation... [more here](https://github.com/angular/angularfire/issues) – Kamil Kiełczewski Jan 11 '22 at 11:05