I'm also interested to see a mid-size scale SPA project that has excellent unit-testing and integration-testing.<p>I've read a lot about how JS can make programmer productive, I've also read a lot how code can be succinct and all that jazz because of JS, but I have _never seen_ a well-architected, well-documented, well-automated-tested non-todomvc SPA codebase.<p>This isn't a sarcasm or criticism but a serious and legitimate "ASK" because I'm working on a large-scale SPA project that's hard to write automation test other than Selenium.<p>I'm looking for something that can taught me:<p>1. Unit-testing (with some level of mocking)<p>2. Integration-testing (testing various components without hitting the UI but all the way up to the sending request, kind of like driving the front-end code without the UI).<p>3. Best practices/patterns for architecting large-scale SPA (hint: generic EventBus tend to be abused).
This game is a tool for experimentation - it gave me motivation to start learning. You need to write the control software for an elevator (or elevators), which has levels of increasing difficulty to clear, which will mean re-evaluating and rewriting your code to perform better under different scenarios.<p><a href="http://play.elevatorsaga.com/" rel="nofollow">http://play.elevatorsaga.com/</a>
Reflux and it's associated tools for some concise, well written ES6/7 patterns (<a href="https://github.com/gaearon/redux" rel="nofollow">https://github.com/gaearon/redux</a>)<p>Gaearon is actually a hell of a JS developer (<a href="https://github.com/gaearon" rel="nofollow">https://github.com/gaearon</a>).
The same todo app implemented in a bunch of frameworks:<p><a href="http://todomvc.com/" rel="nofollow">http://todomvc.com/</a>
It's not a project, but Airbnb have updated their Javascript style guide to ES6. It's a good read on how to write and structure javascript.<p><a href="https://github.com/airbnb/javascript" rel="nofollow">https://github.com/airbnb/javascript</a>
If you're willing to learn about patterns, jQuery and Underscore.js are excellent places to look at.<p>If you're looking for something harder and unconventional, see React source. It also has some low hanging fruit for pull requests.<p>If documentation and comments are important for you to learn, Backbone.js is way ahead of everyone else in those terms.<p>I would also look at smaller indie projects. The source is smaller, forking and adding something is easier. Pull requests are easier too.
I asked this before and I hope it helps <a href="https://news.ycombinator.com/item?id=8128400" rel="nofollow">https://news.ycombinator.com/item?id=8128400</a>
ExpressJS is pretty interesting with its nested routers, middleware, request handling function as the app, and adjusting the prototype on each request.<p>It gets kind of hairy so I did a blog post on it:
<a href="http://www.nickstefan.net/blog/view/express-under-the-hood" rel="nofollow">http://www.nickstefan.net/blog/view/express-under-the-hood</a>
Its funny everybody is talking about Backbone. With all the new frameworks out there, Backbone seems to be forgotten. And yet, it's persevered and continues to improve itself seemingly now under the radar.<p>It's such a straight forward library to use and build stuff with - plus the code is very well annotated for anybody just starting out.
One of the best starting points for building a SPA that I've seen is the Angular Fullstack generator <a href="https://github.com/DaftMonk/generator-angular-fullstack" rel="nofollow">https://github.com/DaftMonk/generator-angular-fullstack</a><p>This generator uses Angular best practices, has Jasmine and Karma built in for solid unit and integration (called e2e tests in Angular) testing. The built-in generators even build pages, controllers, and add the unit test files along with the new routes. In addition, authentication via Passport.js is in the box. In my opinion it's an easy to extend, robust solution for building a non-trivial SPA. Even has hooks for easy deployment to Heroku.<p>That being said, I have been trying to learn React lately and have yet to find a similar thing for a React-based stack.
The original jquery source w/ annotations: <a href="http://genius.it/5088474/ejohn.org/files/jquery-original.html" rel="nofollow">http://genius.it/5088474/ejohn.org/files/jquery-original.htm...</a>
BackboneJS is a really well-written library, even if it's now beginning to lose popularity. The source code is small enough that it should be easy to read and understand within a few weeks.
No mention of polymer yet. Web components are a good candidate for the future structure of the web. Just mind the recent bump to 1.0 and with a slew of components still developed for 0.5
I wanted to make HTML5 games. So I searched and eventually came across an open-source "Catch the demon" game[1]. I studied it and some other Javascript code, and modified the game to take mouse input instead of keyboard[2]. You might be able to make better modifications, or even a better game!<p>[1]www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/<p>[2]<a href="http://gilgamech.neocities.org/demon.html" rel="nofollow">http://gilgamech.neocities.org/demon.html</a>
If you want something more NodeJS oriented you can start exploring Ghost source code [1]. It has amazing Promise-based + express infrastructure, in which you can find a lot of patterns to help you build your next project.<p>1 : <a href="https://github.com/TryGhost/Ghost" rel="nofollow">https://github.com/TryGhost/Ghost</a>
No Frameworks used, just "modern" JavaScript: <a href="https://github.com/mozilla-b2g/gaia" rel="nofollow">https://github.com/mozilla-b2g/gaia</a> Have learned some things by reading the code.
This is an impossible question to answer correctly.<p><a href="https://github.com/hybridgroup/cylon-sphero" rel="nofollow">https://github.com/hybridgroup/cylon-sphero</a> because you can use it to control robots?
Lodash has some of the best javascript code out there.<p><a href="https://github.com/lodash/lodash" rel="nofollow">https://github.com/lodash/lodash</a>
Emberjs is very well documented too and is choke full of some very good design patterns and concepts.<p>YMMV as its a huge codebase and it might be hard to figure out where to start.