Monthly Archives: August 2013

How to use any JavaScript library with RequireJS 2.1

I’ve been using Require JS for a while, having cut my teeth on 0.27.0, and gotten quite familiar with the order plugin that was a part of life when using non require-js libraries.

RequireJS 2.1 provides a different tool for including third party libraries, providing a “shim” object that forms a part of the requirejs config.

With the shim it is easy to add dependencies on non-require js pieces of code. Take a look a the documentation on the shim config(http://requirejs.org/docs/api.html#config-shim) for some details or see some examples below:

Using Twitter Typeahead with Require.js

http://twitter.github.io/typeahead.js/

shim: {
“typeahead”: ["jquery"]
}

Typeahead depends on jquery being loaded first. Because the API is done via jquery, we don’t need to worry about exporting anything.

Using Twitter Hogan with Require.js

http://twitter.github.io/hogan.js/
shim: {
“hogan”: {exports: “Hogan”},
}

hogan doesn’t depend on anything being loaded before it. It exposes itself on the global namespace as Hogan.

Using Twitter Bootstrap with Require.js

http://twitter.github.io/bootstrap/javascript.html

shim: {
“bootstrap”: ["jquery"],
}

Twitter bootstrap depends on jquery being loaded first. Because the API is done via jquery, we don’t need to worry about exporting anything.

URI with Require.js

http://medialize.github.com/URI.js/

shim: {
“URI”: ["jquery"],
}

pushing in a jquery dependency to uri. It has magic in it to detect if amd is being used, and will define itself as an amd module.

SerializeJSON jQuery plugin with Require.js

https://github.com/marioizquierdo/jquery.serializeJSON

shim: {
“jquery.serializeJSON”: ["jquery"],
}

serializeJSON depends on jquery being loaded first. Because the API is done via jquery, we don’t need to worry about exporting anything.

D3 with Require.js

http://d3js.org/

shim: {
“d3″: {exports:”d3″},
}

D3 doesn’t have any dependencies and exports itself with the d3 global object.

Rickshaw with Require.js

http://code.shutterstock.com/rickshaw/

shim: {
“d3″: {exports:”d3″},
“rickshaw”: { exports: “Rickshaw”, deps: ['d3']}
}

rickshaw depends on d3, and exposes itself with the Rickshaw global namespace.

Getting Started with D3 By Mike Dewar

I picked up a review copy of this book quite a while ago, being intrigued by D3, but not really knowing what it was. It was only more recently that I have been working on a codebase that uses D3, and so had a need to read the book. I’d been tinkering around the edges, but then had a strong need to do some d3 codeing, so picked up my copy of “Getting Started with D3″.

It’s a good thin little book that does a really good of introducing D3 and how to work and think in the D3 way. I found it a really useful tool for learning D3 and it gave me enough to do what I wanted. It’s a good entry point, and helps give an idea of how to work with the D3 APIs. The book shows good examples of consuimg JSON data, and how to render the data into the DOM with D3.  It additionally goes through some SVG and charting examples. It is worth noting that the book is a short read. If you are expecting a detailed reference to D3, this isn’t the book for you.

I’d recommend the book to any developer who wants to know more about D3. I’d strongly recommend it to someone who wants or needs to get started writing D3 code quickly.

[This book was reviewed as a part of the O'Reilly Blogger Review Program]