Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

An experiment in UI density created with Svelte

cybernetic.dev

Post reply on HN
Print view View original

161–170 of 267 posts

Re: An experiment in UI density created with Svelte

#161

Post by anonymoushn »

solardev wrote: post #96
mhh__ wrote: post #80

I work have built some dense UI for certain types of fixed income (bonds and swaps) trading, looking to move it all to svelte because react cannot handle the quantities of data (and if even if it could the code is unbelievably ugly). Something I've been banging on about for a while is the following: Programmers and designers keep trying to rebuild instagram in every domain, pretty UIs, regular UIs, "simple" UIs. This…

> looking to move it all to svelte because react literally cannot handle the quantities of data I have nothing against Svelte, but how much data are you showing on screen, exactly? Here's an example table with 100,000 cells (100 rows * 1000 columns per row) that seems fine, from a common React UI kit: https://mui.com/x/react-data-grid/virtualization/#column-vir... It seems fast on my computer normally (M2 Max), slow…

It's defective because the browser's find feature does not work.

Re: An experiment in UI density created with Svelte

#162

Post by solardev »

funcDropShadow wrote: post #155
solardev wrote: post #97

Earlier quoted context omitted.

The application linked here is only showing 270 cells at once. I think even the slowest framework can handle that... It's when you get to thousands/tens of thousands of data points that things can really slow down without good optimizations, especially if you're modifying the DOM or manipulating SVGs (as opposed to drawing to Canvas, typically).

But isn't that exactly the point of such UI libraries? To provide those optimizations. Because the easy case, I can do myself.

Yes...? I think maybe there are some threads getting mixed up here? There are some sibling/cousin threads discussing performance more in depth. My post you replied to is just pointing out that 300 cells isn't really enough to measure any sort of meaningful performance.

Re: An experiment in UI density created with Svelte

#163

Post by d13 »

moomoo11 wrote: post #109
mhh__ wrote: post #106

Earlier quoted context omitted.

The main reason why I want to stop using react is actually precisely that I feel massively distracted from delivering business value when using it (although still better off than without it entirely obviously). JSX is quite fantastic for some things but I have found it to be fairly annoying when it comes to laying out data that has a very clear pattern to it (personally not a huge fan of functional style here) As for…

I also like svelte. I’ve not used it for anything serious yet though for one reason: lack of libraries. What you describe is a valid concern. I like keeping it more “vanilla” with svelte but any time I run into an issue of “Do I spend the next 2 hours building this, or just vet and pull in a library?” I’m left with the former option. At this point in my life I’m not that interested in spending more time than I have t…

You can use any vanilla HTML/css/js libraries with Svelte, and those far outnumber React’s.

Re: An experiment in UI density created with Svelte

#164

Post by d13 »

daemonologist wrote: post #8

Some very cool looking UI elements here, but I'm also wondering what the experiment was and what conclusions you drew from it. On sheer number of interactive elements, my experience (Svelte 4) is that the rendering usually starts to cause problems before the interactivity, i.e. you run into performance problems at the same number of elements regardless of whether they're interactive. As you implemented for the some o…

You can combine Svelte with an excellent WebGl framework like Phaser for blindingly fast graphics rendering: https://phaser.io/news/2024/03/official-phaser-3-and-svelte-...

Re: An experiment in UI density created with Svelte

#165

Post by Mindwipe »

mattlondon wrote: post #32
breck wrote: post #22

I love information density! I collect old newspapers and back then info density was way higher (for an _amazing_ coffee table book, google "nytimes complete front pages"). So much critical info above the fold. I think high information density === high intelligence. Getting sort priorities right is very valuable and important. The past few years the web seemed to be going the other way. Good to see people still rowing…

> I think high information density === high intelligence. Just packing loads of stuff on-screen at once, with tiny fonts and tiny margins and all the rest presents a lot of accessibility issues, even for intelligent people. Google et al are adding padding and white space to make their UIs more accessible for more people. It's not just eye sight we're talking here, but also physical issues with clicking/tapping small…

Google's design frameworks for the last five years have been completely unaccessible for those of who need concise and compact UIs.

Re: An experiment in UI density created with Svelte

#167

Post by ra1231963 »

Bluestein wrote: post #67

I'd like to think projects like these are somehow signaling a return to well designed but information dense , space saving interfaces ... The amount of bloat, whitespace, extra spacing, "air" and other such waste - starting with (now Google-dead) "Material Design" has been egregious.- (One can dream ...)

> starting with (now Google-dead) "Material Design"

I thought it was still actively developed. Are you saying this has been killed by Google?

https://m3.material.io/

Re: An experiment in UI density created with Svelte

#168

Post by panta »

elschneider wrote: post #158
felipefar wrote: post #135

Low UI density is the new emperor's clothes in modern UI design. It's being actively promoted by companies in order to cut design costs, but the truth is that it's only reasonable on touch interfaces or casual apps. Mouse interfaces are fundamentally different, because you have much more pointing precision, so it pays off to show more data on the screen. You don't have to cram your interface with with spaces to make…

I think there is a fundamental difference depending on what kinds of users you are targeting and how often they're using your app. Blender is a prime example of software for professionals, that are also willing the spend a considerable amount of time on learning the UI. A lot of software is not targeting a similar audience and should limit cognitive overload.

I'm constantly frustrated by software that tries to limit cognitive overload. Stop treating your users as if they were cognitively impaired. In other words, write a software that also an idiot can use, and only idiots will want to use it.

Re: An experiment in UI density created with Svelte

#169

Post by art0rz »

mhh__ wrote: post #80

I work have built some dense UI for certain types of fixed income (bonds and swaps) trading, looking to move it all to svelte because react cannot handle the quantities of data (and if even if it could the code is unbelievably ugly). Something I've been banging on about for a while is the following: Programmers and designers keep trying to rebuild instagram in every domain, pretty UIs, regular UIs, "simple" UIs. This…

At $dayjob I work on a very dense UI for a financial institution. Think Bloomberg terminal in React and RTK. It's extremely customizable and had lots of elements updating multiple times per second (charts, graphs, enormous tables, etc.) with realtime data coming through over a websocket. We do very little actual performance tuning and mostly just follow best practices.

I don't think React is to blame for your performance issues.

Re: An experiment in UI density created with Svelte

#170

Post by dhruvrajvanshi »

mhh__ wrote: post #80

I work have built some dense UI for certain types of fixed income (bonds and swaps) trading, looking to move it all to svelte because react cannot handle the quantities of data (and if even if it could the code is unbelievably ugly). Something I've been banging on about for a while is the following: Programmers and designers keep trying to rebuild instagram in every domain, pretty UIs, regular UIs, "simple" UIs. This…

Instead of a rewrite, why not try using AgGrid? It's a pure JS grid library that's really fast and it's got react bindings.

It's even got a batch update API.

I doubt that naively rewriting the app in Svelte is gonna give you the perf boost you're looking for.

Post reply on HN