This post is a RequireJS tutorial and targeted for front-end developers who need to maintain Javascript codebases of a few or more files. By using RequireJS for client-side Javascript modules, dependencies and minification one can have an easy-to-maintan project and struggle less with everyday Javascript development tasks like debugging and deployment.

The slides and tutorial were originally presented in HelsinkiJS June 2012 meet-up.

The example application code and the slides, in the case you find slideshare.net evil, are available on Github public repository.

1.  Transcript

• Efficient Beautiful Maintainable ModularJavascript Codebase with RequireJS – HelsinkiJS 2012 June Mikko Ohtamaa
• 2. Bio Mikko Ohtamaa moo9000 @ Twitter http://opensourcehacker.com
• 3. Audience
• 4. Grab the example code
• 5. Javascript module systems
• 6. RequireJS
• 7. Asynchronous Module Definition (AMD)
• 8. Y U Require JS?
• 9. Benefit #1: Moremaintainable code base
• 10. Benefit #2: parallel loading of non- interdependent modules
• 11. Benefit #3: automatic, more optimized, minification
• 12. Benefit #4: avoiding globals
• 13. Using RequireJS
• 14. Basic JS development challenges
• 15. Example codebase
• 16. Defining a module
• 17. moo.jsmooficator.js
• 18. Configuring RequireJS
• 19. main.js
• 20. HTML file is now clean
• 21. index.html
• 22. RequireJS limitations
• 23. DeploymentLet’s get the party started
• 24. r.js – the optimizer
• 25. The Magic define() and require() functions
• 26. No HTML changes on production needed!
• 27. Makefile
• 28. Bundled
• 29. Thank You

 Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+