Firebase Firestore Tutorial #8 - Real-time Data

Hey gang, in this Firestore tutorial I'll show you how to use the Firstore's real-time capabilities by using a method called onSnapshot.

🐱‍💻 Course Links:

[LorenMcClaflin]

I'm on #8, and I just want to thank you, Net Ninja. This is the best, most comprehensive, and easiest to follow [Firebase] tutorial series (one of the better tutorial series in general) I have found.

[prateeksmadaan]

I am waiting for the future series because being a FullStack Developer I know that many small scale startups cannot afford backend developers so they want FrontEnd Developers with Angular or any other Frontend Framework for that matter to work with Firebase as the backend ...These tutorial series are so awesome to get hang of the new firestore database...Waiting desperately for more of your content, Shaun.

[Cho]

Thanks a lot, Shaun. I have just finished writing down your tuts on my pad. I am a slow learner so I need time to digest your teaching through repeatedly replaying the lesson videos. Now I got it.

[ruslannykyforov]

Tried to make simple registration with firebase and redux after your tutorials. It was a pretty good experiance. And as I see in real-time updates data looks like redux actions, that is great. Thank you.

[O_Eduardo]

Really good series !!! I couldn't write a POC so fast without it. It's really painful to follow Firebase documentation. Thanks a lot!

[xuandeng]

man this is awesome!!! I really hope there's gonna be another series for Firebase ML

[rand]

I can't like enough times. Great video! Thanks.

[yangliu]

Can't thank you enough for your great videos!!

[abinphilip]

For those who have [data-id] issues. Id attribute value shld not start with a number.
Prepend a string on id
//render section

var tempId='Ninja'+doc.id;
li.setAttribute('data-id', tempId );


// Delete data section
var tempId
//remove appended string

 let id = tempId.slice(5, );






//Real time Listning


else if(change.type == 'removed'){
let li +change.doc.id+ ']');

cafeList.removeChild(li);

[Neil_Bergenroth_Rowing_Coach]

By the way, your video series here was excellent.

[hakunamata_tuh]

this way better than my method xD awesome!

[adeleyejeremiah]

awesome tutorial.... this is simulating the componentWillUpdate in react but this approach is awesome as well so we need not to wait use frontend library to perform realtime update

[raymondmichael]

Are you going to hook the functionality to display single list!?
If not please consider giving me some sort of direction here.

So far, you are doing great dude

[ethanaggor]

I got an error that forced a refresh when I tried to delete from the frontend because the document id started with a number. Basically, because this is a querySelector, CSS's behavior says that the attribute value cannot start with a number. Instead, it must be a string. Here is the solution on line 55:

let li =

I just used a template literal and added quotation marks around the (change.doc.id) variable

[Albertmars]

will you be doing cloud functions and hosting after this series?

[ashishkumar]

is it a good idea to rerender the list after clicking on submit button rather than using onSnapshot() method?

[Litonfiredesign]

Is there a reason why you are using loose equality checks? Highly recommended to not use those in js.
Thanks for the videos, got me up to speed on firestore.

[tesztdrupal]

There is a bug when te data-id starting with a digit - querySelector method uses CSS3 selectors for querying the DOM and CSS3 doesn't support ID selectors that start with a digit

[georgandreev]

so the point of this is to not reload the page?
if instead i would just rebuild the page it would get the "new" snapshot of the db and also build the list without the "deleted item"?

[BigyetiTechnologies]

If another user is changing data on the site, will the list update automatically? Because once the site has a lot of users it's going to work with the data on screen if it is constantly updating.