12 ms·

Show HN: Angular 2 HN – A progressive Hacker News client that works offline

134 points by MrAwesomeSauce 10y ago

STRiDEX 10y ago
Really cool. Love angular-cli so far. Would like to see the styling from https://vue-hn.now.sh/top https://vue-hn.now.sh/top used as I think the animations are challenging to replicate in angular 2.
- MrAwesomeSauce 10y ago
  Thank you! I agree the styling could definitely use a bit of improvement, and Vue HN looks so clean so I can definitely encapsulate similar styling
- keldaris 10y ago
  Personally, I find the styling of the OP's site much better than that of Vue-HN, largely because of the higher contrast (and less over-emphasized vote counts). Might be just me, though, as I still find the vanilla HN site the best looking of all, not to mention it runs with no JS enabled, no cross site stuff, etc., and takes very little resources - the best kind of web design, in my humble opinion.
johnwheeler 10y ago
Nice work. Is the ng2 download still clocking in at ~750 KB webpacked? Restricted to mobile so no webdev tools
- andrewstuart2 10y ago
  The largest download on the page is a vendor bundle, at 93.2k gzipped (402k uncompressed). So I'm pretty sure it's not.
- MrAwesomeSauce 10y ago
  The two main bundle files (main and vendor) used to total around that number, but adding Ahead-of-Time compilation reduced them to 589 KB uncompressed and 115 KB gzipped, which was pretty cool.
- Bahamut 10y ago
  I am leading an ng2 project at work and with webpack 2 + AOT compilation, we have our app bundled in ~450 KB gzipped & minified, including polyfills (core-js, web animations, viewport buggyfill), Font Awesome (to eventually be stripped out for an svg sprite map - this takes up ~110 KB of the bundle), dependencies (socket.io, Wavesurfer, rxjs, ng2, ng-bootstrap, @ngrx/store, filepicker.js), and our application code. We definitely could do better, but we are working on a tricky project for the timeline & resources (a course management app for our LMS - features drag and drop slide rearrangement, audio recording & playback, and video playback).
vayarajesh 10y ago
Cool, I was just getting started with Angular 2 and Typescript (coming from Angular 1) and I think your example is just the perfect way to understand how an app is to be made with it :) How is angular-cli different from angular's quick start or a seed project setup ?
- MrAwesomeSauce 10y ago
  Thank you :) The CLI is just a command line interface that makes scaffolding and generating a project a lot easier. Adding new components, routes, services, etc... can be done with simple commands. Angular seed gives you a skeleton that you can start your app with, and the quick start provides a super barebones starting point with just a single AppComponent if I'm not mistaken. I personally enjoy using the CLI and haven't tried the seed myself. If you're interested in how I set up this app, I wrote a blog post (http://houssein.me/angular2-hacker-news http://houssein.me/angular2-hacker-news) detailing each and every step using the CLI so I hope it helps :) (this was done a few months ago so the progressive elements such as the Service Worker and manifest isn't included)
  - vayarajesh 10y ago
    oh the blog post would be perfect!, I will go through it. I will try to create a twitter client to get familiar with angular cli and angular 2 in general. Thanks :) Btw, I like the way blog UI and its simplicity and code-display friendly-ness, what tool/app you use for the blog? (if you don't mind sharing the details)
    - MrAwesomeSauce 10y ago
      Of course! So the blog itself is built with Jekyll (https://jekyllrb.com/ https://jekyllrb.com/) and hosted on Github Pages. This makes it easy for me to just create new posts with markdown and GitHub pages provides free hosting! I tried to keep things as minimal as possible so I'm glad you like it. For the code highlighting, I'm using Prism (http://prismjs.com/index.html http://prismjs.com/index.html)
kswahl1 10y ago
It's annoying how it scrolls to the top of the page when when you go back from article.
- MrAwesomeSauce 10y ago
  Thanks for this, I was actually thinking about this when I was playing around with the app on mobile today. Might have to limit the scroll to top only when the user is navigating between pages and not when the user goes back.
harisamin 10y ago
Shameless plug. I built a native Mac Hacker News client. Mackernews. http://mackernews.com http://mackernews.com you can login vote, comment, post, upvote in a native interface. It tries to render a reable web version of the article when possible :)
- MrAwesomeSauce 10y ago
  Cool, there a bunch of clients available but not too many that let you login and comment/upvote/etc. Thanks for sharing!
ing33k 10y ago
This looks good ! btw I am trying to learn service workers and wanted to check how you have implemented the offline support, but when I checked https://github.com/hdjirdeh/angular2-hn/blob/master/src/service-worker.js https://github.com/hdjirdeh/angular2-hn/blob/master/src/serv... it's empty .. am I missing something ?
- dkrvt 10y ago
  It's using a library to generate one on the fly: https://github.com/GoogleChrome/sw-precache https://github.com/GoogleChrome/sw-precache
- MrAwesomeSauce 10y ago
  Yep, like dkrvt mentioned I'm using sw-precache to generate the server worker file. The file in my root folder that you're seeing is sort of a placeholder which gets copied to the actual bundle folder that gets deployed (you don't see it in the GitHub repo, you'll need to build the app locally [ng build --prod] to generate it]. sw-precache then lets me run a simple command which sets up the service worker on the fly based on some simple configurations. Here's an excellent article btw that helped me understand how to set up sw-precache with an Angular CLI app (https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers https://coryrylan.com/blog/fast-offline-angular-apps-with-se...)
jamra 10y ago
Firstly, I love your app. This is kind of a nitpick, but on the desktop version, hovering over the menu options "new, show, ask, and jobs" makes the text bold and pushes the other text aside. It's a little weird. Perhaps work with a fixed width for each menu item so it doesn't push the other items.
- MrAwesomeSauce 10y ago
  Good call, that is kind of weird. Will fix it :)
- MrAwesomeSauce 10y ago
  Good call, that is kind of weird. Will fix it :)
- MrAwesomeSauce 10y ago
  Good call, that is kind of weird. Will fix it :)
- MrAwesomeSauce 10y ago
  Fixed
vbsteven 10y ago
Working offline is cool but the app feels noticably slower than the plain html version for navigating between comments and main pages. Tested on Firefox and Chrome (Android)
- MrAwesomeSauce 10y ago
  Yeah I still think there's room for improvement, and I'll be looking into different ways to make it faster (server side rendering being one of them)
pritambarhate 10y ago
Is there a hacker news client which focuses more on typography. I use official hacker news site on Web. On a Retina Mac book Pro with 13-inch screen. I find the fonts too small. Also, one major issue is the line height. Even with browser zomming, the text lines seem to be too close together. I wonder if other hacker news members also find this problematic.
- pluma 10y ago
  I'm on a plain Linux laptop with a 15-inch screen. HN is the only site which I always read at a 175% zoom.
- riffraff 10y ago
  I 100% agree, but this has been brought up often, and the powers that be do not seem to value this opinion too much.
- haar 10y ago
  I use the HackerNew Chrome extension to improve the site UI/UX: https://chrome.google.com/webstore/detail/hackernew/lgoghlndihpmbbgmbpjohilcphbfhddd https://chrome.google.com/webstore/detail/hackernew/lgoghlnd... The source can be found here: https://github.com/tommoor/HackerNew https://github.com/tommoor/HackerNew It always confuses me now when I open the site on another persons machine.
- deleted 10y ago
  [deleted]
- harisamin 10y ago
  Checkout mackernews.com I Made that app to scratch my own itch for precisely the reasons you bring up. :)
- theweirdone 10y ago
  Did you try this one: https://react-hn.appspot.com/ https://react-hn.appspot.com/
  - 10y ago
csantini 10y ago
This is well done, but it proves to me that we are not there yet with javascript really replacing mobile apps, even on a such a simple app: When you click on a news and then you go back to the ng2 app it takes more than a second to load back the js code when compared to any native HN app. This is a big limitation for a news reader: of course the javascript app cannot stay in memory when you leave the page and then come back to it.
- grav 10y ago
  Why can't it? What's keeping the browser from caching it?
- codingdave 10y ago
  That sounds more like a UX flaw in the app than something wrong with JS. Why would a newsreader close itself when you actually read the news? It makes more sense to open articles in a new tab (or whatever your specific device does), and leave the reader open, avoiding this problem. That is a fairly universal mechanism anymore when working from a page/app acting as a content hub.
WhitneyLand 10y ago
Is there any client that: - Has all features (up/down voting) - Has >= performance (apparently this one doesn't) - Has good large font support
inian 10y ago
"Progressive" HN client just ships JS without any server rendering..HN is exactly the kind of application that you would expect to work without any JS.
- MrAwesomeSauce 10y ago
  Yep, that's definitely the next thing I need to think about. I agree, this is something that needs to work with JS disabled.
lauren21247 10y ago
https://www.youtube.com/channel/UCYdf53MwhmY0roTmHddpHyw https://www.youtube.com/channel/UCYdf53MwhmY0roTmHddpHyw

134 points by MrAwesomeSauce 10y ago

Really cool. Love angular-cli so far. Would like to see the styling from https://vue-hn.now.sh/top https://vue-hn.now.sh/top used as I think the animations are challenging to replicate in angular 2.

MrAwesomeSauce 10y ago
Thank you! I agree the styling could definitely use a bit of improvement, and Vue HN looks so clean so I can definitely encapsulate similar styling
keldaris 10y ago
Personally, I find the styling of the OP's site much better than that of Vue-HN, largely because of the higher contrast (and less over-emphasized vote counts). Might be just me, though, as I still find the vanilla HN site the best looking of all, not to mention it runs with no JS enabled, no cross site stuff, etc., and takes very little resources - the best kind of web design, in my humble opinion.

johnwheeler 10y ago

Nice work. Is the ng2 download still clocking in at ~750 KB webpacked? Restricted to mobile so no webdev tools

andrewstuart2 10y ago
The largest download on the page is a vendor bundle, at 93.2k gzipped (402k uncompressed). So I'm pretty sure it's not.
MrAwesomeSauce 10y ago
The two main bundle files (main and vendor) used to total around that number, but adding Ahead-of-Time compilation reduced them to 589 KB uncompressed and 115 KB gzipped, which was pretty cool.
Bahamut 10y ago
I am leading an ng2 project at work and with webpack 2 + AOT compilation, we have our app bundled in ~450 KB gzipped & minified, including polyfills (core-js, web animations, viewport buggyfill), Font Awesome (to eventually be stripped out for an svg sprite map - this takes up ~110 KB of the bundle), dependencies (socket.io, Wavesurfer, rxjs, ng2, ng-bootstrap, @ngrx/store, filepicker.js), and our application code. We definitely could do better, but we are working on a tricky project for the timeline & resources (a course management app for our LMS - features drag and drop slide rearrangement, audio recording & playback, and video playback).

vayarajesh 10y ago

Cool, I was just getting started with Angular 2 and Typescript (coming from Angular 1) and I think your example is just the perfect way to understand how an app is to be made with it :) How is angular-cli different from angular's quick start or a seed project setup ?

MrAwesomeSauce 10y ago
Thank you :) The CLI is just a command line interface that makes scaffolding and generating a project a lot easier. Adding new components, routes, services, etc... can be done with simple commands. Angular seed gives you a skeleton that you can start your app with, and the quick start provides a super barebones starting point with just a single AppComponent if I'm not mistaken. I personally enjoy using the CLI and haven't tried the seed myself. If you're interested in how I set up this app, I wrote a blog post (http://houssein.me/angular2-hacker-news http://houssein.me/angular2-hacker-news) detailing each and every step using the CLI so I hope it helps :) (this was done a few months ago so the progressive elements such as the Service Worker and manifest isn't included)
- vayarajesh 10y ago
  oh the blog post would be perfect!, I will go through it. I will try to create a twitter client to get familiar with angular cli and angular 2 in general. Thanks :) Btw, I like the way blog UI and its simplicity and code-display friendly-ness, what tool/app you use for the blog? (if you don't mind sharing the details)
  - MrAwesomeSauce 10y ago
    Of course! So the blog itself is built with Jekyll (https://jekyllrb.com/ https://jekyllrb.com/) and hosted on Github Pages. This makes it easy for me to just create new posts with markdown and GitHub pages provides free hosting! I tried to keep things as minimal as possible so I'm glad you like it. For the code highlighting, I'm using Prism (http://prismjs.com/index.html http://prismjs.com/index.html)

kswahl1 10y ago

It's annoying how it scrolls to the top of the page when when you go back from article.

MrAwesomeSauce 10y ago
Thanks for this, I was actually thinking about this when I was playing around with the app on mobile today. Might have to limit the scroll to top only when the user is navigating between pages and not when the user goes back.

harisamin 10y ago

Shameless plug. I built a native Mac Hacker News client. Mackernews. http://mackernews.com http://mackernews.com you can login vote, comment, post, upvote in a native interface. It tries to render a reable web version of the article when possible :)

MrAwesomeSauce 10y ago
Cool, there a bunch of clients available but not too many that let you login and comment/upvote/etc. Thanks for sharing!

ing33k 10y ago

This looks good ! btw I am trying to learn service workers and wanted to check how you have implemented the offline support, but when I checked https://github.com/hdjirdeh/angular2-hn/blob/master/src/service-worker.js https://github.com/hdjirdeh/angular2-hn/blob/master/src/serv... it's empty .. am I missing something ?

dkrvt 10y ago
It's using a library to generate one on the fly: https://github.com/GoogleChrome/sw-precache https://github.com/GoogleChrome/sw-precache
MrAwesomeSauce 10y ago
Yep, like dkrvt mentioned I'm using sw-precache to generate the server worker file. The file in my root folder that you're seeing is sort of a placeholder which gets copied to the actual bundle folder that gets deployed (you don't see it in the GitHub repo, you'll need to build the app locally [ng build --prod] to generate it]. sw-precache then lets me run a simple command which sets up the service worker on the fly based on some simple configurations. Here's an excellent article btw that helped me understand how to set up sw-precache with an Angular CLI app (https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers https://coryrylan.com/blog/fast-offline-angular-apps-with-se...)

jamra 10y ago

Firstly, I love your app. This is kind of a nitpick, but on the desktop version, hovering over the menu options "new, show, ask, and jobs" makes the text bold and pushes the other text aside. It's a little weird. Perhaps work with a fixed width for each menu item so it doesn't push the other items.

MrAwesomeSauce 10y ago
Good call, that is kind of weird. Will fix it :)
MrAwesomeSauce 10y ago
Good call, that is kind of weird. Will fix it :)
MrAwesomeSauce 10y ago
Good call, that is kind of weird. Will fix it :)
MrAwesomeSauce 10y ago
Fixed

vbsteven 10y ago

Working offline is cool but the app feels noticably slower than the plain html version for navigating between comments and main pages. Tested on Firefox and Chrome (Android)

MrAwesomeSauce 10y ago
Yeah I still think there's room for improvement, and I'll be looking into different ways to make it faster (server side rendering being one of them)

pritambarhate 10y ago

Is there a hacker news client which focuses more on typography. I use official hacker news site on Web. On a Retina Mac book Pro with 13-inch screen. I find the fonts too small. Also, one major issue is the line height. Even with browser zomming, the text lines seem to be too close together. I wonder if other hacker news members also find this problematic.

pluma 10y ago
I'm on a plain Linux laptop with a 15-inch screen. HN is the only site which I always read at a 175% zoom.
riffraff 10y ago
I 100% agree, but this has been brought up often, and the powers that be do not seem to value this opinion too much.
haar 10y ago
I use the HackerNew Chrome extension to improve the site UI/UX: https://chrome.google.com/webstore/detail/hackernew/lgoghlndihpmbbgmbpjohilcphbfhddd https://chrome.google.com/webstore/detail/hackernew/lgoghlnd... The source can be found here: https://github.com/tommoor/HackerNew https://github.com/tommoor/HackerNew It always confuses me now when I open the site on another persons machine.
deleted 10y ago
[deleted]
harisamin 10y ago
Checkout mackernews.com I Made that app to scratch my own itch for precisely the reasons you bring up. :)
theweirdone 10y ago
Did you try this one: https://react-hn.appspot.com/ https://react-hn.appspot.com/
- 10y ago

csantini 10y ago

This is well done, but it proves to me that we are not there yet with javascript really replacing mobile apps, even on a such a simple app: When you click on a news and then you go back to the ng2 app it takes more than a second to load back the js code when compared to any native HN app. This is a big limitation for a news reader: of course the javascript app cannot stay in memory when you leave the page and then come back to it.

grav 10y ago
Why can't it? What's keeping the browser from caching it?
codingdave 10y ago
That sounds more like a UX flaw in the app than something wrong with JS. Why would a newsreader close itself when you actually read the news? It makes more sense to open articles in a new tab (or whatever your specific device does), and leave the reader open, avoiding this problem. That is a fairly universal mechanism anymore when working from a page/app acting as a content hub.

WhitneyLand 10y ago

Is there any client that: - Has all features (up/down voting) - Has >= performance (apparently this one doesn't) - Has good large font support

inian 10y ago

"Progressive" HN client just ships JS without any server rendering..HN is exactly the kind of application that you would expect to work without any JS.

MrAwesomeSauce 10y ago
Yep, that's definitely the next thing I need to think about. I agree, this is something that needs to work with JS disabled.

lauren21247 10y ago

https://www.youtube.com/channel/UCYdf53MwhmY0roTmHddpHyw https://www.youtube.com/channel/UCYdf53MwhmY0roTmHddpHyw