6 ms·

You don't even need a fancy "send html fragments over the wire" approach to create a better user and developer experience. Just sending full pages, server side

You don't even need a fancy "send html fragments over the wire" approach to create a better user and developer experience. Just sending full pages, server side rendered, like Hacker News and Wikipedia do is fine: Going from the HN homepage to this topic we are on: 36 KB in 5 requests. Going from the Wikipedia Homepage to an article: 824 KB in 25 requests Going from the AirBnB homepage to an apartment listing: 11.4 MB in 265 requests. Going from the Reddit homepage to a Reddit thread: 3.74 MB in 40 requests In comparison to AirBnB and Reddit, HN and Wikipedia feel blazingly fast. And I am sure the developer experience is an order of magnitude nicer as well.

jonatron 4y ago
old.reddit feels fast, which is why I use the Old Reddit Redirect extension.
- JonathanBeuys 4y ago
  Yes, I also use the old Reddit. What's funny is that the old Reddit makes use of dynamic loading of content here and there the right way. The "load more comments" of the old Reddit is nice and fast. While the "continue this thread" of the new Reddit is annoying and slow.
- SpliffnCola 4y ago
  Indeed it is; the UX/UI is also better compared to the low density of information with the new design.
- 0xblinq 4y ago
  The new Reddit is the best example of how shitty can get things when you use the fancy tool instead of the tools you need for the job.
basch 4y ago
IF you want the page to be interactive without refreshes though, you gotta do something. Unless you are advocating a completely pre-ajax web. https://en.wikipedia.org/wiki/Ajax_(programming) https://en.wikipedia.org/wiki/Ajax_(programming)
- JonathanBeuys 4y ago
  A bit of Ajax here and there is fine. Look at how HN handles it when you upvote/unvote a comment. Look at how old.reddit.com handles it when you click "load more comments" in a long thread.
  - basch 4y ago
    isnt ajax fancy sending html over the wire? or is it just the non fancy way?
    - tomjakubowski 4y ago
      It's so fancy in fact that it sends xml
    - spcebar 4y ago
      AJAX stands for Asynchronous JavaScript And XML--it was originally designed for asynchronously manipulating XML data using JavaScript because at the time, the future was XML. The act of using JavaScript to send requests is still sometimes referred to as AJAX, despite usually not dealing with XML in any way. The most common use for sending asynchronous requests is making API calls, which today generally return JSON, but you could use AJAX to load HTML and dynamically add it to the page.
      - basch 4y ago
        the person I replied to said "we dont need any of this fancy hotloading" and then gave examples of fancy hotloading, hence me asking, and pointing out the contradiction. Like you said, AJAX isnt limited to XML, and is really just referring to any use of XMLHttpRequest to hotload data whether its XML, JSON etc. I wasnt asking what ajax was. I was asking if it falls into the definition of "fancy." I think my parent proved the opposite point they meant to. old reddit and hn and wp ARE the fancy html over wire sites, and airbnb and reddit are NOT the fancy over wire sites.
    - dtech 4y ago
      AJAX was the original name for doing asynchronous Javascript calls to a server.
tshaddox 4y ago
Is that AirBnB stat including “content” stuff like images or embedded maps? It’s still worth critiquing the bandwidth spent on that stuff, of course, but it wouldn’t really be fair to include it here when the discussion is about the architecture of page transitions.
- JonathanBeuys 4y ago
  Page transitions are much faster for me on Wikipedia than on AirBnB. Whatever I click on AirBnB, I get a white screen, then some placeholders, then the placeholders one after the other get replaced by the actual content. Whatever I click on Wikipedia - its just there instantly.
  - yamtaddle 4y ago
    "Plain HTML" gmail vs. any other version. It's way faster to navigate. Remember when AJAX was supposed to make pages faster? LOL. Of course, back then we were just sending HTML to be injected, not JSON that has to be processed by 50+ Javascript functions before finally becoming HTML (or, some DOM entities, anyway).
    - IMTDb 4y ago
      > "Plain HTML" gmail vs. any other version. It's way faster to navigate. And offers far less features. Attaching a file to an email takes ages without drag and drop, this alone is worth waiting few more milliseconds to most people (Gmail loads in less than 2 seconds on my crappy hotel wifi)
      - radiator 4y ago
        It is not milliseconds on older devices and network is not always the bottleneck Most of the time you read e-mails, not write them. When you write e-mails, most of the time you don't need multiple attachments. The first attachment is reasonably fast to add.
  - IMTDb 4y ago
basicallybones 4y ago
Frontend frameworks developed in response to the need to develop/maintain very complex browser-based applications like Facebook across a large team of developers. AirBnB/Reddit have dramatically more complex user behavior and are much more input- and media-oriented. You cannot wait on round trips to the server for user interactions, and you cannot just do hybrid client/server the old jQuery way on big applications because you get spaghetti code. Comparing Reddit and Wikipedia is like comparing a motorcycle to a bicycle. They are different, with specific strengths and weaknesses. Both design/engineering paradigms have a place, imo.
- enraged_camel 4y ago
  Yeah, I cannot even begin to imagine what it would be like to develop AirBnb without some sort of front end framework. I used to write pure JS and jquery back in the day, and it was super easy to end up with a rat’s nest of spaghetti code. And those apps were several orders of magnitude less complex!
  - 0xblinq 4y ago
    The alternative to SPA frameworks is not spaghetti jquery and vanilla js and full page reloads. As mentioned everywhere around this thread, the way to do server side rendered apps has also evolved. Hotwire, htmx, Unpoly, Livewire, etc, etc, etc.
- jibe 4y ago
  You cannot wait on round trips to the server for user interactions Old Reddit still works fine, and I’d argue better than new front end heavy Reddit. You are right it may be for the benefit developers, but Reddit isn’t complicated enough that a heavy front end provides much benefit to the users.
  - BizarreByte 4y ago
    Old Reddit is significantly faster than new Reddit and I found it far nicer to use, but people in general didn’t like the “old, clunky” UI. Old Reddit was much maligned for how how it looked compared to modern sites.
keizo 4y ago
I’ve been working on a note taking app exactly because of this. https://grugnotes.com https://grugnotes.com I can load 3 years of notes on a single page 100kb.
_Donny 4y ago
I am incredibly annoyed by slow websites. I noticed that I have started using my browser in a very asynchronous way where I open multiple tabs, do a single action, and move to the next one. When I get to my last tab, the first is hopefully ready. For instance, on GCP, I: 0. Open 2 tabs for a 2 google cloud instance 1. For each tab, I click on the action I want. E.g Logs, deployment, and networking. 2. Then, for each tab again, I click on the nested action I want 3. Repeat step 2 It might sound like a lot, but each click easily takes 5-10 seconds, which is an excruciatingly long time if you spend a lot of day on that site -- and yes, it takes just as long doing it sequentially. Furthermore, I usually use fairly capable machines, so performance should not be an issue IMHO. It does not happen on all sites, and I know GCP is a very complex site, but it happens often enough that it has become a habbit to me. I love sites like Wikipedia or HN where everything is snappy.
phiy 4y ago
This disregards the business model behind the companies. There are no transactions for wikipedia or hacker news. Both AirBnB and Reddit are incentived to collect a massive amount of data on their users and to maximize the experience in any way possible. They need the data to understand user behavior and feed it back into the recommendation algorithms. For both hospitality and social media, users look for images/video content since it is much more powerful than text for most people. All of their competitors have equally bad performance for similar reasons, so they don't lose a competitive edge. Hacker news specifically goes for a retro look with an interface that has not changed significantly in decades. Wikipedia simply doesn't have the money or engineering capacity to support a more robust platform like airbnb or reddit.
bradgessler 4y ago
I did a similar test on news websites at https://legiblenews.com/speed https://legiblenews.com/speed about 6 months ago that made the rounds here. It’s insane how many MB some news sites push over the wire and the number of requests they make from ads and other JS “features” that should be a few hundred KB.
nicbou 4y ago
Too much of the web is developed on fast machines with fast internet and high quality monitors. I spend a lot of time in trains, hotels and airports, and I carry a 2017 12" MacBook. It strongly influences how I build websites. It's infuriating to wait for pure content to load because it's tied to a bunch of crap that isn't what you want to read. In that context, developer docs are often the best kind of websites.

jonatron 4y ago

old.reddit feels fast, which is why I use the Old Reddit Redirect extension.

JonathanBeuys 4y ago
Yes, I also use the old Reddit. What's funny is that the old Reddit makes use of dynamic loading of content here and there the right way. The "load more comments" of the old Reddit is nice and fast. While the "continue this thread" of the new Reddit is annoying and slow.
SpliffnCola 4y ago
Indeed it is; the UX/UI is also better compared to the low density of information with the new design.
0xblinq 4y ago
The new Reddit is the best example of how shitty can get things when you use the fancy tool instead of the tools you need for the job.

basch 4y ago

IF you want the page to be interactive without refreshes though, you gotta do something. Unless you are advocating a completely pre-ajax web. https://en.wikipedia.org/wiki/Ajax_(programming) https://en.wikipedia.org/wiki/Ajax_(programming)

JonathanBeuys 4y ago
A bit of Ajax here and there is fine. Look at how HN handles it when you upvote/unvote a comment. Look at how old.reddit.com handles it when you click "load more comments" in a long thread.
- basch 4y ago
  isnt ajax fancy sending html over the wire? or is it just the non fancy way?
  - tomjakubowski 4y ago
    It's so fancy in fact that it sends xml
  - spcebar 4y ago
    AJAX stands for Asynchronous JavaScript And XML--it was originally designed for asynchronously manipulating XML data using JavaScript because at the time, the future was XML. The act of using JavaScript to send requests is still sometimes referred to as AJAX, despite usually not dealing with XML in any way. The most common use for sending asynchronous requests is making API calls, which today generally return JSON, but you could use AJAX to load HTML and dynamically add it to the page.
    - basch 4y ago
      the person I replied to said "we dont need any of this fancy hotloading" and then gave examples of fancy hotloading, hence me asking, and pointing out the contradiction. Like you said, AJAX isnt limited to XML, and is really just referring to any use of XMLHttpRequest to hotload data whether its XML, JSON etc. I wasnt asking what ajax was. I was asking if it falls into the definition of "fancy." I think my parent proved the opposite point they meant to. old reddit and hn and wp ARE the fancy html over wire sites, and airbnb and reddit are NOT the fancy over wire sites.
  - dtech 4y ago
    AJAX was the original name for doing asynchronous Javascript calls to a server.

tshaddox 4y ago

Is that AirBnB stat including “content” stuff like images or embedded maps? It’s still worth critiquing the bandwidth spent on that stuff, of course, but it wouldn’t really be fair to include it here when the discussion is about the architecture of page transitions.

JonathanBeuys 4y ago
Page transitions are much faster for me on Wikipedia than on AirBnB. Whatever I click on AirBnB, I get a white screen, then some placeholders, then the placeholders one after the other get replaced by the actual content. Whatever I click on Wikipedia - its just there instantly.
- yamtaddle 4y ago
  "Plain HTML" gmail vs. any other version. It's way faster to navigate. Remember when AJAX was supposed to make pages faster? LOL. Of course, back then we were just sending HTML to be injected, not JSON that has to be processed by 50+ Javascript functions before finally becoming HTML (or, some DOM entities, anyway).
  - IMTDb 4y ago
    > "Plain HTML" gmail vs. any other version. It's way faster to navigate. And offers far less features. Attaching a file to an email takes ages without drag and drop, this alone is worth waiting few more milliseconds to most people (Gmail loads in less than 2 seconds on my crappy hotel wifi)
    - radiator 4y ago
      It is not milliseconds on older devices and network is not always the bottleneck Most of the time you read e-mails, not write them. When you write e-mails, most of the time you don't need multiple attachments. The first attachment is reasonably fast to add.
- IMTDb 4y ago

basicallybones 4y ago

Frontend frameworks developed in response to the need to develop/maintain very complex browser-based applications like Facebook across a large team of developers. AirBnB/Reddit have dramatically more complex user behavior and are much more input- and media-oriented. You cannot wait on round trips to the server for user interactions, and you cannot just do hybrid client/server the old jQuery way on big applications because you get spaghetti code. Comparing Reddit and Wikipedia is like comparing a motorcycle to a bicycle. They are different, with specific strengths and weaknesses. Both design/engineering paradigms have a place, imo.

enraged_camel 4y ago
Yeah, I cannot even begin to imagine what it would be like to develop AirBnb without some sort of front end framework. I used to write pure JS and jquery back in the day, and it was super easy to end up with a rat’s nest of spaghetti code. And those apps were several orders of magnitude less complex!
- 0xblinq 4y ago
  The alternative to SPA frameworks is not spaghetti jquery and vanilla js and full page reloads. As mentioned everywhere around this thread, the way to do server side rendered apps has also evolved. Hotwire, htmx, Unpoly, Livewire, etc, etc, etc.
jibe 4y ago
You cannot wait on round trips to the server for user interactions Old Reddit still works fine, and I’d argue better than new front end heavy Reddit. You are right it may be for the benefit developers, but Reddit isn’t complicated enough that a heavy front end provides much benefit to the users.
- BizarreByte 4y ago
  Old Reddit is significantly faster than new Reddit and I found it far nicer to use, but people in general didn’t like the “old, clunky” UI. Old Reddit was much maligned for how how it looked compared to modern sites.

keizo 4y ago

I’ve been working on a note taking app exactly because of this. https://grugnotes.com https://grugnotes.com I can load 3 years of notes on a single page 100kb.

_Donny 4y ago

I am incredibly annoyed by slow websites. I noticed that I have started using my browser in a very asynchronous way where I open multiple tabs, do a single action, and move to the next one. When I get to my last tab, the first is hopefully ready. For instance, on GCP, I: 0. Open 2 tabs for a 2 google cloud instance 1. For each tab, I click on the action I want. E.g Logs, deployment, and networking. 2. Then, for each tab again, I click on the nested action I want 3. Repeat step 2 It might sound like a lot, but each click easily takes 5-10 seconds, which is an excruciatingly long time if you spend a lot of day on that site -- and yes, it takes just as long doing it sequentially. Furthermore, I usually use fairly capable machines, so performance should not be an issue IMHO. It does not happen on all sites, and I know GCP is a very complex site, but it happens often enough that it has become a habbit to me. I love sites like Wikipedia or HN where everything is snappy.

phiy 4y ago

This disregards the business model behind the companies. There are no transactions for wikipedia or hacker news. Both AirBnB and Reddit are incentived to collect a massive amount of data on their users and to maximize the experience in any way possible. They need the data to understand user behavior and feed it back into the recommendation algorithms. For both hospitality and social media, users look for images/video content since it is much more powerful than text for most people. All of their competitors have equally bad performance for similar reasons, so they don't lose a competitive edge. Hacker news specifically goes for a retro look with an interface that has not changed significantly in decades. Wikipedia simply doesn't have the money or engineering capacity to support a more robust platform like airbnb or reddit.

bradgessler 4y ago

I did a similar test on news websites at https://legiblenews.com/speed https://legiblenews.com/speed about 6 months ago that made the rounds here. It’s insane how many MB some news sites push over the wire and the number of requests they make from ads and other JS “features” that should be a few hundred KB.

nicbou 4y ago

Too much of the web is developed on fast machines with fast internet and high quality monitors. I spend a lot of time in trains, hotels and airports, and I carry a 2017 12" MacBook. It strongly influences how I build websites. It's infuriating to wait for pure content to load because it's tied to a bunch of crap that isn't what you want to read. In that context, developer docs are often the best kind of websites.