5 ms·

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

40 points by MrAwesomeSauce 10y ago

MrAwesomeSauce 10y ago
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 :)
- viraptor 10y ago
  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.
  - MrAwesomeSauce 10y ago
    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.
    - ben_jones 10y ago
      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).
      - MrAwesomeSauce 10y ago
        Oh thanks for that mate will definitely look into this, especially the free tier
      - boulos 10y ago
        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.
  - MrAwesomeSauce 10y ago
    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 :)
- zackify 10y ago
  Would be nice if the client side state prevented the loading indicator when going back and forth on the same post. Looks nice though:)
  - MrAwesomeSauce 10y ago
    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.
gejose 10y ago
This is amazing!
- MrAwesomeSauce 10y ago
  Cheers mate, glad you like it :)
cheeze 10y ago
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.
- MrAwesomeSauce 10y ago
  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.
  - eyelidlessness 10y ago
    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.
    - MrAwesomeSauce 10y ago
      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.
  - RomanAlexander 10y ago
    As of now, the page loaded perfectly with no speed issues on a Nexus 6P.
IndianAstronaut 10y ago
Interesting. I am contemplating the shift from Angular 1 to 2. It is so vastly different.
- MrAwesomeSauce 10y ago
  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.
sras-me 10y ago
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,science,askscience;hackernews=topstories,beststories,askstories,showstories https://sras.me/reform/#/setconfig;reddit=programming,scienc...
- MrAwesomeSauce 10y ago
  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.
  - sras-me 10y ago
    > 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.
    - MrAwesomeSauce 10y ago
      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.
      - sras-me 10y ago
        >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,science,askscience;hackernews=topstories,beststories,askstories,showstories 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)
baun 10y ago
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.
- MrAwesomeSauce 10y ago
  Thanks! Yep absolutely speed definitely needs work. And yeah for sure apps like Materialistic, HackerNews-React-Native are way more fully fledged.
MrAwesomeSauce 10y ago
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.
- MrAwesomeSauce 10y ago
  And done. With this absolutely amazing API (https://github.com/cheeaun/node-hnapi/ 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 :)

viraptor 10y ago
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.
- MrAwesomeSauce 10y ago
  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.
  - ben_jones 10y ago
    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).
    - MrAwesomeSauce 10y ago
      Oh thanks for that mate will definitely look into this, especially the free tier
    - boulos 10y ago
      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.
- MrAwesomeSauce 10y ago
  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 :)
zackify 10y ago
Would be nice if the client side state prevented the loading indicator when going back and forth on the same post. Looks nice though:)
- MrAwesomeSauce 10y ago
  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.

gejose 10y ago

This is amazing!

MrAwesomeSauce 10y ago
Cheers mate, glad you like it :)

cheeze 10y ago

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.

MrAwesomeSauce 10y ago
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.
- eyelidlessness 10y ago
  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.
  - MrAwesomeSauce 10y ago
    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.
- RomanAlexander 10y ago
  As of now, the page loaded perfectly with no speed issues on a Nexus 6P.

IndianAstronaut 10y ago

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

MrAwesomeSauce 10y ago
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.

sras-me 10y ago

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,science,askscience;hackernews=topstories,beststories,askstories,showstories https://sras.me/reform/#/setconfig;reddit=programming,scienc...

MrAwesomeSauce 10y ago
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.
- sras-me 10y ago
  > 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.
  - MrAwesomeSauce 10y ago
    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.
    - sras-me 10y ago
      >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,science,askscience;hackernews=topstories,beststories,askstories,showstories 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)

baun 10y ago

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.

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

MrAwesomeSauce 10y ago

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.

MrAwesomeSauce 10y ago
And done. With this absolutely amazing API (https://github.com/cheeaun/node-hnapi/ 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 :)