500lines

Also check out this project, being featured in the next AOSA book: https://github.com/audreyt/500lines/blob/master/spreadsheet/...

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.

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.

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!

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.

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.

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!