Writing Modular JavaScript

a talk given at IT Services Tech Talks.

Transcript

1. Writing Modular JavaScript or, making JavaScript tolerable. Dave King - m.ox team
2. 1. Not a JavaScript expert 2. Not a fan of JavaScript language design 3. Not sure any of this applies to you a. This stuff isn't "one size fits all" b. Use at your own risk Disclaimer
3. The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Complex is better than complicated. Flat is better than nested. Sparse is better than dense. Readability counts. Special cases aren't special enough to break the rules. Although practicality beats purity. Errors should never pass silently. Unless explicitly silenced. In the face of ambiguity, refuse the temptation to guess. There should be one-- and preferably only one --obvious way to do it.
4. ...Zen of Python, continued. Namespaces are one honking great idea -- let's do more of those!
5. Modules • Logical unit of code • Namespacing • Separation of Concerns
6. JavaScript • Global namespace • DOM - 'document', 'window'... • jQuery - that's all there is to JavaScript right? • Does it need modules?
7. Why write modular JavaScript? • JavaScript Applications ◦ New Mobile Oxford, 28 .js files, ~2k lines of JS. ◦ Work in progress • JavaScript running outside the browser ◦ on your Server ◦ in your database...! • Maintainable • Reusable
8. How? • Harmony - ECMAScript 6 ◦ Next version of JavaScript ◦ Pending browser support ◦ Very flexible ◦ ... long way off? • AMD & require.js ◦ Full browser support now ▪ even IE6 ◦ Simple (if slightly less flexible) syntax
9. Asynchronous Module Definition Example app/foo.js: define(['lib/jquery'], function($) { ... return {myValue: 5}; }); Example bar.js: define(['app/foo'], function(foo) { if (foo.myValue == 5) { ... });
10. Require.js Optimiser - r.js • Minify, optimise your AMD modules • Ship a single .js file if you want ◦ e.g. for phone manifest files, building phonegap applications like new m.ox • Allows for benefits of AMD at development time, no drawbacks when in production.
11. Q&A