
Show HN: Web Spreadsheet in 99 lines - audreyt
https://github.com/audreyt/500lines/blob/master/spreadsheet/chapter.md
======
xem
99 LINES? That's huge. How about this one in 227 characters?
[http://xem.github.io/sheet/](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!

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

------
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](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!

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

------
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/](http://g0v.asia/tw/) ,
I've followed SPJ's "writing a paper" guidelines ( HN:
[https://news.ycombinator.com/item?id=6989806](https://news.ycombinator.com/item?id=6989806)
) — almost to the letter — which was immensely helpful as well.

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

------
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/](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/](http://ethercalc.net/) — the subject of the
spreadsheet chapters in two previous volumes of Open Source Architecture
series at [http://aosabook.org/](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...](https://audreyt.github.io/500lines/spreadsheet/as-without-angularjs/)

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/...](https://github.com/audreyt/500lines/tree/master/spreadsheet/as-
without-angularjs)

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/...](https://github.com/audreyt/500lines/tree/master/spreadsheet/as-
javascript-1.8.5) 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.

~~~
audreyt
Comparing the ES5-DOM-only version:
[https://github.com/audreyt/500lines/tree/master/spreadsheet/...](https://github.com/audreyt/500lines/tree/master/spreadsheet/as-
without-angularjs) with with the AngularJS-with-ES5 version:
[https://github.com/audreyt/500lines/tree/master/spreadsheet/...](https://github.com/audreyt/500lines/tree/master/spreadsheet/as-
javascript-1.8.5) 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.

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

~~~
jorgeleo
Fair enough. Then libraries shouldn't count

Excel spreadsheet in 1 line of code:

<iframe width="400" height="560" frameborder="0" scrolling="no"
src="[https://onedrive.live.com/embed?cid=20F065AFC1ACDB2E&resid=2...](https://onedrive.live.com/embed?cid=20F065AFC1ACDB2E&resid=20F065AFC1ACDB2E%21722&authkey=&em=2&ActiveCell=A1&Item=CoffeeList"></iframe>)

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

