
Show HN: Angular 2 HN – A responsive Hacker News client built with Angular 2 - MrAwesomeSauce
https://angular2-hn.firebaseapp.com
======
cheeze
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
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
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
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.

------
MrAwesomeSauce
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
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 :)

------
MrAwesomeSauce
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
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
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
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).

~~~
boulos
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.

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

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

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)

~~~
MrAwesomeSauce
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 :(

~~~
sras-me
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](https://angular2-hn.firebaseapp.com/item/12455034)

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

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

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

~~~
MrAwesomeSauce
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.

------
baun
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
Thanks! Yep absolutely speed definitely needs work. And yeah for sure apps
like Materialistic, HackerNews-React-Native are way more fully fledged.

------
gejose
This is amazing!

~~~
MrAwesomeSauce
Cheers mate, glad you like it :)

