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.
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.
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."
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!
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).
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.
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.
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.
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.
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!
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.
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.
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.
39 comments
[ 3.0 ms ] story [ 116 ms ] threadExcel like spreadsheet editing in the browser
Anyway, nice bunch of new ES6 features out there
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.
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.
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...
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!
Please check out the great write-up and thank you author(s).
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.
Not 99 lines anymore, hence no bragging rights
And # of lines stop being a problem since VAX computers
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.
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...
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.
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!
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.
Nice work anyway.
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!
Also, your attitude in dealing with the comments here is extremely commendable.