6 ms·

Ask HN: Can you suggest some good JavaScript projects to read and learn?

109 points by balajics 11y ago

pennaMan 11y ago
The same todo app implemented in a bunch of frameworks: http://todomvc.com/ http://todomvc.com/
mkaziz 11y ago
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.
Daneel_ 11y ago
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 11y ago
  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.
2mur 11y ago
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
- rememberlenny 11y ago
  +1 for Backbone. It is very well documented
- teamhappy 11y ago
  I was about to suggest lodash.
- adamcw 11y ago
  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/
stephengillie 11y ago
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
ahmadajmi 11y ago
I asked this before and I hope it helps https://news.ycombinator.com/item?id=8128400 https://news.ycombinator.com/item?id=8128400
nickstefan12 11y ago
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
tonyhb 11y ago
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 11y ago
  You mentioned Reflux but linked to Redux.
  - tonyhb 11y ago
    Ah, apologies, meant Redux. So many flux frameworks and their names are all similar.
- GordyMD 11y ago
  Not a readable resource, but I feel it is worth the exception - Watch Dan Abramov's talk [1] about Redux (Reducers + Flux). Gives great insight into his motivation for creating React Hot Loader and Redux. +1 for Dan (aka Gaearon) being an excellent developer [1] https://www.youtube.com/watch?v=xsSnOQynTHs https://www.youtube.com/watch?v=xsSnOQynTHs
burai 11y ago
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
arsey 11y ago
The original jquery source w/ annotations: http://genius.it/5088474/ejohn.org/files/jquery-original.html http://genius.it/5088474/ejohn.org/files/jquery-original.htm...
azeirah 11y ago
Take a look at the d3.js source code
- Nemcue 11y ago
  This is not good advice.
edwinnathaniel 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      Ah yeah, we're having lots of issues with front end bugs causing crashes.
gee_totes 11y ago
The New York Times website has some great annotated JS source code.
chrisco255 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      I went over those pages briefly and I wish it's not Selenium-like but it kinda is... :(
jedireza 11y ago
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
SunboX 11y ago
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.
deleted 11y ago
[deleted]
deleted 11y ago
[deleted]
blairanderson 11y ago
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
drinchev 11y ago
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
theaccordance 11y ago
I could, but JavaScript has such a broad application these days that you should be more specific as to what you're goals are
arihant 11y ago
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.
at-fates-hands 11y ago
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.
0xdeadbeefbabe 11y ago
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?
chrshawkes 11y ago
React.JS is the best
hyptos 11y ago
From Addy Osmani : http://addyosmani.com/resources/essentialjsdesignpatterns/book/# http://addyosmani.com/resources/essentialjsdesignpatterns/bo...
k1dbl4ck 11y ago
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
seige 11y ago
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.
xiaoma 11y ago
The Khan Academy open sources their site's code.
MoussaMan 11y ago
AngularJs is the best
cryptonomicon 11y ago
Lodash has some of the best javascript code out there. https://github.com/lodash/lodash https://github.com/lodash/lodash

109 points by balajics 11y ago

The same todo app implemented in a bunch of frameworks: http://todomvc.com/ http://todomvc.com/

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.

Daneel_ 11y ago

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 11y ago
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.

2mur 11y ago

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

rememberlenny 11y ago
+1 for Backbone. It is very well documented
teamhappy 11y ago
I was about to suggest lodash.
adamcw 11y ago
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/

stephengillie 11y ago

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

ahmadajmi 11y ago

I asked this before and I hope it helps https://news.ycombinator.com/item?id=8128400 https://news.ycombinator.com/item?id=8128400

nickstefan12 11y ago

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

tonyhb 11y ago

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 11y ago
You mentioned Reflux but linked to Redux.
- tonyhb 11y ago
  Ah, apologies, meant Redux. So many flux frameworks and their names are all similar.
GordyMD 11y ago
Not a readable resource, but I feel it is worth the exception - Watch Dan Abramov's talk [1] about Redux (Reducers + Flux). Gives great insight into his motivation for creating React Hot Loader and Redux. +1 for Dan (aka Gaearon) being an excellent developer [1] https://www.youtube.com/watch?v=xsSnOQynTHs https://www.youtube.com/watch?v=xsSnOQynTHs

burai 11y ago

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

arsey 11y ago

The original jquery source w/ annotations: http://genius.it/5088474/ejohn.org/files/jquery-original.html http://genius.it/5088474/ejohn.org/files/jquery-original.htm...

azeirah 11y ago

Take a look at the d3.js source code

Nemcue 11y ago
This is not good advice.

edwinnathaniel 11y ago

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 11y ago
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 11y ago
  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 11y ago
    Ah yeah, we're having lots of issues with front end bugs causing crashes.

gee_totes 11y ago

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

chrisco255 11y ago

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 11y ago
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 11y ago
  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 11y ago
    I went over those pages briefly and I wish it's not Selenium-like but it kinda is... :(

jedireza 11y ago

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

SunboX 11y ago

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.

deleted 11y ago

[deleted]

deleted 11y ago

[deleted]

blairanderson 11y ago

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

drinchev 11y ago

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

theaccordance 11y ago

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

arihant 11y ago

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.

at-fates-hands 11y ago

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.

0xdeadbeefbabe 11y ago

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?

chrshawkes 11y ago

React.JS is the best

hyptos 11y ago

From Addy Osmani : http://addyosmani.com/resources/essentialjsdesignpatterns/book/# http://addyosmani.com/resources/essentialjsdesignpatterns/bo...

k1dbl4ck 11y ago

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

seige 11y ago

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.

xiaoma 11y ago

The Khan Academy open sources their site's code.

MoussaMan 11y ago

AngularJs is the best

cryptonomicon 11y ago

Lodash has some of the best javascript code out there. https://github.com/lodash/lodash https://github.com/lodash/lodash