Maintaining modular Javascript codebase with RequireJS – tutorial

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

Buy open source friendly bitcoins  Subscribe to this blog in a reader Follow me on Twitter Follow me on Facebook Follow me Google+

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>