| ▲ | Doom in Django: testing the limits of LiveView at 600.000 divs/segundo(en.andros.dev) |
| 173 points by andros 4 days ago | 51 comments |
| |
|
| ▲ | kvakvs 16 hours ago | parent | next [-] |
| Since Doom renders the image with vertical columns of pixels (floor, lower wall, portal if exists continues rendering the other sector, then upper wall then ceiling) and since browsers are very good at drawing the sprites out of larger textures... You could send vertical divs shaded with the sector light level and picking the correct textures. Instead of hundreds per column you will have like 5 divs on average per column and they will be textured shaded and scaled by the browser? |
| |
| ▲ | ffsm8 15 hours ago | parent | next [-] | | I believe he stated in the beginning pretty clearly that the point of this exercise was to stress test the Liveview performance. Making this more efficient would be kinda counter productive | | |
| ▲ | omoikane 10 hours ago | parent | next [-] | | I think the proposal here is to optimize for bandwidth by minimizing number of divs, because there are fewer divs per column per frame. It might actually turn out to be more work for the browser because it has to layout the columns with divs that are not uniformly sized. | |
| ▲ | jasonjmcghee 14 hours ago | parent | prev | next [-] | | I agree, but it certainly wasn't performant (in the video). I'd be curious to see what parameters are required for a smooth / playable demo. Or am I missing something? (Slow input with no interpolation?) | | |
| ▲ | andros 14 hours ago | parent [-] | | To improve fluidity, all you have to do is change the frames per second or the resolution, although the goal is not to make it playable. :D |
| |
| ▲ | andros 13 hours ago | parent | prev [-] | | That is! |
| |
| ▲ | Jare 10 hours ago | parent | prev | next [-] | | IIRC someone did exactly that around 15 years ago, a game renderer using div strips, first with Wolfenstein and then Doom. It may have been "Jacob Seidelin" who was very active experimenting with early HTML5 tech, but I've lost all links or they've vanished from the web - I only keep two screenshots I used in a lecture back then. | |
| ▲ | oersted 13 hours ago | parent | prev [-] | | At that point just run the browser on the server and use proper cloud gaming tech to stream the screen and have low-latency interactivity. | | |
| ▲ | andros 13 hours ago | parent [-] | | If it's streaming at 60 fps, the bottleneck is in the browser, which is doing what it can :) | | |
| ▲ | maccard 9 hours ago | parent [-] | | My phone and TV can go to 120hz, and my PC can go to 240 with adaptive sync. There’s still plenty of room to improve. |
|
|
|
|
| ▲ | andypants 10 hours ago | parent | prev | next [-] |
| This is more like HTMX+websockets than phoenix liveview. - It's not stateful
- There's no html diffing
- Handlers return target+fragment instead of updating state
|
| |
| ▲ | andros 7 hours ago | parent [-] | | Each user has their ID in the backend; you can save their status... if you want. |
|
|
| ▲ | rockyj 16 hours ago | parent | prev | next [-] |
| Very impressive! Worth noting that HTMX also has a WebSocket extension - https://v1.htmx.org/extensions/web-sockets/ so one could potentially also do "live views" in more performant runtimes like JVM or Node.js |
| |
| ▲ | andros 14 hours ago | parent [-] | | My first version of Django LiveView used HTMX. WebSocket connectivity is one aspect; there is another part of logic and architecture where it falls short. | | |
| ▲ | BiteCode_dev 13 hours ago | parent [-] | | Can you tell us more? Espacially, how does they both fair with auth. | | |
| ▲ | andros 13 hours ago | parent [-] | | There is native middleware in Channels. I have it documented with a brief example in the documentation, and I also mention some security measures. |
|
|
|
|
| ▲ | crimsonnoodle58 15 hours ago | parent | prev | next [-] |
| So SSR is 50ms and LiveView is 10ms, what test was being performed to achieve these timings? Rendering a sample page or rendering doom? Also LiveView is described as "Build rich, dynamic user experiences with server-rendered HTML without writing a single line of JavaScript." and their example uses django templating to render the HTML that is returned. So what are we really measuring here? The speed up seems to solely come from WebSockets, and maybe skipping some Django middleware. Anyone care to elaborate? |
| |
| ▲ | aeonfox 14 hours ago | parent [-] | | I assume Django LiveView is directly inspired by Phoenix LiveView. It's essentially diffing template expansion on the backend and sending patches to the frontend via websockets where JS then applies the patches. Clicks and other interactions are also transmitted to the backend where state for the socket is updated and the template is reevaluated, hence completing the loop. | | |
| ▲ | andros 14 hours ago | parent [-] | | The concept is correct, but it's a bit simpler Its architecture is explained in the documentation, that's why it's so fast! | | |
| ▲ | zie 13 hours ago | parent [-] | | I looked(admittedly briefly) and couldn't find the architecture explanation in the docs here: https://django-liveview.andros.dev/docs/ | | |
| ▲ | andros 11 hours ago | parent [-] | | I apologize, I assumed the architecture would be understandable from the examples. I'll keep that in mind! | | |
| ▲ | aeonfox 2 hours ago | parent [-] | | The docs lead to a 403, but I'd be curious to know how it is simpler. I believe the Phoenix version uses Erlang iolists and immutability to make diffing more efficient, and perhaps the Django version has something similar? | | |
|
|
|
|
|
|
| ▲ | hoistbypetard 13 hours ago | parent | prev | next [-] |
| That is beautifully ridiculous! Thank you for doing that and sharing. |
| |
|
| ▲ | tomcam 5 hours ago | parent | prev | next [-] |
| Doesn't this also show that HTML/CSS performance is incredibly good on web browsers these days? |
|
| ▲ | lukevp 13 hours ago | parent | prev | next [-] |
| It definitely isn’t running at 60 fps in the video. Is this css performance or something? Or this not really running as fast as it’s stated? |
|
| ▲ | ksec 4 days ago | parent | prev | next [-] |
| In the blog post it uses "600,000 divs/second!" and "10,000 divs using its template engine" while the heading uses 600.000. I assume the difference in usage of full stop / period or comma is accidental? |
| |
|
| ▲ | agentifysh 18 hours ago | parent | prev | next [-] |
| if only i could run django on cloudflare workers guess i could run it on a dedicated server would be nice if we can get django and liveview working without a server |
| |
|
| ▲ | scop 14 hours ago | parent | prev | next [-] |
| Tangential question: is it common for frameworks to use the same name as a package from another framework? I had never heard of Django LiveView, but have used Phoenix’s Liveview and assumed that’s what it was. Not sure if I like that? I.e. does it imply some sort of endorsement or partnership? I do like that Laravel went with Livewire to distinguish it. |
| |
| ▲ | andros 13 hours ago | parent [-] | | There are two things I'm really bad at: invalidating the cache and naming frameworks. It has that name because it's very inspired. It's an adaptation of Django. | | |
| ▲ | elzbardico 11 hours ago | parent [-] | | And well done! I really prefer very descriptive names, even at the expense of originality than some ridiculous invention like "Nano Banana". | | |
| ▲ | ameliaquining 11 hours ago | parent [-] | | IIUC the "Nano Banana" name was originally used on LMArena when the model had not yet been announced; the purpose of the name was therefore to be as opaque as possible. I assume they hadn't originally intended to keep using it after the announcement, but it unexpectedly took off among users. |
|
|
|
|
| ▲ | pawelduda 18 hours ago | parent | prev | next [-] |
| Shame Phoenix LiveView is missing from the comparison |
| |
| ▲ | leobuskin 17 hours ago | parent [-] | | It's only django-related third-party packages comparison (and SSR itself), would be a bit strange to compare with a different language/stack and/or framework | | |
| ▲ | isodev 15 hours ago | parent [-] | | With focus on LiveView, I think it’s interesting to see how the runtime influences the results. Django and Phoenix have a very different concurrency model | | |
| ▲ | true_religion 2 hours ago | parent [-] | | Six years ago when I was working with a Phoenix API, we were measuring responses in microseconds on local dev machines, and under 5 ms in production with zero optimization. In comparison the identical Django app had a 50 ms floor. |
|
|
|
|
| ▲ | elzbardico 11 hours ago | parent | prev | next [-] |
| This shows how modern hardware is ridiculously powerful. |
|
| ▲ | jkhall81 10 hours ago | parent | prev | next [-] |
| When will people stop doing this and just leave Doom alone? |
| |
|
| ▲ | pallar 14 hours ago | parent | prev [-] |
| > 600.000 divs/segundo Basado |
