What Zelda Taught Me about Front End Engineering

Writing good JavaScript is hard. You're locked in a neverending battle against browser quirks and copy/pasted spaghetti code.

Know what else is hard? The Legend of Zelda.

The similarities run deeper than you'd think.

Video: https://vimeo.com/54993676

Transcript

1. Treating JavaScript Like a Real Language Or: What Zelda taught me about Front End Engineering
2. Matt Steele •@mattdsteele •http://matthew-steele.com
3. JavaScript is Fraught With Peril
4. Anti-Patterns Everywhere
6. The browser is the most hostile software engineering environment imaginable. - Douglas Crockford
8. Its famous difficulty demanded so much, not just from my hands but from my entire ragged nervous system, even from my temper, my character. It never explained itself and so conjured, via ingenious online components, a community as helpful and treacherous as any group of humans. Tevis Thompson http://tevisthompson.com/saving-zelda/
12. To win at JavaScript, we have to treat it like a real language.
13. Learn the language Use appropriate tooling Unit test Use build tools
15. Learn the Language
16. “JavaScript is the only language that I’m aware of that people feel they don’t need to learn before they start using it.” Douglas Crockford
19. js-assessment
21. Code Katas
23. Tools
25. As an engineer, there is a short list of tools that you must be rabid about. Rabid. Foaming at the mouth crazy. Rands http://www.randsinrepose.com/archives/2009/11/02/ the_foamy_rules_for_rabid_tools.html
26. Learn your editor
28. Emmet (zen coding)
29. Arguments over style are pointless. There should be a style guide, and you should follow it. Rebecca Murphy https://github.com/rwldrn/idiomatic.js/
30. “use strict”;
31. ;
32. jsHint Your First Unit Test
34. http://nicknisi.com/blog/blog/2012/11/12/lint-javascript-on-commit/
35. Watch other people’s workflow
37. Testing
39. ⌘+R
40. Lincoln
41. Omaha
42. Jasmine
46. Use a Build Tool
47. •Run tests •Apply linting •Concatenate & Minify •Compile •Remove debugging statements •Precompile templates
48. http://gruntjs.com/
49. •CSS linting •Compress images •auto-watching •Create documentation •Download & maintain dependencies
50. http://yeoman.io/
51. http://jenkins-ci.org Continuous Integration
53. CoffeeScript