6 ms·

Show HN: Web Spreadsheet in 99 lines

76 points by audreyt 12y ago

doczoidberg 12y ago
look also at handsontable: http://handsontable.com/ http://handsontable.com/ Excel like spreadsheet editing in the browser
gren 12y ago
99 lines of code . . . and a few libraries. ;-) Anyway, nice bunch of new ES6 features out there
- audreyt 12y 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/as-javascript-1.8.5 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.
  - audreyt 12y ago
    Comparing the ES5-DOM-only version: https://github.com/audreyt/500lines/tree/master/spreadsheet/as-without-angularjs https://github.com/audreyt/500lines/tree/master/spreadsheet/... with with the AngularJS-with-ES5 version: https://github.com/audreyt/500lines/tree/master/spreadsheet/as-javascript-1.8.5 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 12y ago
The title would've been more honest if it said "Web Spreadsheet in 99 lines using AngularJS".
- audreyt 12y ago
  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!
  - 69_years_and 12y 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.
  - audreyt 12y ago
    Update: For folks interested in learning ReactJS, a version is available at https://github.com/audreyt/500lines/blob/master/spreadsheet/as-react-livescript/main.ls https://github.com/audreyt/500lines/blob/master/spreadsheet/... — the demo at https://audreyt.github.io/500lines/spreadsheet/as-react-livescript/ https://audreyt.github.io/500lines/spreadsheet/as-react-live... runs considerably faster than AngularJS, but takes 12 more lines of LiveScript.
- logicallee 12y 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_summary https://www.ohloh.net/p/firefox/analyses/latest/languages_su...
  - EpicEng 12y 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.
xem 12y ago
99 LINES? That's huge. How about this one in 227 characters? http://xem.github.io/sheet/ http://xem.github.io/sheet/ :)
- audreyt 12y 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!
  - xem 12y ago
    oh, awesome. It's always a pleasure to find that the golfing we do inspires other people to do other projects ;)
- enesunal 12y ago
  Actually 210 characters. Do not count script tags. Those increases count :/
  - xem 12y ago
    you're right, the 210b version can be run from the JS console. The 227b is a... standalone app.
VeejayRampay 12y ago
Well done and well documented. Bravo.
restlessmedia 12y ago
I've got 99 problems but the total line count on web spreadsheet ain't one.
joereggan190 12y ago
http://www.boston.com/community/forums/news/world/general/fifa-watch-germany-vs-brazil-live-stream-free-world-cup-2014/80/7226667 http://www.boston.com/community/forums/news/world/general/fi...
filearts 12y 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 12y ago
Very nice for 99 lines. Still a fan of Handsontable :P Jw, any other spreadsheet editors out there?
- audreyt 12y ago
  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.
jorgeleo 12y 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 12y 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.
  - jorgeleo 12y ago
    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=20F065AFC1ACDB2E%21722&authkey=&em=2&ActiveCell=A1&Item=CoffeeList"></iframe> https://onedrive.live.com/embed?cid=20F065AFC1ACDB2E&resid=2...
- audreyt 12y 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/as-javascript-1.8.5 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.
joereggan190 12y ago
https://www.udemy.com/u/petekola/ https://www.udemy.com/u/petekola/
joereggan190 12y ago
http://www.boston.com/community/forums/sports/mixed-bag/general/watchgermanyvsbrazillivestreamworldcup2014/100/7227979 http://www.boston.com/community/forums/sports/mixed-bag/gene...
waterside81 12y 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.
- audreyt 12y 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/ 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 12y 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 12y 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 12y ago
99 lines + angular != 99 lines If the context is in the browser that is what counts. Nice work anyway.
- audreyt 12y 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-angularjs/ 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/as-without-angularjs https://github.com/audreyt/500lines/tree/master/spreadsheet/... It was an interesting exercise — thanks for suggesting it!
genericacct 12y ago
ok now please implement this interface over the ethercalc api =)
stevep98 12y 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.

76 points by audreyt 12y ago

look also at handsontable: http://handsontable.com/ http://handsontable.com/ Excel like spreadsheet editing in the browser

gren 12y ago

99 lines of code . . . and a few libraries. ;-) Anyway, nice bunch of new ES6 features out there

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

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

audreyt 12y ago
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!
- 69_years_and 12y 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.
- audreyt 12y ago
  Update: For folks interested in learning ReactJS, a version is available at https://github.com/audreyt/500lines/blob/master/spreadsheet/as-react-livescript/main.ls https://github.com/audreyt/500lines/blob/master/spreadsheet/... — the demo at https://audreyt.github.io/500lines/spreadsheet/as-react-livescript/ https://audreyt.github.io/500lines/spreadsheet/as-react-live... runs considerably faster than AngularJS, but takes 12 more lines of LiveScript.
logicallee 12y 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_summary https://www.ohloh.net/p/firefox/analyses/latest/languages_su...
- EpicEng 12y 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.

xem 12y ago

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

audreyt 12y 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!
- xem 12y ago
  oh, awesome. It's always a pleasure to find that the golfing we do inspires other people to do other projects ;)
enesunal 12y ago
Actually 210 characters. Do not count script tags. Those increases count :/
- xem 12y ago
  you're right, the 210b version can be run from the JS console. The 227b is a... standalone app.

VeejayRampay 12y ago

Well done and well documented. Bravo.

restlessmedia 12y ago

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

joereggan190 12y ago

http://www.boston.com/community/forums/news/world/general/fifa-watch-germany-vs-brazil-live-stream-free-world-cup-2014/80/7226667 http://www.boston.com/community/forums/news/world/general/fi...

filearts 12y 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 12y ago

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

audreyt 12y ago
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.

jorgeleo 12y 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 12y 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.
- jorgeleo 12y ago
  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=20F065AFC1ACDB2E%21722&authkey=&em=2&ActiveCell=A1&Item=CoffeeList"></iframe> https://onedrive.live.com/embed?cid=20F065AFC1ACDB2E&resid=2...
audreyt 12y 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/as-javascript-1.8.5 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.

joereggan190 12y ago

https://www.udemy.com/u/petekola/ https://www.udemy.com/u/petekola/

joereggan190 12y ago

http://www.boston.com/community/forums/sports/mixed-bag/general/watchgermanyvsbrazillivestreamworldcup2014/100/7227979 http://www.boston.com/community/forums/sports/mixed-bag/gene...

waterside81 12y 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.

audreyt 12y 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/ 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 12y 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 12y 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 12y ago

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

audreyt 12y 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-angularjs/ 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/as-without-angularjs https://github.com/audreyt/500lines/tree/master/spreadsheet/... It was an interesting exercise — thanks for suggesting it!

genericacct 12y ago

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

stevep98 12y 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.