AngularFire List vs. Firebase Observables vs. Neither

Ionic Framework ionic-v3
1

@AaronSterling and @rapropos, I especially wanted to get your take on this, as I’ve seen and been involved in discussions in the past with both of you about this topic at some point. But, any feedback is welcome of course. If I recall correctly, both of you (definitely Aaron), have said that you consider using AngularFire List’s and Observables paired async in the HTML template is less desirable than populating fields with hand-crafted actions. I’m wondering a few things.

  1. Is this accurate?? If not, I guess 2 and 3 are moot points.
  2. Is this specific to Ionic or an overarching opinion?
  3. If not specific to Ionic and you don’t consider this an Ionic-related topic, I understand if you choose not to follow up. But, if you do follow up, why do you feel this way? I ask because I was asked the same question. I use my own actions to achieve async type results without using async in my HTML. But, when asked, all I could say was " A couple of guys on the Ionic Forum that I consider really good sources of input said so".

I hope the two of you, or 1 of the 2 of you, don’t consider it rude that I reached out to you individually. I simply value your opinions.

Any differing opinions, knowledge, etc from the community?

Thank you.

2

Hi

the things you are referring to are Angular techniques and best is to follow their guidance on how much logic to put in html expressions.

https://angular.io/guide/template-syntax

Basically, you keep the html as light a possible.

Regards

Tom

1 Like
3

Thank you, @Tommertom. Bookmarked.

4

I actually build two providers for each database provider. One provider has the generic calls – example: “delete a message” deletes both the constant-size summary that is visible in a list, and the actual message, which could be extremely long and contain attachments. The second provider is what talks to AngularFire. I do this so I could swap out Firebase for a different database if I want to change because of pricing or features. So it makes my code portable. As a result, it isn’t possible for my pages to put AngularFire in a template. They only have access to the middle-level mailbox manager.

But maybe more in the spirit of your question: I put expressive variable names in my templates, not expressions. I even avoid things like *ngIf=“example > 5”. It may look simple, but instead I use a structure like *ngIf=“exampleIsGreaterThanThreshold” and in the ts file, I test whether example is greater than the threshold, which happens to be 5. I think that leads to maximum readability and ease of change to code.

As a motto: the controller creates, and the template renders the creation.

1 Like
5

i like that approach. That piece of advice will be very helpful in the near future I think. Thanks much.

@AaronSterling, on the subject of expressions, are you saying that you consider, e.g.,

*ngFor="let example of examples | async"

the ’ | ’ to equate to an expression?

6

No, I do that all the time. I have a rule of thumb: only use the async pipe in pages, never type “subscribe.” That way, I never have an Observable still emitting because I forgot to unsubscribe. I use “subscribe” in providers, where the async pipe is not available.