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

Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

github.com

Post reply on HN
Print view View original

91–100 of 108 posts

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#91

Post by eddyparkinson »

myliang wrote: post #13
paulfitz wrote: post #2

Nice! Would be interested in how this compares to e.g. handsontable[1]. What do you think of audreyt's ethercalc[2] myliang? [1] https://github.com/handsontable/handsontable [2] https://github.com/audreyt/ethercalc

1 canvas performance is higher than dom rendering 2 easy to write code

Formula calculation speed.

I am interested in talking, as I work on ethercalc.

The big issue I have seen is formula calculation speed. I understand render speed is also an issue. I don't know your use case, but the use cases I see tend to have formulas. It is hard to makes formulas fast enough with JS.

The main speed problems with ethercalc are loading the data from the server and calculating the formulas. I did strip down the code to remove these problems to make web apps work.

Web apps as simple as spreadsheets. My aim is to make it easy to add a UI to a spreadsheet. Spreadsheets often have a UI bottle neck. I have seen many spreadsheets that would be much more valuable to business if it had a UI, as more people could use it. So I added UI formulas to ethercalc http://sheet.cellmaster.com.au/examples

Eddy.

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#92

Post by c-smile »

bijection wrote: post #84
c-smile wrote: post #78

Earlier quoted context omitted.

By nature of , it uses grayscale antialiasing of text Here (MS Edge, Windows, High-DPI screen): http://cloud.sciter.com/index.php/s/fcTbout1oQqwIJg You see how different text rendering in normal DOM rendering (text "Normal") and the text inside canvas. Grayscale AA text looks blurred. Grayscale AA works only for relatively large font sizes, for standard UI text sizes it is highly non-desirable.

Although canvas does do grayscale anti-aliasing, this particular app is blurry because the canvas is being rendered at a lower resolution than your screen. To make it crisp, the author would have to set the canvas' javascript canvas.width property to be twice the canvas' css canvas.style.width property.

Yes, oversampling will reduce blurriness but it will be there anyway. ClearType is there for the purpose.

Yet all that with the price of memory and CPU consumption - number of pixels to rasterize on 192 PPI monitor is four times of the one with "standard" 96 PPI.

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#93

Post by c-smile »

kevsim wrote: post #4

I think a description of why canvas was used would be nice in the README. My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen.

All DOM update and layout algorithms are O(N) complex (at best). So as less DOM elements you have as more responsive your UI is.

As an ultimate solution - to remove DOM at all and replace it by . Minimization of updates is developer's business in this case. Presumably he/she will be able to do it better other than to walk through all DOM elements while handling, say this:

   html:hover span { color:red; }

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#94

Post by yoz »

juretriglav wrote: post #86

This is amazing! I'm doing a deep dive into the code now to see how the extensibility is done. Some folks here might be interested in Stencila Sheets too ( https://stenci.la/blog/2017-08-features-stencila-sheets/ , https://stenci.la/blog/introducing-sheets/ ), https://github.com/stencila/stencila/tree/develop/src/sheet . It's a web-based spreadsheets where cells can execute other programming languages, such as R or P…

What's happening with Stencila? I only found it recently, and it looks like a potentially fantastic project, but development seems to have slowed right down.

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#95

Post by microcolonel »

Technetium_Hat wrote: post #52
microcolonel wrote: post #7

Earlier quoted context omitted.

> My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen. The browser certainly makes this convenient... until you have more than a few thousand cells. At some point even just having the whole table loaded into the DOM is too layout and memory intensive (except on servo, sometimes). When you try, then, to work around those limitations, continuing…

Tables are also extremely performant in internet explorer, where table rendering is gpu accelerated.

Yes, if you can determine the natural height of every preceding row, the position of the next cell is a vector reduction of the previous heights. You still run in to memory limitations though (unless they've produced some incredible magical compaction scheme which can extract hidden classes from DOM structures, which I can't imagine happened without my knowing it since last I looked at tables in IE [spring 2017]).

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#96

Post by nine_k »

c-smile wrote: post #93
kevsim wrote: post #4

I think a description of why canvas was used would be nice in the README. My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen.

All DOM update and layout algorithms are O(N) complex (at best). So as less DOM elements you have as more responsive your UI is. As an ultimate solution - to remove DOM at all and replace it by . Minimization of updates is developer's business in this case. Presumably he/she will be able to do it better other than to walk through all DOM elements while handling, say this: html:hover span { color:red; }

You only need as many DOM nodes as it takes to cover the viewport.

You can style them such a way that updates do not cause re-layout, except for auto-sized cells.

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#97

Post by fictorial »

_bxg1 wrote: post #53

I've theorized for a while about what it would look like to try and build a generic, app-focused layout engine on Canvas. The DOM gives you lots of things for free and has a long history of backward-compatibility, but both of those things come with huge costs in terms of performance and (to a degree) complexity. The fact that the DOM a) is stateful and b) was originally designed for documents, not apps, causes lots o…

I made one a while back for fun. https://github.com/fictorial/canvas_ui

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#99

Post by myliang »

williamstein wrote: post #36

This is amazing and fast. I'm complaining about it actually being easily broken only because I really wished this worked well, so I could build on it. It crashed for me on literally the very first thing I tried. I opened up the demo page, typed in 4 numbers in a column (in positions a5,a6,a7,a8), then typed "=sum(a5:a8)" in position a9, hit enter, and the demo crashed (with canvas all messed up). There's a traceback…

it's fixed, thx

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#100

Post by myliang »

sramam wrote: post #25

This looks really good - the speed of rendering of the default sheet was surprising and pleasant. Is there a reason you switched from the earlier version in TypeScript[1] to this version in JavaScript? [1] https://github.com/myliang/xspreadsheet

Reduce dependency on development processes
Post reply on HN