Show HN: Web Spreadsheet in 99 lines | Hacker News Reader

Show HN: Web Spreadsheet in 99 lines

github.com

76 pointsaudreyt36 comments

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

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!

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

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

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

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

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!

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.

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.

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

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.

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.

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.

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.

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).

Well done and well documented. Bravo.

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.

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)

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

Excel like spreadsheet editing in the browser

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

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.

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

Nice work anyway.

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!

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

Anyway, nice bunch of new ES6 features out there

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.

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.

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

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

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.

Fair enough. Then libraries shouldn't count

Excel spreadsheet in 1 line of code:

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).

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.

Fair point. I should have explained the context better; this is for "500 Lines or Less", the fourth in the Architecture of Open Source Applications series, aimed more at new students than professional programmers, so separation of concern serves a pedagogical, rather than practical, purpose.

In a couple year's time, Web Components, Shadow DOM, and Object.observe may very well make application of this size not requiring AngularJS anymore, just like the "no tool at all" document.querySelector replaced jQuery.

I'd be happy to revise the chapter once a suitable polyfill exists for today's browsers — pull requests welcome, too!

Thanks for clarifying. I can see why you'd go this route when presenting it to students, but it seemed odd to show off in this venue.

Understood. Not meant as a show-off, but for people interested in comparing DOM-only versus AngularJS styles, here is a version that uses only DOM functions: https://audreyt.github.io/500lines/spreadsheet/as-without-an...

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

Reply on news.ycombinator.com