Hacker News written with Angular 2.0

http://hswolff.github.io/hn-ng2/

by hswolff • 11 years ago

47 60 11 years ago

hswolff.github.io

bikamonki• 11 years ago

Much slower, why?

Angular 2 is built for tomorrow. It uses a lot of apis either not available (and so must be shimmed which is slow) or not optimised in today's browsers.

djm_4• 11 years ago

Angular 2 is built for tomorrow.

If tomorrow means we're going to give up serving any HTML on first render and pretend that performance doesn't matter, then yes, it's built for tomorrow.

As an aside: Meteor is in the same slowly sinking boat. React is not as you can easily render server side before pushing that initial page to the client.

douche2• 11 years ago

That's kind of a waste for something like the HackerNews site. It's just dog-simple HTML. There are a handful of vanilla JS functions to run the voting buttons (at least that I can see). It seems like a use-case that would be perfect for server-side templating like Razor.

fadsasda432• 11 years ago

This is not a critique to the author, but for me, who just did classic webdev (server side templated html), this was very surprising.

I am not that into webdev, but shouldn't a page like HN be fast TODAY, as it has very basic functionality (CRUD)? I mean if this is slow, how can I expect acceptable performance from involved applications?

nperez• 11 years ago

Well, it seems to be loading data in via websockets. Compared to server-side rendering of cached data, that's not going to be performant.

gfosco• 11 years ago

Taking something simple and making it complex and limited, with Angular 2.0.

MichaelApproved4• 11 years ago

That's not the point of sample projects like these. It's to showcase what's possible with the technology and allow developers to see how something can be implemented.

The developer was having fun with the technology and showing others how it could be done. Let's encourage this type of behavior.

"I created this to see what it's like to create an AngularJS 2.0 application. I've previously experimented creating a Hacker News clone with AngularJS 1 so this was fun to play with."

13• 11 years ago

Hacker News loads in milliseconds, why does this take over 10 seconds to even start showing comments?

It's not so much a showcase as a reason to ever never use this in any product, it's obviously unsuitable for displaying even the most simple, static data without taking forever and making FireFox stutter. It's not an isolated situation with this either, other websites like this perform terribly even thought they are written in the hippest language with the most popular libraries on the market.

currysausage• 11 years ago

Let's encourage this type of behavior.

Or let's encourage using the right tools for the right applications. Let's encourage speed and simplicity as desirable goals again. Let's not do it the Google Blogger way, let's not create services that take several seconds to display few lines of text. There's a great framework for that, it's called HTML.

vezzy-fnord• 11 years ago

It seems to me like a static, form-driven server application such as HN is a pretty bad example for AngularJS, then.

jdotjdot• 11 years ago

Thanks so much for sharing this. I've been waiting a while to see something complete written in Angular 2.0 to see what it looks like.

Really enjoyed looking through the source on this.

hswolff6• 11 years ago

Glad you enjoyed! Thanks for the kind words!

insin2• 11 years ago

Seconding that, this is far more useful than another TodoMVC implementation for getting a feel for how an Angular 2 app is put together, with multiple pages, data from an API and at least one component with more complex display logic.

darthdeus• 11 years ago

This is interesting, when I opened the link I thoguht to myself "this might be a nice and faster way to browse HN" ... but wow, this thing I slow. Not just slow, but the back button isn't working as well. Or maybe it is, but it loads the whole content again when you click back?

hswolff6• 11 years ago

Something I have in my todo list is to use the new angular router (https://github.com/angular/router/) however it doesn't appear to be currently available for angular 2. See issue https://github.com/angular/router/issues/233.

mattmanser3• 11 years ago

It's based on the firebase API, that's what's probably slow.

insin2• 11 years ago

The Firebase API is pretty quick after the initial connection, here's an un-optimised React version (i.e. no shouldComponentUpdate hooks) which uses the Firebase API, for comparison: http://insin.github.io/react-hn

dheera2• 11 years ago

I think I've taken it as a given that any website that uses XHR to load parts of pages will necessarily be slow because of all the rest of the bloat (e.g. jQuery + 10 plugins + Angular) required to make the UI actually work while still keeping the code somewhat readable to the programmers. Basic HTML Gmail is also a ton faster than the normal version ...

You can however use CSS transitions effectively to make the user think the page is faster. Just have some action flying around (it's offloaded to the GPU if you're doing it "right") while things are being processed and it won't "count" towards the user's perception of page load speed.

e.g. Your HTML-only page loads in 200ms, your XHR-/Angular/jQueryified version loads in 1000ms, but you want the user to use and like the latter. Make the page dance around for the first 900 ms, and the user will "feel" that your new version loads in 100 ms. You don't want to push this "effective loading speed" all the way to 0 or else the user will become aware of your trick. Keep it at a perceptual minimum and the user will be like "Woah!"

TheLoneWolfling2• 11 years ago

You cannot just paper over everything. If you're having to resort to tricks due to inherent flaws in your application stack, it may be worth reexamining your application stack.

Also, I wondered who creates that sort of annoyance. Now I know. Having half of mobile webpages have animations all over the place only makes me go "whoa" in the sense of "whoa, how do I disable this and go back to the (relatively sane) desktop site". It doesn't make it "feel" as though it loads in 100ms instead of 1000ms. 900ms instead of 100ms, perhaps, and that's stretching it. But loading in 1/10th the time? Nope.

pdkl952• 11 years ago

Seems to be serving a broken page...

    <div class="bodyContainer">
      <hacker-news></hacker-news>
    </div>

hswolff6• 11 years ago

author here, Are you still seeing that? Can you open an issue with further details please?

pdkl952• 11 years ago

It is a mistake to assume a browser supports javascript.

Angular/meteor/etc do not generate sane output, as throwing up what is essentially an empty body tag (literally so, in some cases) is not only totally unusable outside the one use-case you have planned for, the page being generated is equivalent to a server error.

The correct solution, of course, is to render the page server side (and cache it, if you're sane), and progressively enhance any features such as XHR-style loading. Some comments later in this thread have mentioned that this might be an upcoming feature in the near future, which is great.

Without server-side rendering? That is still no excuse to serve up an empty page. Put some sort of fallback there, or a link to some alternative page. At a minimum, at least have a proper error message about how your site only only works in browsers that support javascript.

iovar• 11 years ago

That's the body before any javascript runs.

Did you really open a link about an angularjs project, with javascript disabled, just to be able to say it's broken?

lightningstorm• 11 years ago

The repeated animation for each content is very annoying. Would be better to have a single spinner for the whole page.

mambodog2• 11 years ago

An 'isomorphic' approach would really help with that first page load time. Here's one I built with isomorphic React: http://hackernewsmobile.com/

(source: https://github.com/jsdf/hacker-news-mobile)

hswolff6• 11 years ago

I agree. Server side rendering is not currently available for Angular 2.0 but it is in the queue: https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUr...

jzelinskie• 11 years ago

You throw the term 'isomorphic' around a bunch in the descriptions of this project. It would be nice if the README explained what that meant. I know what an isomorphism is, but have no idea what this means in this context.

mmmmrrrr• 11 years ago

They use the term isomorphic to mean that it is written in one language throughout the app. Typically, JS on the front and back end.

They really should be saying something like isoglossic (not a Greek scholar here) to imply that it's in the same language, instead of isomorphic, which implies a lot more than what they intend.

mambodog2• 11 years ago

If you google 'isomorphic Javascript' you'll get a bunch of hits explaining this particular (ab)use of the word, here's a good one: http://nerds.airbnb.com/isomorphic-javascript-future-web-app...

Hobotron1• 11 years ago

Doesn't work with JavaScript disabled. =P

seba_dos1• 11 years ago

That's exactly the purpose one shouldn't use Angular for.

criswell• 11 years ago

Here is a Hacker News clone done with Vue: http://yyx990803.github.io/vue-hackernews/#/news/1

I find it easier to follow if you're looking around for alternatives.

thrownaway2424• 11 years ago

The perfect indictment of Web development these days.

trustfundbaby• 11 years ago

And its better ... how?

error542• 11 years ago

Is everyone missing the point of this? It's a proof-of-concept app using an alpha[1] framework that, in a year or two, will likely be one of the dominant frameworks on the web. I for one find real examples like this much more useful than underwhelming "Todo"[2] examples. Yes, it's slow. Yes, it has lots of bugs but hell, at least the author is giving it a shot. I just hope they write a decent blog post about it with some of the lessons learned.

1- https://github.com/angular/angular/blob/master/package.json#...

2- http://todomvc.com/

Geee• 11 years ago

This is a great example why you shouldn't use a client-heavy stack for a site like HN. You could, in theory, make something that's a bit better than original HN, but it requires way more work and/or quite possibly something else than Angular.

bitwize• 11 years ago

(gruff Solid Snake voice)

The web... has changed.

ralusek2• 11 years ago

To people who are complaining that this is slow, please understand that

1. Doesn't have to do with Angular 2. Doesn't even have to do with a single page implementation

I made a really shit take on a single page reddit client, and I'm sure you'll see that the browsing experience is actually quite nice (and much faster than using native reddit). This was written in Angular 1.3, and Angular 2.0 is MUCH faster.

http://bredd.it.s3-website-us-west-1.amazonaws.com/

My point is that implemented correctly, even a content site like reddit or hackernews could work quite well with a single-page implementation. Don't blame Angular for this demo, its server responses are just impossibly slow

EugeneOZ• 11 years ago

If author see result is slow and reason is not ng2, then don't publish it. Otherwise everybody will think ng2 is slow and in next article with click-catching-title this example will be taken as proof of some "sensational" statement. Nobody will read explanations - people more trust own feelings than explanations.

Hacker News written with Angular 2.0

Related Stories