Test Drive a Browser Game With AngularJS

This workshop will cover modern JavaScript development practices through improving an existing browser game. Students will gain hands on experience with JavaScript testing, writing modular software, and building a thick client web app.

Technologies used will include Jasmine, Lineman, Rails, and Angular; but they do not define the workshop. Skills earned here are applicable to any Web project.

http://railsconf.com/workshops

https://github.com/testdouble/railsconf-test-drive-javascript

Transcript

1. Test Drive a Browser Game w/ Angular
2. testdouble.com
3. Agenda (1:30 through 3:50) 1. Test Double Speaks 2. Setup and find a pair 3. Code-Along 4. Code on your own(s) https://github.com/testdouble/railsconf-test-drive-javascript
4. Why JavaScript? https://github.com/testdouble/railsconf-test-drive-javascript
5. Styles https://github.com/testdouble/railsconf-test-drive-javascript
6. Rails https://github.com/testdouble/railsconf-test-drive-javascript No Framework Default on Rails • Routing • Rendering • No JavaScript • None • Our Users Hate Fun
7. Rails https://github.com/testdouble/railsconf-test-drive-javascript Dream-Crushing jQuery-Swamp Default on Rails • Routing • Rendering • API • Everybody JavaScripts
8. Unmanaged JavaScript Sucks https://github.com/testdouble/railsconf-test-drive-javascript
9. Goal 1: Mitigate Pain https://github.com/testdouble/railsconf-test-drive-javascript
10. Rails https://github.com/testdouble/railsconf-test-drive-javascript Angular Angular on Rails • Routing • Some Rendering • API • Some Rendering
11. Rails https://github.com/testdouble/railsconf-test-drive-javascript Ember Ember on Rails • API • Rendering • Routing
12. Goal 2: Joy In Building Cool Stuff https://github.com/testdouble/railsconf-test-drive-javascript
13. Why TDD? https://github.com/testdouble/railsconf-test-drive-javascript
14. Goal 3: Joy In Quality JavaScript https://github.com/testdouble/railsconf-test-drive-javascript
15. Goal *: Happiness Through JavaScript https://github.com/testdouble/railsconf-test-drive-javascript
16. Right Now Find a Pair Get the files https://github.com/testdouble/railsconf-test-drive-javascript With Wi-Fi https://github.com/testdouble/railsconf-test-drive-javascript Without Wi-Fi: USB stick
17. Together: 1. Review Mockup 2. Declare angular module 3. Update DOM with fire and status 4. Render headers w/ ng-repeat https://github.com/testdouble/railsconf-test-drive-javascript
18. Mission 1. Make status show the target square 2. Then make status show if we hit a ship 3. (look at the finish directories for hints) https://github.com/testdouble/railsconf-test-drive-javascript
19. In Pairs: • Make fire and status work for reals • Display a note for each square • Display win state • Test if you’d like • Work on bonus goals (README.md) https://github.com/testdouble/railsconf-test-drive-javascript Work slowly, don’t rush.