Show HN: Angular 2 HN – A responsive Hacker News client built with Angular 2 | Hacker News Reader

Show HN: Angular 2 HN – A responsive Hacker News client built with Angular 2

angular2-hn.firebaseapp.com

Looks quite nice but it's sloooow on my android device (note 5 using AC with a gigabit line). Takes about 5-6 seconds on average compared to less than one in a web browser.

That being said, the hn interface is poor on mobile.

Thank you. And really eh? Hmmm haven't tested on an Android device throughly and it does load pretty decently on my iPhone.

But as someone already mentioned here, there definitely is some work that needs to be done to speed up the requests in general. There's quite a large transfer that happens on every page because of the way I load each item individually. I'll have to find a way to speed that up.

Honestly it is seems slow on my extremely fast MacBook Pro. In my experience, loading animations that aren't delayed by some period longer than human perception of "slow" can make reasonably performing software seem slow. Consider delaying the loading behavior until the response has taken longer than some threshold.

Very good point, I have the loading indicators show immediately if the response isn't received. Any slight internet connection issues or even just a slight stagger for the requests to complete, it'll show the loading icons.

Thanks for the suggestion. I'll consider delaying the loading behaviour so it doesn't show all the time when the app is performing normally.

As of now, the page loaded perfectly with no speed issues on a Nexus 6P.

Update: Just fixed the comment section to not load individually async. It now loads at a proper speed. A post with > 1000 comments now takes ~ 200ms and 130KB (where it used to take ~15X longer).

Appreciate all the feedback folks. I'll be updating the post pages in the next few days to do the same to make this app substantially faster.

And done. With this absolutely amazing API (https://github.com/cheeaun/node-hnapi/), items don't load individually and everything loads roughly with half the bandwidth than right here on the original site.

Not to mention that requests now get cached :)

Yeah I know, another Hacker News client? There seems to be a new one everyday.

I wanted to build one with a responsive UI that would provide a `native` feel regardless of which device you use. Decided to use Angular CLI, RxJS and Webpack to do the job.

There are definitely areas of improvement and I would love some feedback :)

For mobile I care about data usage and speed without WiFi, before native feel. This version downloads each comment in a separate request and the total is huge. Even the main page (with everything already cached) takes ~7KB on original site and ~28KB on your client.

Thank you, you're right I'm loading every item individually async from the official API. Not only are the requests unnecessarily large, it can take a while to load with a large number of comments. Definitely something to work on and fix.

Write a couple hundred lines of your favorite language and throw it up on Google App Engine. Have the code query all relevant threads/comments and store them in GAE's free memcached service. It should fall perfectly into the free tier, and if not the $300 free trial should last you a full year. Finally have the angular2 app query your GAE project directly and you should be looking at < 50 ms loads of much more efficient json data.

Wish I worked for Google, but I just like GCP (currently migrating my company's infrastructure to it).

Oh thanks for that mate will definitely look into this, especially the free tier

Thanks for the shout out, Ben! I sadly have to correct you though: our $300 free trial for all of GCP is time limited to two months. That said, you're right about App Engine and it's free tier, it goes a long way! Since Firebase is built on Google Cloud, you can easily still use Firebase for the "front end" / client, and serve it up as a json response as suggested.

Disclosure: I work on Cloud at Google.

Just fixed this. Each comment/post doesn't download through a separate request anymore. The main page now takes ~ 3.8 KB on my site, almost half of the original site :)

Would be nice if the client side state prevented the loading indicator when going back and forth on the same post. Looks nice though:)

Thank you! Yeah I was thinking that too, I need to look into caching the requests so it doesn't get hit every single time.

I finished making something like this last week [1]. It sourced stories from both Reddit and hackernews. The UI to read comments also had some nice additions. Also built with Angular2.

[1] https://sras.me/reform/#/setconfig;reddit=programming,scienc...

This is cool! Thanks for sharing. I like how you can open the comments inline. One thing I think that might be cool to add would collapse button that shows (bottom right the screen maybe?) when you open inline comments. It would be nice to collapse the comments without having to scroll all the way back up.

> It would be nice to collapse the comments without having to scroll all the way back up.

Was done like that initially. But when user collapses the inline display, it felt that the user is left at a random location, and had to scan the items to find where they left off. So I removed the link at the bottom to collapse the inline display, forcing them to use the top link. When the user collapses using the top link, the scroll position is not 'jumped', and hence the experience felt better.

Fair point, I can see how that can feel like you're left at a random location.

One other thing I noticed is that stories don't seem to load on my iPhone, but works fine on browser. Not sure why though.

>One other thing I noticed is that stories don't seem to load on my iPhone, but works fine on browser.

I am not sure (I don't have an iPhone around to test this), but it might be because there are no story sources configured in your Phone. The link I provided,

https://sras.me/reform/#/setconfig;reddit=programming,scienc...

was a config url, that included a bunch of story sources to use (subreddit and HN pages).

This config is stored in the local storage. So you don't have to use the config url next time you use the app.

You can also add subreddit and hackernews pages using the settings page. Can you please try it and let me if this is the case?

If it is not, can you please check if the log is showing any network activity (there is a log at the bottom where it shows active requests)

Okay it's not the iPhone, it's just Safari for some reason. Tried on Chrome and everything loads perfectly fine (I like the experience on mobile). I can add stories and everything no problem.

On Safari I don't see any requests and clicking add story or Reddit does nothing :(

I just tried it on Safari in my Macbook. It seems to work fine (Version 9.0.3 (11601.4.4)).

Anyway, it is alright. Thanks for all your feedback.

I found a small issue with your app. Please take a look at [1]. When the thread is too deep, the container becomes so narrow that the text becomes almost vertical.

[1] https://angular2-hn.firebaseapp.com/item/12455034

Okay weird, yeah not sure why it's happening for me.

And thanks so much for spotting that, will fix that up.

Interesting. I am contemplating the shift from Angular 1 to 2. It is so vastly different.

Yeah it's completely different. Will definitely suggest looking into it a bit before making the switch especially if you're planning to do so for a large project. There's quite a bit of overhead you most definitely would have to deal with.

GJ, this definitely looks good! Speed is OK imho, although you can feel a little delay on my device (OnePlus One).

However, I will probably stick to Materialistic (HN native Android App) for feature reasons.

Thanks! Yep absolutely speed definitely needs work. And yeah for sure apps like Materialistic, HackerNews-React-Native are way more fully fledged.

This is amazing!

Cheers mate, glad you like it :)

Reply on news.ycombinator.com