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

101–110 of 267 posts

Re: An experiment in UI density created with Svelte

#101

Post by mhh__ »

moomoo11 wrote: post #95
andrewstuart wrote: post #89

Earlier quoted context omitted.

>> react literally cannot handle the quantities of data Presented at fact but I’m not sure this is universally correct. I don’t see why the application that is linked here couldn’t be done in react.

Yep not true at all lol. I’ve built extremely complex UIs with react with solid performance. Just need to know react better, I guess.

Would you say all that useMemo (et al) was a productive use of your time? One of the things I like about svelte is that it seems to encourage code to be naturally fast rather than deal with a load of abstraction leakage (very productive abstraction leakage, but still) everywhere

Dan Abramov's favourite UI is apparently spotify, I think it shows in the things react seems to be designed for.

I dropped the word "literally" from my original comment as I didn't think before I wrote (classic), now I think it's a fair comment.

Re: An experiment in UI density created with Svelte

#102

Post by 01HNNWZ0MV43FF »

Waterluvian wrote: post #57

Having to support mobile throws a big wrench in all design. You suddenly have to worry about a very different viewport and now you’re significantly limited or designing two UIs.

just make a responsive design that allows you to either drink from a fire hose or a coffee stirrer

Re: An experiment in UI density created with Svelte

#103

Post by moomoo11 »

mhh__ wrote: post #101
moomoo11 wrote: post #95

Earlier quoted context omitted.

Yep not true at all lol. I’ve built extremely complex UIs with react with solid performance. Just need to know react better, I guess.

Would you say all that useMemo (et al) was a productive use of your time? One of the things I like about svelte is that it seems to encourage code to be naturally fast rather than deal with a load of abstraction leakage (very productive abstraction leakage, but still) everywhere Dan Abramov's favourite UI is apparently spotify, I think it shows in the things react seems to be designed for. I dropped the word "literal…

I was using mobx at the time. It was a very complex app UI with lots of data and streams. This was like 4+ years ago.

I mean I don’t personally care about the semantics that much as much as the business results. The commenter said react isn’t a good choice and that was my disagreement.

And Spotify isn’t exactly a “tough” UI compared to something data intensive.

Re: An experiment in UI density created with Svelte

#104

Post by Waterluvian »

01HNNWZ0MV43FF wrote: post #102
Waterluvian wrote: post #57

Having to support mobile throws a big wrench in all design. You suddenly have to worry about a very different viewport and now you’re significantly limited or designing two UIs.

just make a responsive design that allows you to either drink from a fire hose or a coffee stirrer

“Responsive design” is basically couched language that hides that you’re either designing it twice or are making compromises to one or both aspects/sizes.

There isn’t really any other choice. It’s reality. But it’s just sometimes quite frustrating.

Re: An experiment in UI density created with Svelte

#105

Post by solardev »

mhh__ wrote: post #100
solardev wrote: post #96

Earlier quoted context omitted.

> 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…

Amongst other things, the primary expense is lot of visual elements in a very dense chart that ideally would be ticking with the market in ~real time and allow more than one on the screen. A lot of it probably should be a canvas but there's a good amount of interactivity on the chart itself so moving it all over might be expensive. You obviously can bludgeon that into react but it's at the point where the diffing doe…

(Not that you're asking for advice, but hope you don't mind me sharing some anecdotal experience...)

When we had to do similar things, we found that it was much much much faster to take all that sort of stuff out of the DOM and put it into Canvas. You can still wrap React around it for the UI and controls and data passing and all that, but the actual rendering need not involve the VDOM or even the real DOM at all. With ChartJS we were able to get it to show tens of thousands of individual data points in a time-series scatterplot, each datapoint interactive and real-time, with no noticeable lag. And it was super easy to integrate into our React app. https://www.chartjs.org/

If it's not just charts, here's another canvas-based drawing lib: https://konvajs.org/docs/sandbox/20000_Nodes.html (and its React tie-in: https://konvajs.org/docs/react/Intro.html)

Not trying to discourage you from exploring Svelte if you want to, but it might be less work to just use an existing optimized drawing lib. Regardless of the JS framework used, the DOM is going to be much slower than a Canvas.

Re: An experiment in UI density created with Svelte

#106

Post by mhh__ »

moomoo11 wrote: post #103
mhh__ wrote: post #101

Earlier quoted context omitted.

Would you say all that useMemo (et al) was a productive use of your time? One of the things I like about svelte is that it seems to encourage code to be naturally fast rather than deal with a load of abstraction leakage (very productive abstraction leakage, but still) everywhere Dan Abramov's favourite UI is apparently spotify, I think it shows in the things react seems to be designed for. I dropped the word "literal…

I was using mobx at the time. It was a very complex app UI with lots of data and streams. This was like 4+ years ago. I mean I don’t personally care about the semantics that much as much as the business results. The commenter said react isn’t a good choice and that was my disagreement. And Spotify isn’t exactly a “tough” UI compared to something data intensive.

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 spotify, that was also the point I was trying to make i.e. React was made so facebook can ~~poison the minds of the youth~~ help people share stories, Svelte being made by someone who did dataviz for NYT really shows.

Should say at this point that despite my love of Svelte in principal I still would actually probably build an app that used a react-like framework to glue svelte components together as I'm not a huge fan of a lot of the aspects of svelte that have scope wider than a component.

Re: An experiment in UI density created with Svelte

#108

Post by solardev »

ChrisMarshallNY wrote: post #82
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…

I suspect Bloomberg terminals fit that bill.

I'd never heard of those until your post, and had to look up a Youtube about what they were: https://www.youtube.com/watch?v=2ee-x6IXWK8

That's super fascinating. There's an entire industry that runs off these things, on their totally custom UI, showing everything from stock tickers to news headlines to maps? That must be a fun project to work on (except probably the finance users don't like random UI changes, lol).

Re: An experiment in UI density created with Svelte

#109

Post by moomoo11 »

mhh__ wrote: post #106
moomoo11 wrote: post #103

Earlier quoted context omitted.

I was using mobx at the time. It was a very complex app UI with lots of data and streams. This was like 4+ years ago. I mean I don’t personally care about the semantics that much as much as the business results. The commenter said react isn’t a good choice and that was my disagreement. And Spotify isn’t exactly a “tough” UI compared to something data intensive.

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 to get something done.

So.. I just use react. No customer cares about 35kb vs 8kb or whatever people seem to optimize for. Even businesses in a developing country have 50-100mbps connection, and honestly most customers (even tech corps) don’t care about this stuff.

Re: An experiment in UI density created with Svelte

#110

Post by Dalewyn »

ecjhdnc2025 wrote: post #63

This is interesting because it proves something to me about my vision and visual comprehension. The "Grid" view is absolutely fine for me. The "Table" view is unworkable. I have a lot of trouble scanning across lines like this, where I will lose which line I am on (when my glance shifts). This, I have realised, is due to the tendency to shift eye dominance slightly across to the right. (My eyes are subtly misaligned…

I think your trouble with the table has far more to do with the design (specifically color) choices made by the author.

1. You mentioned this in passing, but I'll repeat for emphasis: The contrast between a hovered/highlighted table row and ones that are not is too low. I have decent eyes and I also have a hard time seeing it.

2. Table rows (and/or columns) should be striped between two or more high contrast colors for better legibility. White, black, white, black for example. This table is all black through and through.

3. The table borders' contrast is way too low, it's hardly even visible. This combined with the singular row/column color makes legibility even worse.

TL;DR: Table itself is actually fine, the colors are terrible.

Post reply on HN