About to build out app in Ionic+Angular+Firebase

Hi all! I have been following Ionic since v1 or 2 and I have to say, I am impressed with the documentation and the community so far! We have decided to move away from Xamarin+Azure and go Ionic v6 + Angular v13 route with Firebase backend. To be honest, the lack of support for simple plugins like media was getting very bad at MS in the recent years. We are more focused on building out our app so it can be used fully offline and have sync with firebase when connected. Any pointers or resources you could provide? So far the documentation and example apps have helped us understand the framework. Our previous backend discoveries took us to MongoDB Realm but lacked documentation/support for Angular. Thank you again, hope you all had a great weekend!

Hey there,

If you’re working with Angular and want to add Firebase one good place to start is the @angular/fire documentation.

AngularFire is a wrapper on top of the Firebase Web SDK that makes things a lot simpler when you’re working with Angular, providing Observables and handling zone-related issues so that you don’t have to run NgZone when trying to display data to the screen.

Also, I’ve been working with Ionic/Firebase since v1 so if there are questions you have do let me know, happy to help, you can ping me on Twitter as @javebratt.

3 Likes

Thanks! We already checked out Angular Fire and have been digging through it including the fire UI examples. I will definitely keep you in mind for questions!

1 Like

Josh Morony’s blogs have helped me a lot too - even though some may be old

Besides angularfire, I have found the firebase docs very good

Jave did not mention his own goodies which are very useful too https://jsmobiledev.com/

U may want to study NX by Nrwl before starting. This may boost productivity a lot. Josh has some nice Youtube videos on it

And u may want to understand importance of state management - not sure how that is done in Xamarin, but a common pitfall for some. Josh also touches this which can serve very well as introduction

And the Tour of Heroes example is mandatory learning (angular.io) :grinning:

1 Like

Thank you! I looked up NX before and it seems great but we are going a different route. We are choosing to not do shared components. I’m sure it works great for larger companies. I’ll look up Jave and Josh thanks. I agree, we are going to be using state management in the app and hope to have it planned out soon.

1 Like

Simon’s also got you covered in this YouTube video: Build Your First Ionic App with Firebase using AngularFire 7

Do you plan to use Cloud Firestore or Realtime Database?

1 Like

Thank you! Yes we are planning on using firestore but things may change in our planning stage. The biggest feature we are in need is full offline support. Our app is used offline in many scenarios.

1 Like

Plse be aware that persistent storage in Firebase is not intended for real offline mode. Only for flaky connections and short times of bad connections.

If you need full offline storage for your app, you need to use Ionic Storage (IndexDB) and/or Capacitor sqlite plugins

1 Like

Thanks. I had a feeling that was the case. We looked at Mongo Realm as a possible solution but that might be the same situation. Was hoping to not build out a offline sync situation but it looks like we will have to. Unless you know of a solution already out there? Eventually we would want to build one in house but we are time constrained right now.

Found this as a nice way of viewing client side storage for PWAs GitHub - pubkey/client-side-databases: An implementation of the exact same app in Firestore, AWS Datastore, PouchDB, RxDB and WatermelonDB. Maybe a PouchDB with firestore as the backend might be the right approach.

Is it going to be in capacitor? Or stay in web like pwa?

If it is capacitor why add layers if u can do with sqlite key-value store?

I have no experience with the others, but they seem interesting

Edit: Forgot u mentioned u want syncing

Yes, Sorry its for PWA only. We are going away from Native as mentioned in the original post. It looks like Mongo Realm does not have Angular documentation or support yet from what I can tell and you are right, Firebase is not offline first capable. We might just have to build our own client side db and implement it with firebase for syncing when online as a web worker. I was hoping to have a all in one solution, but that seems too good to be true from my research unless you use react or other frontend frameworks.

1 Like

Max’s course on Udemy covers everything…

Ionic - Build iOS, Android & Web Apps with Ionic & Angular | Udemy

Also, similar course by Baljeet Singh…

Ionic 4 - Build PWA and Mobile Apps with Angular | Udemy

1 Like

@lazmeister It would be educational for others if you can share parts of your development journey in the forum too

1 Like

Yes, I will post here once I have the final outcome/decision on what we are using. So far I see us using Ionic v6 for frontend with Angular v13, Firebase v9 (Angularfire v7) for database/authentication/image storage.

Was able to skin up the UI (20 pages or so) with Ionic v6 in less than 2 weeks (4-6 hours a day) almost effortlessly. Very impressed with the documentation (except some advanced navigation via tabs).