Realtime support

Question

Realtime support

davideast opened this issue 8 years ago · comments

This app is awesome! I see that it uses REST requests rather than the realtime SDK. Is there a reason why you went this route?

Houssein Djirdeh · Answer 1 · Tue Sep 13 2016 05:19:12 GMT+0800 (China Standard Time)

Thank you David! Glad you like it :)

Yep that was my initial plan, but then I realized the official Firebase API requires multiple network requests to retrieve a list of items/comments which really wasn't the smoothest experience. For example: a request to get ids for the Top Stories on the front page and then run multiple requests to obtain each item's details using their id.

So I switched to an unofficial one. However I still want to include realtime bindings but not sure how I would go about this. I was thinking of statically rendering it first using the unofficial API and then maybe adding a layer for AngularFire to show the items in real time once the components have loaded. Not sure if this is feasible though. Let me know what you think and/or if you think there's an easier way around this.

David East · Answer 2 · Tue Sep 13 2016 21:29:16 GMT+0800 (China Standard Time)

Yep that was my initial plan, but then I realized the official Firebase API requires multiple network requests to retrieve a list of items/comments which really wasn't the smoothest experience.

Actually the opposite is true. The Firebase JS SDK create one HTTPS request to create a WebSocket. After the creation, all data is transported through the socket which provides low latency and a smooth experience. Using REST you currently do a network request for every item you retrieve and you are not taking advantage of the built-in caching and intermittent offline capabilities of the Firebase SDK.

I was thinking of statically rendering it first using the unofficial API and then maybe adding a layer for AngularFire to show the items in real time once the components have loaded.

You could try to do a static shell first full of placeholder data and then render the items from AngularFire2.

Houssein Djirdeh · Answer 3 · Wed Sep 14 2016 23:27:37 GMT+0800 (China Standard Time)

Hmmm okay thanks for this, using the SDK to create a WebSocket can definitely make things nice and smooth, will give this a shot.

Thanks again, appreciate the help!

Jared Szechy · Answer 4 · Mon Jun 19 2017 02:59:01 GMT+0800 (China Standard Time)

I would love realtime support like https://react-hn.appspot.com

Houssein Djirdeh · Answer 5 · Wed Jun 21 2017 03:30:53 GMT+0800 (China Standard Time)

@szechyjs agreed :). I've been thinking about how we can work with the SDK and still allow precaching of resources with the service worker. I think a possible solution would be similar to ReactHN and allow the user to trigger an offline mode which falls back to the REST API.

Jared Szechy · Answer 6 · Thu Jun 22 2017 23:48:19 GMT+0800 (China Standard Time)

@housseindjirdeh I've made several HN clones using angularfire2 and it works pretty well. I've yet to implement a service worker for them yet but this package looks promising: https://github.com/adriancarriger/angularfire2-offline

Houssein Djirdeh · Answer 7 · Tue Jun 27 2017 06:14:43 GMT+0800 (China Standard Time)

Cheers thanks @szechyjs, that package does look promising and I'll definitely take a look and see if that's something we can leverage :)