Show HN: Web Spreadsheet in 99 lines

https://github.com/audreyt/500lines/blob/master/spreadsheet/chapter.md

by audreyt • 12 years ago

76 36 12 years ago

github.com

doczoidberg• 12 years ago

look also at handsontable: http://handsontable.com/

Excel like spreadsheet editing in the browser

gren• 12 years ago

99 lines of code . . . and a few libraries. ;-)

Anyway, nice bunch of new ES6 features out there

audreyt11• 12 years ago

Thanks! The aim for the chapter is indeed to show how ES6 and AngularJS simplify a typical web application like this.

The version at https://github.com/audreyt/500lines/tree/master/spreadsheet/... has exactly the same line count, but with more idiomatic workarounds that's less clear to students new to web development (the audience of this book).

It is possible to replace AngularJS (the only external library) with regular blur/focus/change handler as @xem shows — without affecting the line counts — but the separation of concerns between view, logic and worker would be less clear.

audreyt11• 12 years ago

Comparing the ES5-DOM-only version: https://github.com/audreyt/500lines/tree/master/spreadsheet/... with with the AngularJS-with-ES5 version: https://github.com/audreyt/500lines/tree/master/spreadsheet/... would illustrate the issue of separation of concerns.

The DOM-only version had to construct its own view in JS, and use an additional #_A1 encoding to fill in calculated values into display, while the AngularJS version is declarative in that regard.

polskibus• 12 years ago

The title would've been more honest if it said "Web Spreadsheet in 99 lines using AngularJS".

audreyt11• 12 years ago

Indeed. https://github.com/audreyt/500lines/tree/master/spreadsheet mentions AngularJS and ES6 upfront, but in retrospect it'd be better to mention them in the title too. Thanks for the reminder!

69_years_and• 12 years ago

I think the title is AOK. A very nice commentary as you work through building it, I think folk will find that very helpful. Thanks for being awesome.

audreyt11• 12 years ago

Update: For folks interested in learning ReactJS, a version is available at https://github.com/audreyt/500lines/blob/master/spreadsheet/... — the demo at https://audreyt.github.io/500lines/spreadsheet/as-react-live... runs considerably faster than AngularJS, but takes 12 more lines of LiveScript.

logicallee• 12 years ago

Why? Is AngularJS spreadsheet software?

It also would have been more honest if it said "Web Spreadsheet in 99 lines using AngularJS and 11,331,980 lines of Code[1] in a modern web browser like Firefox."

[1] https://www.ohloh.net/p/firefox/analyses/latest/languages_su...

EpicEng• 12 years ago

And that's why lines of code is an ambiguous measurement. We could also count the code running the JS, the rendering engine, the browser, and the OS.

xem3• 12 years ago

99 LINES? That's huge. How about this one in 227 characters? http://xem.github.io/sheet/ :)

audreyt11• 12 years ago

The work by you, @aemkei et al was the inspiration for this chapter. :-)

Back when it appeared on HN, the first thing I entered was =(function(){for(;;){}})() — which predictably froze the browser.

Trying to find a sufficiently-robust way around this restriction ended up shaping the Web Worker based structure. So, thanks for the inspiration & golfing!

xem3• 12 years ago

oh, awesome. It's always a pleasure to find that the golfing we do inspires other people to do other projects ;)

enesunal• 12 years ago

Actually 210 characters. Do not count script tags. Those increases count :/

xem3• 12 years ago

you're right, the 210b version can be run from the JS console. The 227b is a... standalone app.

VeejayRampay• 12 years ago

Well done and well documented. Bravo.

restlessmedia• 12 years ago

I've got 99 problems but the total line count on web spreadsheet ain't one.

filearts• 12 years ago

To people commenting before reading, this link is more interesting in its discussion of how the demo was implemented than the fact that it is 'only 99 lines'.

Please check out the great write-up and thank you author(s).

chandrew• 12 years ago

Very nice for 99 lines. Still a fan of Handsontable :P Jw, any other spreadsheet editors out there?

audreyt11• 12 years ago

There's http://ethercalc.net/ — the subject of the spreadsheet chapters in two previous volumes of Open Source Architecture series at http://aosabook.org/.

EtherCalc is mostly in maintenance mode at this moment, and the "99 lines" engine described here is an attempt to simplify its core logic both for educational and refactoring purposes.

jorgeleo2• 12 years ago

... dependencies with 3 other libraries: AngularJS, WebWorkers, and Traceur Compiler

Not 99 lines anymore, hence no bragging rights

And # of lines stop being a problem since VAX computers

marknutter• 12 years ago

You're forgetting the many thousands of lines of code that went into writing the web browser it runs in, and even more that went into the underlying operating system.

I think the point being made here is that the OP only had to write 99 lines of original code using a few libraries and tools to get a rather impressive web based spreadsheet. If that's not impressive to you than your standards might be slightly too high.

jorgeleo2• 12 years ago

Fair enough. Then libraries shouldn't count

Excel spreadsheet in 1 line of code:

audreyt11• 12 years ago

Hi, thanks for the feedback! Sorry if it comes across as bragging; the line count is kept minimal both to reduce reader's cognitive burden, and make inline commentary feasible.

Technically, Web Worker is not a library, and Traceur is used to translate ES6 to ES5 while browser support catches on, so AngularJS is the only library used.

The non-Traceur ES5 version at https://github.com/audreyt/500lines/tree/master/spreadsheet/... has exactly the same line count, but with more idiomatic workarounds that's less clear to students new to web development (the audience of this book).

Sir_Cmpwn2• 12 years ago

Do you really need separation of concerns in a 99-line codebase? This is like jQuery all over again. Use the right tool for the job, and consider that the right tool might just be no tool at all.

waterside81• 12 years ago

Now that's a great write up. I always find when I'm blogging about some technical stuff, I start out strong and then say "ah screw it, here's the code, figure it out yourself". Kudos audreyt for great quality from beginning to end.

audreyt11• 12 years ago

Glad you liked it! This is my first serious attempt at "literate programming" style writing; it did take many attempts re-arranging the functions in logical order for the prose to make sense.

In my previous writeups such as http://g0v.asia/tw/ , I've followed SPJ's "writing a paper" guidelines ( HN: https://news.ycombinator.com/item?id=6989806 ) — almost to the letter — which was immensely helpful as well.

camelite• 12 years ago

As a beginner, I second that praise.. . Putting those details, often stumbling blocks, in context and with explanatory links, means that even if I don't get everything the first time, I have a big picture to refer to and feel secure that I will eventually get it, and the effort isn't wasted.

lazyant• 12 years ago

OT: what's the modern online version of MS Access? (a tool that will allow a non-technical person to create a simple db-backed form & report web app)

callesgg• 12 years ago

99 lines + angular != 99 lines If the context is in the browser that is what counts.

Nice work anyway.

audreyt11• 12 years ago

Thanks!

Here is the version — by popular demand — that only uses DOM methods and does not use Angular, still clocking at 99 lines:

https://audreyt.github.io/500lines/spreadsheet/as-without-an...

I have joined some short statements, but each line is still at most 99 characters.

Source code is at: https://github.com/audreyt/500lines/tree/master/spreadsheet/...

It was an interesting exercise — thanks for suggesting it!

genericacct• 12 years ago

ok now please implement this interface over the ethercalc api =)

stevep98• 12 years ago

Thanks for the amazing write-up. Extremely clear. I learned a lot about Angular and ES6, from this, and I encourage this meticulous write-up style for future projects.

Also, your attitude in dealing with the comments here is extremely commendable.

Show HN: Web Spreadsheet in 99 lines

Related Stories