41–50 of 192 posts
I work for a B2B SaaS and we use Ruby on Rails with Hotwire and it's great! Almost zero JS (no Vue.js, no React, or else).
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…
old.reddit feels fast, which is why I use the Old Reddit Redirect extension.
old man alert Back in my day, we wrote ASP.NET that was all server-side-rendered HTML. Once in a while we got REAL FANCY and used JQuery to make PARTIAL HTML requests and update only FRAGMENTS of the page. Hooboy I knew that fashion was cyclical but not tech!
The script injected jQuery, then we replaced the page with HTML fragments. We had an Adobe Air installer, a Flash game and even had an RSS feed.
Funnily enough today we're mostly working towards using ESI - which reminds me of mod_include back in the day.
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…
Is “HTML over the wire” a new buzzword for SSR or is there a difference I'm missing?
Partly, but it especially means things like Phoenix LiveView[0] or htmx [1]. With these you can create SPA like experiences by sending partial html updates from the server and applying them by some light JS to the UI (which you don't have to write yourself). [0] https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html [1] https://htmx.org/
The first webapp framework I saw it in was Rails (turbolinks). I came to Rails late and didn't stay long so I was never clear how old or how broadly used that feature was. Mostly what I got from Rails was being more comfortable writing NodeJS code, which stole shamelessly from Rails.
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…
When I use apps like this - GitLab - I am struck by how much wasted user time such an approach leads to. Everything is a page refresh Send me some counter examples? Im a big SPA fan and there’s lots of good examples
Is “HTML over the wire” a new buzzword for SSR or is there a difference I'm missing?
It is rendered server side, but typically the server keeps track of only what needs to change and sends as small as possible an update to dynamically update the DOM. You end up with a user experience that feels close to an SPA, but a dev experience that feels close to traditional SSR.
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…
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)
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.
Some random tips:
- Write a "Django context processor" to inspect requests for "Hx-Request" header, and set a "base_template" variable accordingly. This means that any template that {% extends base_template %} will react to being a full page or just a fragment and you don't even have to think about that in your view logic. Great for progressive enhancement.
- You can get reactive JS elements (for example, a d3.js viz that updates when new data comes in) in a few lines of inline JS by using MutationObserver, and "abusing" HTMX by using views that return JSON targeting a element (`json_script` templatetag can also be used here). In summary, you tell your fancy JS element to render or update whenever a particular element is mutated, and all of it is orchestrated by HTMX.