DailyJS

DailyJS

The JavaScript blog.


Tagamd
Featured

animation graphics modules amd

Particle Paintings, AMD to CommonJS with Recast

Posted on .

Particture

Particture

Tadeu Zagallo sent in a Canvas experiment that uses typed arrays, optimised sorting algorithms, and inlining and bitwise operators to boost performance. The Particture demo allows you to use your webcam for the source image, and draws images with a cool trail effect.

The repository at tadeuzagallo/particture has the source, and it uses dat.gui for the controls.

Recast

Many readers seem to be searching for solutions to the module refactor problem, where older projects are refactored to use modern module systems. Dustan Kasten wanted to convert projects that use AMD to CommonJS, and he's used Recast to do this, through the recast-to-cjs project that is published by his company (Skookum Digital Works).

Dustan has written an article that shows how to convert a project to CommonJS: Converting a project from AMD to CJS with Recast. The AST is traversed to find AMD definitions, and then converted into equivalent CommonJS dependencies.

It's possible that Node developers may end up doing something like this if ES6 modules become the norm, although I suspect ES6's export and import statements will need manual intervention to take advantage of import obj from lib.

Featured

modules keyboard amd

Define.js, Combokeys

Posted on .

DefineJS

DefineJS (GitHub: fixjs/define.js, License: MIT, npm: definejs) by Mehran Hatami is a new module loader. It implements the AMD pattern and also supports Promised Modules, and other new nonstandard related module techniques.

You can specify the module's global name by including a global attribute on the script tag:

<script global="definejs" src="define.js"></script>  

Now you can declare a module with definejs.define() and load dependencies with definejs.require. Promised modules are implemented by returning new Promise when declaring a dependency.

The author has included tests written with the Karma test runner, so you can run the tests against a real browser.

Combokeys

Shahar Or sent in a keyboard shortcut library called Combokeys (GitHub: mightyiam/combokeys, License: Apache 2.0), a fork of the popular Mousetrap project.

It has some cool changes: it's been refactored to use CommonJS, and it doesn't automatically listen on document. You can now specify which element it listens on for keyboard shortcuts. That was actually one thing that prevented me from using Mousetrap in a project.

Featured

modules harmony amd

An Alternative to AMD: CMD

Posted on .

By now most of us use AMD or CommonJS as our module API. With Harmony on the horizon, there doesn't seem to be much need to innovate where libraries like RequireJS have established a niche. Despite this, John Wu sent me his module loader that can be found in his project wd.js.

This approach uses a chainable API which allows modules to be loaded asynchronously in a browser-friendly way, without AMD's less fluent syntax:

wd.module('core.util')  
  .require('core.bar')
  .require('core.foo')
  .body(function() {
    // foo and bar are now loaded
  });

John calls this style CMD, which stands for Chainable Module Definition. Although it seems like an obvious idea, it's new to me and I think it fits in well with other modern JavaScript libraries.

Featured

libraries jquery jqueryui amd

Using jQuery UI with AMD

Posted on .

As of version 1.11 you can use AMD with jQuery UI. RequireJS will work, or any other AMD compatible loader.

That means you can do this:

require(['jquery-ui/autocomplete'], function(autocomplete) {  
  autocomplete({ source: ['One', 'Two', 'Three'] }, '<input>')
    .element
    .appendTo('body');
});

Doesn't that look a lot better than what we had before (script tags, monolithic $)? The old Autocomplete style would have used $(selector).autocomplete, which is low on syntax but high in coupling. Even though Autocomplete's API is always going to be coupled to jQuery, I prefer the idea of being able to load it in a modular way, and to potentially be able to inject a different dependency.

The jQuery/jQuery UI stack is still more monolithic than some of the newer MVVM or component-based solutions, but this may help you use some AMD-based techniques with your existing jQuery UI projects.

Also, I know there's always someone who wants to point out how great Dojo is, so here's Dojo's AMD post from 2011.

Featured

jquery chrome amd build

GitHub Avatar Chrome Extension, AMDClean

Posted on .

GitHub Avatar Chrome Extension

GitHub Avatar Chrome Extension

Writing Firefox add-ons or Chrome extensions can be off-putting for those of us who are good at JavaScript but not so great at browser plugin APIs. Anas Nakawa sent in chrome-github-avatars (GitHub: anasnakawa / chrome-github-avatars, License: MIT) which is a Chrome extension for displaying GitHub avatars on the news feed page.

It might seem like a modest extension, but the reason I liked it was he used a Yeoman generator. Anas' project includes all the stuff I'm familiar with, like Bower and jQuery, but also things that I'm not too familiar with, like Chrome's manifest.json. It seems cool that you can use tools popular in the JavaScript community to create browser plugins.

AMDClean

AMDClean (GitHub: gfranko / amdclean, License: MIT) by Greg Franko is a build tool for converting AMD code into standard JavaScript that works with RequireJS's optimiser.

By incorporating amdclean.js into the build process, there is no need for Require or Almond.

Since AMDclean rewrites your source code into standard JavaScript, it is a great fit for JavaScript library authors who want a tiny download in one file after using the RequireJS Optimizer.

So, you get great code cleanliness with AMD, reduced file sizes, improved code readability, and easy integration with other developers who may not use AMD.

Greg notes that it also supports Grunt, so it should be easy to drop into your existing projects.