8 ms·

Angular + Firebase Is RAD

46 points by mayop100 13y ago

manojlds 13y ago
I am working on this as I learn AngularJS - https://github.com/manojlds/EventBase https://github.com/manojlds/EventBase Working with Firebase has been fun, but security is hard. AngularFire is not really mature yet, too.
- joshstrange 13y ago
  > AngularFire is not really mature yet, too. I am running into this issue as well, I kind of wish I had written my own firebase service instead of using theirs because (Especially in the 0.2 release) I was seeing the app re-draw a ton of times due to the way that angularFire was loading the data. That and a bunch of little inconsistencies, like when creating an angularFireCollection you can optionally pass in a callback as the second parameter that returns your data, great if you want to assign it all at once instead of each "child_added" being fired but the object it returns is the same as is returned from a ref.once() call (As can be seen in the code for angularFireCollection) and for that not only do you need to call .val() on what is passed in to get the value but it is not an angularFireCollection, it is just Firebase data and so it rather useless as the binding does not work and you can't call the angularFireCollection methods on the returned data (like .add()). Please don't get me wrong, AngularJS is awesome and Firebase is really cool but there is learning curve and as you said angularFire isn't really mature yet. That said I am very impressed with the work being done on angularFire (and speed) so hopefully it will shape up nicely.
- mVChr 13y ago
  Yes, I thought so too when I first was looking into AngularFire. However, the point of OPs article seems to be that it's great for prototyping, not production, and that was an 'aha!' for me as to its usefulness.
- sararob 13y ago
  Thank you for your feedback (Firebase Community Manager here). We've heard from many people that AngularFire still isn't quite usable in complex Angular apps and we're working now on making some API tweaks and improving the documentation. Email me (sara@firebase.com) with specific feedback.
WhitneyLand 13y ago
The concept is RAD, in practice the Firebase learning curve sucks due to lack of good documentation of API semantics, especially w.r.t. AngularJS.
- joshstrange 13y ago
  Agreed, I really like AngularJS and Firebase and I am using them together for a client but AngularFire isn't perfect and you're correct, the documentation could be much better.
- nobodysfool 13y ago
  I was in the firebase beta, and it really was pretty simple to get a new app up and running, there was certainly good documentation. What are you referring to?
  - drhayes9 13y ago
    I can't find answers to these questions in the docs, had to stumble around with the library first: - be sure to set an empty object on your scope before setting up implicit binding on that object. If you don't, the error will be cryptic. - add the property "authRequired: true" to your routes when setting up your $routeProvider to get AngularFire to block access to that route when not authenticated. - be careful about using $scope.apply with AngularFire since you're often already in the apply cycle in its callbacks (would be nice if that were explicit).
    - joshstrange 13y ago
      This is nitpicky for sure but angularFire doesn't play nice with AngularJS 1.2's breaking out some modules (Route, Sanitize, Cookies, and 1-2 more) into separate JS files. I had to comment out all the $route stuff in angularFire so that I could get them to work together. Thankfully I am not using fireBase with my $route's so I am unaffected. Also, I'm sure some of you might point out 1.2 is still in an RC state but I needed ngAnimate and didn't want to have to re-write a bunch of code a few weeks from now when it releases it's final version.
drhayes9 13y ago
I really wanted this article to get into the meat of how to build an Angular app with Firebase. It gets the basics working but it would've been nice to see some details about Firebase security, good practices about what goes where with respect to what AngularFire provides, etc. I've only been playing around with it but I thought I'd add some ideas that are working so far for me: - Don't use your Firebase URL all over the place in your app. - DRY it up by creating an AngularJS constant for your main Firebase instance (e.g. "module.constant('baseStore', new Firebase('https://whatever.firebaseio.com'));" https://whatever.firebaseio.com'));"). - Every sub reference to the base now uses the "child" method off that baseStore object to get sub-objects (e.g. "var props = baseStore.child('props');"). - Create an auth service that your app uses instead of using the AngularFire auth libs directly. Makes it much easier to control/test your auth flow, especially if you change from "email/password" to, say, "persona". I still have some questions about the interactions between Angular and Firebase/AngularFire but maybe I'll save them for a StackOverflow question. ( =
- joshstrange 13y ago
  Couldn't agree more, I have run into the same things it appears you have and come to similar conclusions. That was what was hardest for me when getting started, there are a billion examples of how to write a chat app, a todo list, etc but none of the examples I came across had, as you call it the "meat of how to build and Angular app with Firebase". I felt like most of what I was seeing was gimmicky and had no real use (on it's own).
  - drhayes9 13y ago
    Yup. I'm also trying to learn AngularJS at the same time so the hits, they keep'a'coming. ( = It would be nice in the AngularFire documentation if they were clear what was a promise (implicit binding) and what wasn't (explicit binding). One of the things I ran into (which I hope they add to the documentation): before using implicit binding, create the object on the $scope in your controller first. Only after the empty object is on the scope should you call "angularFire(ref, $scope, 'thing');". The error that shows up if you don't do that is rather cryptic.
hixup 13y ago
I'm also working on an AngularJS + FireBase web app (http://hixup.com/#/3fKz/ http://hixup.com/#/3fKz/). I posted a 'Show HN' yesterday but it didn't get much traction. My app lets you create a simple poll where the votes and comments are updated in real time. Thanks to Firebase I could concentrate on writing client-side code only. I agree with the other commenters that the AngularFire bindings are not mature yet. The documentation is lacking in detail and I couldn't figure out how to make it work with lists in Firebase. So I ended up using the regular Firebase javascript API instead of AngularFire. You can have a look at the code here: https://github.com/dbbert/personal/tree/gh-pages https://github.com/dbbert/personal/tree/gh-pages.
yesimahuman 13y ago
AngularJS + Firebase is really incredible. I've been doing some really fun stuff with it on mobile and it really rocks there.
alexandros 13y ago
It would be good to get Firebase's Angular bindings to work decently well for top-level objects and improve their promise support. I recently worked on http://worldmap.io http://worldmap.io as a way to test a bunch of angular-related tech and the firebase bindings, while dead easy to start, were a pain as I couldn't resolve them in the routeProvider. Instead I had to do it inside the controller, which forced me to keep a bunch of boilerplate. See https://github.com/alexandrosm/worldmap/blob/master/app/scripts/controllers/main.coffee https://github.com/alexandrosm/worldmap/blob/master/app/scri... Still, a great project and concept, just has some more way to go before I'd use it in a real project. I do want to check out https://github.com/marknutter/firebase-resource https://github.com/marknutter/firebase-resource though, made by a fellow HNer and mentioned last time around.
icedog 13y ago
The AngularJS team had a few Firebase meetups several months ago. At the first event, someone from fbase showed how to create a todo app. When people asked about their backend implementation details, they didn't reveal a thing. I'm already turned off by giving up server-side control, withholding their implementation details is a huge red flag.

46 points by mayop100 13y ago

I am working on this as I learn AngularJS - https://github.com/manojlds/EventBase https://github.com/manojlds/EventBase Working with Firebase has been fun, but security is hard. AngularFire is not really mature yet, too.

joshstrange 13y ago
> AngularFire is not really mature yet, too. I am running into this issue as well, I kind of wish I had written my own firebase service instead of using theirs because (Especially in the 0.2 release) I was seeing the app re-draw a ton of times due to the way that angularFire was loading the data. That and a bunch of little inconsistencies, like when creating an angularFireCollection you can optionally pass in a callback as the second parameter that returns your data, great if you want to assign it all at once instead of each "child_added" being fired but the object it returns is the same as is returned from a ref.once() call (As can be seen in the code for angularFireCollection) and for that not only do you need to call .val() on what is passed in to get the value but it is not an angularFireCollection, it is just Firebase data and so it rather useless as the binding does not work and you can't call the angularFireCollection methods on the returned data (like .add()). Please don't get me wrong, AngularJS is awesome and Firebase is really cool but there is learning curve and as you said angularFire isn't really mature yet. That said I am very impressed with the work being done on angularFire (and speed) so hopefully it will shape up nicely.
mVChr 13y ago
Yes, I thought so too when I first was looking into AngularFire. However, the point of OPs article seems to be that it's great for prototyping, not production, and that was an 'aha!' for me as to its usefulness.
sararob 13y ago
Thank you for your feedback (Firebase Community Manager here). We've heard from many people that AngularFire still isn't quite usable in complex Angular apps and we're working now on making some API tweaks and improving the documentation. Email me (sara@firebase.com) with specific feedback.

WhitneyLand 13y ago

The concept is RAD, in practice the Firebase learning curve sucks due to lack of good documentation of API semantics, especially w.r.t. AngularJS.

joshstrange 13y ago
Agreed, I really like AngularJS and Firebase and I am using them together for a client but AngularFire isn't perfect and you're correct, the documentation could be much better.
nobodysfool 13y ago
I was in the firebase beta, and it really was pretty simple to get a new app up and running, there was certainly good documentation. What are you referring to?
- drhayes9 13y ago
  I can't find answers to these questions in the docs, had to stumble around with the library first: - be sure to set an empty object on your scope before setting up implicit binding on that object. If you don't, the error will be cryptic. - add the property "authRequired: true" to your routes when setting up your $routeProvider to get AngularFire to block access to that route when not authenticated. - be careful about using $scope.apply with AngularFire since you're often already in the apply cycle in its callbacks (would be nice if that were explicit).
  - joshstrange 13y ago
    This is nitpicky for sure but angularFire doesn't play nice with AngularJS 1.2's breaking out some modules (Route, Sanitize, Cookies, and 1-2 more) into separate JS files. I had to comment out all the $route stuff in angularFire so that I could get them to work together. Thankfully I am not using fireBase with my $route's so I am unaffected. Also, I'm sure some of you might point out 1.2 is still in an RC state but I needed ngAnimate and didn't want to have to re-write a bunch of code a few weeks from now when it releases it's final version.

drhayes9 13y ago

I really wanted this article to get into the meat of how to build an Angular app with Firebase. It gets the basics working but it would've been nice to see some details about Firebase security, good practices about what goes where with respect to what AngularFire provides, etc. I've only been playing around with it but I thought I'd add some ideas that are working so far for me: - Don't use your Firebase URL all over the place in your app. - DRY it up by creating an AngularJS constant for your main Firebase instance (e.g. "module.constant('baseStore', new Firebase('https://whatever.firebaseio.com'));" https://whatever.firebaseio.com'));"). - Every sub reference to the base now uses the "child" method off that baseStore object to get sub-objects (e.g. "var props = baseStore.child('props');"). - Create an auth service that your app uses instead of using the AngularFire auth libs directly. Makes it much easier to control/test your auth flow, especially if you change from "email/password" to, say, "persona". I still have some questions about the interactions between Angular and Firebase/AngularFire but maybe I'll save them for a StackOverflow question. ( =

joshstrange 13y ago
Couldn't agree more, I have run into the same things it appears you have and come to similar conclusions. That was what was hardest for me when getting started, there are a billion examples of how to write a chat app, a todo list, etc but none of the examples I came across had, as you call it the "meat of how to build and Angular app with Firebase". I felt like most of what I was seeing was gimmicky and had no real use (on it's own).
- drhayes9 13y ago
  Yup. I'm also trying to learn AngularJS at the same time so the hits, they keep'a'coming. ( = It would be nice in the AngularFire documentation if they were clear what was a promise (implicit binding) and what wasn't (explicit binding). One of the things I ran into (which I hope they add to the documentation): before using implicit binding, create the object on the $scope in your controller first. Only after the empty object is on the scope should you call "angularFire(ref, $scope, 'thing');". The error that shows up if you don't do that is rather cryptic.

hixup 13y ago

I'm also working on an AngularJS + FireBase web app (http://hixup.com/#/3fKz/ http://hixup.com/#/3fKz/). I posted a 'Show HN' yesterday but it didn't get much traction. My app lets you create a simple poll where the votes and comments are updated in real time. Thanks to Firebase I could concentrate on writing client-side code only. I agree with the other commenters that the AngularFire bindings are not mature yet. The documentation is lacking in detail and I couldn't figure out how to make it work with lists in Firebase. So I ended up using the regular Firebase javascript API instead of AngularFire. You can have a look at the code here: https://github.com/dbbert/personal/tree/gh-pages https://github.com/dbbert/personal/tree/gh-pages.

yesimahuman 13y ago

AngularJS + Firebase is really incredible. I've been doing some really fun stuff with it on mobile and it really rocks there.

alexandros 13y ago

It would be good to get Firebase's Angular bindings to work decently well for top-level objects and improve their promise support. I recently worked on http://worldmap.io http://worldmap.io as a way to test a bunch of angular-related tech and the firebase bindings, while dead easy to start, were a pain as I couldn't resolve them in the routeProvider. Instead I had to do it inside the controller, which forced me to keep a bunch of boilerplate. See https://github.com/alexandrosm/worldmap/blob/master/app/scripts/controllers/main.coffee https://github.com/alexandrosm/worldmap/blob/master/app/scri... Still, a great project and concept, just has some more way to go before I'd use it in a real project. I do want to check out https://github.com/marknutter/firebase-resource https://github.com/marknutter/firebase-resource though, made by a fellow HNer and mentioned last time around.

icedog 13y ago

The AngularJS team had a few Firebase meetups several months ago. At the first event, someone from fbase showed how to create a todo app. When people asked about their backend implementation details, they didn't reveal a thing. I'm already turned off by giving up server-side control, withholding their implementation details is a huge red flag.