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

Efﬁcient 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 Deﬁnition (AMD)

8. Y U Require JS?

9. Beneﬁt #1: Moremaintainable code base

10. Beneﬁt #2: parallel loading of non- interdependent modules

11. Beneﬁt #3: automatic, more optimized, miniﬁcation

12. Beneﬁt #4: avoiding globals

13. Using RequireJS

14. Basic JS development challenges

15. Example codebase

16. Deﬁning a module

17. moo.jsmooﬁcator.js

18. Conﬁguring RequireJS

19. main.js

20. HTML ﬁle is now clean

21. index.html

22. RequireJS limitations

23. DeploymentLet’s get the party started

24. r.js – the optimizer

25. The Magic deﬁne() and require() functions

26. No HTML changes on production needed!

27. Makeﬁle

28. Bundled

29. Thank You

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