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.
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).
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.
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.
But one has to be very careful how to structure the pieces/components.
For example:
Do not write extensive unit-test on the UI but definitely have extensive Selenium tests for the UI _library_ (if you are a library builder). If you are a library user, assume the UI works as advertised and attaching/removing event-listener can be considered "configuration" type of code: test it once to see if it is configured properly and that's it!
If the SPA uses some sort of MVC/MVP, I'm hoping I can:
1. For unit-test
- unit-test individual M,V,C,P, Service, Helper, Model Validators, etc
- ability to mock different aspects
2. For integration-test
- ability to construct the whole thing (MVC/P) including the back-end, mock the View, and start controlling/simulating the code execution from the Controller/Presenter
The integration test can cover more than the unit-test to the point almost close to Selenium type of test but not as brittle as Selenium.
Gaearon is actually a hell of a JS developer (https://github.com/gaearon).
+1 for Dan (aka Gaearon) being an excellent developer
Read the underscore Source first: http://underscorejs.org/docs/underscore.html
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.
- https://github.com/jedireza/drywall - https://github.com/jedireza/frame - https://github.com/jedireza/aqua
It gets kind of hairy so I did a blog post on it: http://www.nickstefan.net/blog/view/express-under-the-hood
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.
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.
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).
Also read about 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.
[1]www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
https://github.com/hybridgroup/cylon-sphero because you can use it to control robots?
http://addyosmani.com/resources/essentialjsdesignpatterns/bo...
YMMV as its a huge codebase and it might be hard to figure out where to start.
