Show HN: Web Spreadsheet in 99 lines

[xem]

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

[audreyt]

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!

[enesunal]

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

[polskibus]

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

[audreyt]

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!

[logicallee]

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

[waterside81]

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.

[audreyt]

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.

[filearts]

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

[VeejayRampay]

Well done and well documented. Bravo.

[stevep98]

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.

[lazyant]

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)

[doczoidberg]

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

Excel like spreadsheet editing in the browser

[chandrew]

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

[audreyt]

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.

[callesgg]

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

Nice work anyway.

[audreyt]

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!

[gren]

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

Anyway, nice bunch of new ES6 features out there

[audreyt]

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.

[genericacct]

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

[jorgeleo]

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

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.

[audreyt]

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

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.

[restlessmedia]

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