5 ms·

Kudos for effort, but for the life of me I cannot understand why the hell is "load empty shell of a page and then asynchronously fetch bits and pieces of conten

Kudos for effort, but for the life of me I cannot understand why the hell is "load empty shell of a page and then asynchronously fetch bits and pieces of content, ruining the UI along the way" is so prevalent these days.

nso 11y ago
I know how you feel. I live in Mexico now, and the internet connections in these parts are terrible. It's given me a whole new perspective after coming from cheap 100 mbit back home. Sometimes I get confused with pages like this, only to later realize that the main content wasn't loaded yet.
- ChrisDutrow 11y ago
  Can be fixed pretty easily with a "loading..." message, but I guess no ones going to fix something they don't know is broken (since the developer will be using fast internet)
dkopi 11y ago
That's how a basic angular.js app with client side templating works if it has to fetch the the data from the server using AJAX calls. A common optimization would be to preload the served javascript with the initial AJAX results. This still means rendering the content on the client side, but the content isn't fetched asynchronously. Another optimization is to actually render all the DOM elements in advance on the server, and only use client side rendering for updates.
- anton_gogolev 11y ago
  This, I assume, is all done because 99% of web sites are trivially done with server-side HTML generation and that is not hipstery enough.
  - mipmap04 11y ago
    There's not a lot of love for server-side generated content in the start up community right now, but it makes things a lot easier most of the time.
    - spiderfarmer 11y ago
      And better.
  - mason55 11y ago
    It's not a matter of being "hipstery", the drawback is that each time you refresh the view you have to resend all the markup. You're increasing the total amount of data that's going back and forth between the browser and the server. By sending the markup once and then dynamically populating it you can have much faster transitions between objects that use the same view. What you really want to do is provide progressive enhancement where the first thing a user sees is usable and then more features become available without disrupting whatever the user has started doing (e.g. don't reflow the page while they're trying to read or browse). One way to achieve this is rendering the initial view on the server side and then doing updates via AJAX request but this has meant writing your rendering code twice, once on the server side and once on the client side. This is a reason that node.js and isomorphic JavaScript in general have become so popular.
    - anton_gogolev 11y ago
      Oh give me a break. > ...the drawback is that each time you refresh the view you have to resend all the markup. You're increasing the total amount of data that's going back and forth between the browser and the server. For like 99.9% of applications this is a non-issue. For crying out loud, StackOverflow itself has been doing server-side rendering since day one and is still heaps and bounds more usable than WhateverTheHellIsTrendingOnHn.js-based single page isomorphic rich web applications. It might be my age showing, but, while completely agreeing with you on "progressive enhancement all the way", I find that too freakin' much resources nowadays are spent doing and re-doing and re-inventing something that was working fine in the first place.
- uberneo 11y ago
  You can use ng-if="results" for your result div and this will only display the div only when the $scope.results have got the values from AJAX call
- Mahn 11y ago
  > Another optimization is to actually render all the DOM elements in advance on the server, and only use client side rendering for updates. Which is, you know, how the web is supposed to work.
  - plugnburn 11y ago
    Was. 15 years ago.
nyan4 11y ago
It's terrible indeed, and it works only if javascript is enabled.
- plugnburn 11y ago
  Why would anyone disable it these days?
grrowl 11y ago
Isomorphic/universal React just about solves this. Taken all the way, you get the full UI and clickable navigation links before any javascript loads.
- l1n 11y ago
  Or progressive enhancement.
- bpicolo 11y ago
  It's also a totally reasonable pattern to template the constant UI parts of the page in the backend (and not have to necessarily fetch user sessions in the frontend), and then just render the fun bits with React. The user isn't going to get a literal blank page this way. I think this is a pretty happy medium actually.
plugnburn 11y ago
Are you on GPRS? Cause the page loads fine even on 7Mbit 3G (HSPA). The problem is it's still quite raw and full of demo-stuff. Not in the way it loads. Although... yes, isn't Angular a bit overkill here?

nso 11y ago

I know how you feel. I live in Mexico now, and the internet connections in these parts are terrible. It's given me a whole new perspective after coming from cheap 100 mbit back home. Sometimes I get confused with pages like this, only to later realize that the main content wasn't loaded yet.

ChrisDutrow 11y ago
Can be fixed pretty easily with a "loading..." message, but I guess no ones going to fix something they don't know is broken (since the developer will be using fast internet)

dkopi 11y ago

That's how a basic angular.js app with client side templating works if it has to fetch the the data from the server using AJAX calls. A common optimization would be to preload the served javascript with the initial AJAX results. This still means rendering the content on the client side, but the content isn't fetched asynchronously. Another optimization is to actually render all the DOM elements in advance on the server, and only use client side rendering for updates.

anton_gogolev 11y ago
This, I assume, is all done because 99% of web sites are trivially done with server-side HTML generation and that is not hipstery enough.
- mipmap04 11y ago
  There's not a lot of love for server-side generated content in the start up community right now, but it makes things a lot easier most of the time.
  - spiderfarmer 11y ago
    And better.
- mason55 11y ago
  It's not a matter of being "hipstery", the drawback is that each time you refresh the view you have to resend all the markup. You're increasing the total amount of data that's going back and forth between the browser and the server. By sending the markup once and then dynamically populating it you can have much faster transitions between objects that use the same view. What you really want to do is provide progressive enhancement where the first thing a user sees is usable and then more features become available without disrupting whatever the user has started doing (e.g. don't reflow the page while they're trying to read or browse). One way to achieve this is rendering the initial view on the server side and then doing updates via AJAX request but this has meant writing your rendering code twice, once on the server side and once on the client side. This is a reason that node.js and isomorphic JavaScript in general have become so popular.
  - anton_gogolev 11y ago
    Oh give me a break. > ...the drawback is that each time you refresh the view you have to resend all the markup. You're increasing the total amount of data that's going back and forth between the browser and the server. For like 99.9% of applications this is a non-issue. For crying out loud, StackOverflow itself has been doing server-side rendering since day one and is still heaps and bounds more usable than WhateverTheHellIsTrendingOnHn.js-based single page isomorphic rich web applications. It might be my age showing, but, while completely agreeing with you on "progressive enhancement all the way", I find that too freakin' much resources nowadays are spent doing and re-doing and re-inventing something that was working fine in the first place.
uberneo 11y ago
You can use ng-if="results" for your result div and this will only display the div only when the $scope.results have got the values from AJAX call
Mahn 11y ago
> Another optimization is to actually render all the DOM elements in advance on the server, and only use client side rendering for updates. Which is, you know, how the web is supposed to work.
- plugnburn 11y ago
  Was. 15 years ago.

nyan4 11y ago

It's terrible indeed, and it works only if javascript is enabled.

plugnburn 11y ago
Why would anyone disable it these days?

grrowl 11y ago

Isomorphic/universal React just about solves this. Taken all the way, you get the full UI and clickable navigation links before any javascript loads.

l1n 11y ago
Or progressive enhancement.
bpicolo 11y ago
It's also a totally reasonable pattern to template the constant UI parts of the page in the backend (and not have to necessarily fetch user sessions in the frontend), and then just render the fun bits with React. The user isn't going to get a literal blank page this way. I think this is a pretty happy medium actually.

plugnburn 11y ago

Are you on GPRS? Cause the page loads fine even on 7Mbit 3G (HSPA). The problem is it's still quite raw and full of demo-stuff. Not in the way it loads. Although... yes, isn't Angular a bit overkill here?