Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJS 2012 June Mikko Ohtamaa
6 likes3,558 views
The document outlines efficient techniques for developing maintainable and modular JavaScript codebases using RequireJS. It discusses the benefits of using RequireJS, such as improved code management and optimization, and outlines challenges in JavaScript development. Additionally, the document provides a practical example of a codebase structure, configuration, and deployment practices using RequireJS.
![Defining a module
• define(deps, creator) - RequireJS global
function
• deps: Array of modules we depend on
• creator: function() which takes argument 1
modules as parameters
• creator returns module exports
define([“jquery”, “js/internalmod”], function($,
internalmod) {
return { someVar : 5 }
});](https://image.slidesharecdn.com/helsinkijs2012june-120629030601-phpapp02/85/Beautiful-Maintainable-ModularJavascript-Codebase-with-RequireJS-HelsinkiJS-2012-June-Mikko-Ohtamaa-19-320.jpg)
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJS 2012 June Mikko Ohtamaa
- 1. Efficient Beautiful Maintainable Modular Javascript Codebase with RequireJS HelsinkiJS 2012 June Mikko Ohtamaa
- 2. Bio Mikko Ohtamaa moo9000 @ Twitter http://opensourcehacker.com
- 3. Audience • Front end developers working with medium and large size Javascript codebases(> 2k lines of code)
- 4. Grab the example code • https://github.com/miohtama/require-js- mooapp-tutorial
- 5. Javascript module systems • Global namespace objects:YUI, ExtJS, jQuery • Node: CommonJS • RequireJS
- 6. RequireJS • Javascript module loader for client-side • Version 2.0 still fresh • MIT
- 7. Asynchronous Module Definition (AMD) • No wait for <script> tag to complete before loading the next Javascript file • UMD (Universal Module Definition): boilerplate which makes your JS file to co- operate with several module systems • https://github.com/umdjs/umd
- 8. Y U Require JS?
- 9. Benefit #1: More maintainable code base
- 10. Benefit #2: parallel loading of non- interdependent modules
- 11. Benefit #3: automatic, more optimized, minification
- 12. Benefit #4: avoiding globals
- 16. Using RequireJS
- 17. Basic JS development challenges • Maintaining internal code dependencies • Integrating third party libraries • Exporting packages for production and distribution
- 18. Example codebase: mooapp # Fancy designer stuff ./css ./css/colorpicker.css ./images # Entry point ./index.html # Our code ./mooapp/main.js ./mooapp/moo.js ./mooapp/mooficator.js # Something we stole from the internets ./thirdparty/colorpicker.js ./thirdparty/jquery.js ./thirdparty/require.js
- 19. Defining a module • define(deps, creator) - RequireJS global function • deps: Array of modules we depend on • creator: function() which takes argument 1 modules as parameters • creator returns module exports define([“jquery”, “js/internalmod”], function($, internalmod) { return { someVar : 5 } });
- 21. Configuring RequireJS • require() and require.config() • Base URL • Paths where modules can be found • Shim and dependencies for non-AMD- compatible modules • Do in JS so can be later consumed by optimizer
- 22. main.js
- 23. HTML file is now clean
- 24. index.html
- 25. RequireJS limitations • Source code tree SHOULD match module paths • Shim existing libraries • Not file:// compatible $ python -m SimpleHTTPServer Serving HTTP on 0.0.0.0 port 8000 ...
- 26. Deployment Let’s get the party started
- 27. r.js - the optimizer • Analyzes require() and define() dependencies of a JS entry point • Will merge and bundle everything to one minified JS file preserving the correct dependency loading order • No globals > every var can be minified > more compact minification
- 28. The Magic define() and require() functions perform correctly in the merged bundle and do not actually need separate JS files
- 29. No HTML changes on production needed! ...because main.js is the only JS reference in index.html...
- 30. Makefile
- 31. Bundled $ ls -lh dist/mooapp total 148K -rw-r--r-- 1 moo staff 147K Jun 28 17:12 main.js $ ls -lh mooapp -rw-r--r-- 1 moo staff 1.5K Jun 28 17:11 main.js -rw-r--r-- 1 moo staff 1.3K Jun 28 16:20 moo.js -rw-r--r-- 1 moo staff 840 Jun 28 16:18 mooficator.js
- 32. Thank You @moo9000 http://opensourcehacker.com