Ask HN: Can you suggest some good JavaScript projects to read and learn? - balajics
======
2mur
Backbone and Underscore have annotated source code:

[http://backbonejs.org/docs/backbone.html](http://backbonejs.org/docs/backbone.html)

[http://underscorejs.org/docs/underscore.html](http://underscorejs.org/docs/underscore.html)

~~~
adamcw
This is what I came to suggest as well. I would also say that Express is a
good one as well if you're looking to learn Node. Not quite as clear as the
annotated source for Backbone, but well commented.

I also liked the "Let's Make a Framework" posts at DailyJS. DailyJS in general
was a great blog that is now closed, but the archives are still up.

[https://github.com/strongloop/express](https://github.com/strongloop/express)

[http://dailyjs.com/framework-index/](http://dailyjs.com/framework-index/)

------
edwinnathaniel
I'm also interested to see a mid-size scale SPA project that has excellent
unit-testing and integration-testing.

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.

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.

I'm looking for something that can taught me:

1\. Unit-testing (with some level of mocking)

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

3\. Best practices/patterns for architecting large-scale SPA (hint: generic
EventBus tend to be abused).

~~~
bonesinger
We have a mid-size scale SPA and its suffering because of bloat. Functions are
2-500 lines long as an example. we've had critical bugs in the last 2 weeks
and I got fed up and decided to start learning unit testing. Its been
absolutely painful to get everything setup and started (Visual Studio).
Nothing works. I would love to see a well written project to base my tests off
of.

I would really love to see a well written SPA with testing, but I fear its
almost reaching unicorn status. Most projects suffer from deadlines so they'll
just never be written the way they should be and instead, the flow is now:
patch it and move on.

~~~
edwinnathaniel
That's not quite correct.

I've had good success in architecting/designing classical web-app (MVC-ish as
overall architecture and minimum JS on front-end).

I can write unit-test with mocking and integration-test with in-memory
database as part of my build/compile loop.

But I struggled a lot with front-end.

~~~
bonesinger
Ah yeah, we're having lots of issues with front end bugs causing crashes.

~~~
davelnewton
Front-end bugs causing crashes of... the back-end? That's a back-end bug.

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

[http://play.elevatorsaga.com/](http://play.elevatorsaga.com/)

~~~
rev_bird
Holy cow... honestly, I'm not even that interested in getting better at JS,
but this game looks like so much fun. If I ever find a game like this for
traffic-light simulation, that's the last day I leave the house.

------
tonyhb
Reflux and it's associated tools for some concise, well written ES6/7 patterns
([https://github.com/gaearon/redux](https://github.com/gaearon/redux))

Gaearon is actually a hell of a JS developer
([https://github.com/gaearon](https://github.com/gaearon)).

~~~
almog
You mentioned Reflux but linked to Redux.

~~~
tonyhb
Ah, apologies, meant Redux. So many flux frameworks and their names are all
similar.

------
blairanderson
Read the backbone source.
[http://backbonejs.org/docs/backbone.html](http://backbonejs.org/docs/backbone.html)

Read the underscore Source first:
[http://underscorejs.org/docs/underscore.html](http://underscorejs.org/docs/underscore.html)

------
pennaMan
The same todo app implemented in a bunch of frameworks:

[http://todomvc.com/](http://todomvc.com/)

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

[https://github.com/airbnb/javascript](https://github.com/airbnb/javascript)

------
arihant
If you're willing to learn about patterns, jQuery and Underscore.js are
excellent places to look at.

If you're looking for something harder and unconventional, see React source.
It also has some low hanging fruit for pull requests.

If documentation and comments are important for you to learn, Backbone.js is
way ahead of everyone else in those terms.

I would also look at smaller indie projects. The source is smaller, forking
and adding something is easier. Pull requests are easier too.

------
ahmadajmi
I asked this before and I hope it helps
[https://news.ycombinator.com/item?id=8128400](https://news.ycombinator.com/item?id=8128400)

------
jedireza
Some personal projects:

\- [https://github.com/jedireza/drywall](https://github.com/jedireza/drywall)
\- [https://github.com/jedireza/frame](https://github.com/jedireza/frame) \-
[https://github.com/jedireza/aqua](https://github.com/jedireza/aqua)

------
nickstefan12
ExpressJS is pretty interesting with its nested routers, middleware, request
handling function as the app, and adjusting the prototype on each request.

It gets kind of hairy so I did a blog post on it:
[http://www.nickstefan.net/blog/view/express-under-the-
hood](http://www.nickstefan.net/blog/view/express-under-the-hood)

------
at-fates-hands
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.

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.

------
chrisco255
One of the best starting points for building a SPA that I've seen is the
Angular Fullstack generator [https://github.com/DaftMonk/generator-angular-
fullstack](https://github.com/DaftMonk/generator-angular-fullstack)

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.

That being said, I have been trying to learn React lately and have yet to find
a similar thing for a React-based stack.

~~~
edwinnathaniel
Can you briefly expand the e2e test aspect of Angular?

I'm looking to learn ways to do e2e test without touching the DOM (e.g.: from
Controller all the way up to the back-end; imagine firing up Chrome DevTools
console and start writing JS code that executes some logic and eventually
fires AJAX request and process the response, of course in this case the View
will be mocked but the app logic and everything else can be executed).

~~~
chrisco255
Checkout Angular's guide on e2e testing using
[https://docs.angularjs.org/guide/e2e-testing](https://docs.angularjs.org/guide/e2e-testing)

Also read about Protractor,
[http://angular.github.io/protractor/#/](http://angular.github.io/protractor/#/),
their e2e testing framework. These tests generally should be run in the
browser. You can run them in PhantomJS, a command line browser simulator, but
it's not the same and there are sometimes issues that don't get caught by
Phantom. Best to run those tests in an actual browser.

~~~
edwinnathaniel
I went over those pages briefly and I wish it's not Selenium-like but it kinda
is... :(

------
arsey
The original jquery source w/ annotations:
[http://genius.it/5088474/ejohn.org/files/jquery-
original.htm...](http://genius.it/5088474/ejohn.org/files/jquery-
original.html)

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

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

------
stephengillie
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!

[1]www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

[2][http://gilgamech.neocities.org/demon.html](http://gilgamech.neocities.org/demon.html)

------
theaccordance
I could, but JavaScript has such a broad application these days that you
should be more specific as to what you're goals are

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

1 : [https://github.com/TryGhost/Ghost](https://github.com/TryGhost/Ghost)

------
SunboX
No Frameworks used, just "modern" JavaScript:
[https://github.com/mozilla-b2g/gaia](https://github.com/mozilla-b2g/gaia)
Have learned some things by reading the code.

------
0xdeadbeefbabe
This is an impossible question to answer correctly.

[https://github.com/hybridgroup/cylon-
sphero](https://github.com/hybridgroup/cylon-sphero) because you can use it to
control robots?

------
hyptos
From Addy Osmani :

[http://addyosmani.com/resources/essentialjsdesignpatterns/bo...](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#)

------
gee_totes
The New York Times website has some great annotated JS source code.

------
cryptonomicon
Lodash has some of the best javascript code out there.

[https://github.com/lodash/lodash](https://github.com/lodash/lodash)

------
seige
Emberjs is very well documented too and is choke full of some very good design
patterns and concepts.

YMMV as its a huge codebase and it might be hard to figure out where to start.

------
azeirah
Take a look at the d3.js source code

~~~
Nemcue
This is not good advice.

------
xiaoma
The Khan Academy open sources their site's code.

------
MoussaMan
AngularJs is the best

------
chrshawkes
React.JS is the best

