4 ms·

DefineJS – A lightweight implementation of AMD module format

36 points by fixjs 12y ago

prayerslayer 12y ago
Maybe the author could comment on what's wrong with require.js (the most popular AMD module loader) and which problems DefineJS solves?
- Touche 12y ago
  The entire point of a standard is to have multiple implementations. They don't all need to be justified.
  - Kudos 12y ago
    I've just started using AMD and have no idea how this differs (maybe it effectively doesn't), so it'd be nice to have a paragraph on that somewhere.
- b3tta 12y ago
  require.js: 1249 LOC define.js: 259 LOC You should rather ask what the difference to almond is (which is also from jburke and useful for bundled loading - I think this is more similiar to define.js). almond: 275 LOC As to a reason why someone would write his own AMD loader: I once wrote one, because I want'ed to be able to pass objects as array elements to the require parameter, to forward them to the callback function. Something similiar to this: function callback(module1, object, module2) { ... } require(['some-module-ID', object, 'another-module-ID'], callback); Thus I got something similiar to Function.bind() for free. Also I could implement a global requirement list. A synchronous script in the head could add entries to this list and thus prevent the execution of any asynchronous script, which was not in the list. Thus those in the list could be loaded asynchronously. After all of them where resolved, all the others could be loaded. For instance this is incredibly useful, if you wan't to load IE shims, for things like this: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element.cla... etc. I guess I could open source it, if I feel like it. :D Edit: Fixed LOC numbers. I also just checked my implementation: Only 168 LOC, while nearly implementing AMD (without relativ paths!), tuned for Closure/uglify.js/etc. and compatible to IE6, but with those 2 features above. I guess that's pretty good too…
fixjs 12y ago
@prayerslayer: nothing wrong with require.js, the main goal is to create a more portable alternative and more importantly to add couple of new and nonstandard ways of modular coding as a proposal for the JavaScript community.
- burntsushi 12y ago
  Could you please explain in more technical detail? What specifically are the trade-offs between DefineJS and RequireJS?
  - Theyeard 12y ago
    I'd rather see technical details too plus maybe a comparison between require.js/almond and define.js. Currently it's not clear what are the advantages of define.js. N.b. another AMD loader (30 lines of JS): https://curiosity-driven.org/amd-loader-with-promises https://curiosity-driven.org/amd-loader-with-promises
- arcatek 12y ago
  Examples would be nice. I'm not especially a require fanboy, I use almost exclusively ES6 modules nowadays, but i'm not sure to understand what your library brings.
wldlyinaccurate 12y ago
I'm having trouble understanding why I would use this over ES6 modules, or even RequireJS/Almond? The README comes across as more of a blog post than technical documentation.
- stemc43 12y ago
  because ES6 modules are not yet well-supported?
  - Touche 12y ago
    There's a polyfill that works very well actually: https://github.com/ModuleLoader/es6-module-loader https://github.com/ModuleLoader/es6-module-loader IE8/IE9 depending on what ES6 features you use.
    - stemc43 12y ago
      I wasn't following JS loaders for sometime. Are you saying that most people now use ES6 modules instead of AMD?
      - Touche 12y ago
        No, I'm not saying that, I'm saying that you can use them and that polyfill allows you to do so.
fixjs 12y ago
Thanks for your feedbacks. The next release will be available in the next couple of hours, with a bunch of examples and a more technical RRADME.
m90 12y ago
I'm all in for more choices in AMD implementations, but why doesn't this expose the standard `require` and `define` methods? I do get that I'm supposed to map them myself, but then again I have no clue what advantage I get from this?
- fixjs 12y ago
  Actually in the current version to expose them to the global scope, you should add the global attribute to your script tag and pass the window as it's value, like global="window".
- fixjs 12y ago
  One of the main goals here is to provide developers the ability of exposing it to different globals with different behaviors and configuration, which is not possible yet in this version, but it will be there in the next couple of hours.
cj 12y ago
I recently wrote a 20 LOC (synchronous) implementation of define() and require(). https://gist.github.com/paton/ab27a1be7e843d220ee3 https://gist.github.com/paton/ab27a1be7e843d220ee3 Less than a tweet long when minified :) If file size is extremely important to your project, I highly recommend using something like this instead of almond.js or require.js.
- rkwz 12y ago
  But, what's the point of this? How's this an alternative of require.js?
  - cj 12y ago
    File size. I run a service that requires our customers to install our Javascript snippet on their page. Migrating away from require.js reduced file size by ~20%.
    - vmind 12y ago
      If it's just a snippet, and require.js made up 20% of the filesize, then why not just have a single file, or assume a single closure and concatenate a few files together? You'll gain even better filesize from minifying inside a single closure. The formalised step up from this is SMASH, which is how d3 is built: https://github.com/mbostock/smash https://github.com/mbostock/smash
      - cj 12y ago
        IMO, a big upside of using a define / require pattern, even when the final library is fully concatenated, is that you have a clear picture of all of variables that are available in a particular module. It's a little ambiguous when using something like Smash, since you're not actually importing a module onto a variable. For example, check out this random file from D3 source: https://github.com/mbostock/d3/blob/master/src/interpolate/interpolate.js https://github.com/mbostock/d3/blob/master/src/interpolate/i... As someone unfamiliar with the codebase, it's unclear to me where many of the variables are coming from (d3_interpolate, d3_rgb_names, d3_interpolateRgb, etc). It'd imagine it makes managing dependencies a bit trickier.
fixjs 12y ago
I just added a working example of DefineJS which shows the way that the regular AMD format gets implemented.
fixjs 12y ago
A new working example which shows how to use one of the nonstandard syntaxes in DefineJS, something like: use(['dependency']) .then(function(dependency){ }) .then() .cache(); Imagine a control flow in the module definition, or having different private scopes when defining a new module.
fixjs 12y ago
Check out the DefineJS-v0.2.2 with a bunch of examples and Promised Modules.

36 points by fixjs 12y ago

Maybe the author could comment on what's wrong with require.js (the most popular AMD module loader) and which problems DefineJS solves?

Touche 12y ago
The entire point of a standard is to have multiple implementations. They don't all need to be justified.
- Kudos 12y ago
  I've just started using AMD and have no idea how this differs (maybe it effectively doesn't), so it'd be nice to have a paragraph on that somewhere.
b3tta 12y ago
require.js: 1249 LOC define.js: 259 LOC You should rather ask what the difference to almond is (which is also from jburke and useful for bundled loading - I think this is more similiar to define.js). almond: 275 LOC As to a reason why someone would write his own AMD loader: I once wrote one, because I want'ed to be able to pass objects as array elements to the require parameter, to forward them to the callback function. Something similiar to this: function callback(module1, object, module2) { ... } require(['some-module-ID', object, 'another-module-ID'], callback); Thus I got something similiar to Function.bind() for free. Also I could implement a global requirement list. A synchronous script in the head could add entries to this list and thus prevent the execution of any asynchronous script, which was not in the list. Thus those in the list could be loaded asynchronously. After all of them where resolved, all the others could be loaded. For instance this is incredibly useful, if you wan't to load IE shims, for things like this: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element.cla... etc. I guess I could open source it, if I feel like it. :D Edit: Fixed LOC numbers. I also just checked my implementation: Only 168 LOC, while nearly implementing AMD (without relativ paths!), tuned for Closure/uglify.js/etc. and compatible to IE6, but with those 2 features above. I guess that's pretty good too…

fixjs 12y ago

@prayerslayer: nothing wrong with require.js, the main goal is to create a more portable alternative and more importantly to add couple of new and nonstandard ways of modular coding as a proposal for the JavaScript community.

burntsushi 12y ago
Could you please explain in more technical detail? What specifically are the trade-offs between DefineJS and RequireJS?
- Theyeard 12y ago
  I'd rather see technical details too plus maybe a comparison between require.js/almond and define.js. Currently it's not clear what are the advantages of define.js. N.b. another AMD loader (30 lines of JS): https://curiosity-driven.org/amd-loader-with-promises https://curiosity-driven.org/amd-loader-with-promises
arcatek 12y ago
Examples would be nice. I'm not especially a require fanboy, I use almost exclusively ES6 modules nowadays, but i'm not sure to understand what your library brings.

wldlyinaccurate 12y ago

I'm having trouble understanding why I would use this over ES6 modules, or even RequireJS/Almond? The README comes across as more of a blog post than technical documentation.

stemc43 12y ago
because ES6 modules are not yet well-supported?
- Touche 12y ago
  There's a polyfill that works very well actually: https://github.com/ModuleLoader/es6-module-loader https://github.com/ModuleLoader/es6-module-loader IE8/IE9 depending on what ES6 features you use.
  - stemc43 12y ago
    I wasn't following JS loaders for sometime. Are you saying that most people now use ES6 modules instead of AMD?
    - Touche 12y ago
      No, I'm not saying that, I'm saying that you can use them and that polyfill allows you to do so.

fixjs 12y ago

Thanks for your feedbacks. The next release will be available in the next couple of hours, with a bunch of examples and a more technical RRADME.

m90 12y ago

I'm all in for more choices in AMD implementations, but why doesn't this expose the standard `require` and `define` methods? I do get that I'm supposed to map them myself, but then again I have no clue what advantage I get from this?

fixjs 12y ago
Actually in the current version to expose them to the global scope, you should add the global attribute to your script tag and pass the window as it's value, like global="window".
fixjs 12y ago
One of the main goals here is to provide developers the ability of exposing it to different globals with different behaviors and configuration, which is not possible yet in this version, but it will be there in the next couple of hours.

cj 12y ago

I recently wrote a 20 LOC (synchronous) implementation of define() and require(). https://gist.github.com/paton/ab27a1be7e843d220ee3 https://gist.github.com/paton/ab27a1be7e843d220ee3 Less than a tweet long when minified :) If file size is extremely important to your project, I highly recommend using something like this instead of almond.js or require.js.

rkwz 12y ago
But, what's the point of this? How's this an alternative of require.js?
- cj 12y ago
  File size. I run a service that requires our customers to install our Javascript snippet on their page. Migrating away from require.js reduced file size by ~20%.
  - vmind 12y ago
    If it's just a snippet, and require.js made up 20% of the filesize, then why not just have a single file, or assume a single closure and concatenate a few files together? You'll gain even better filesize from minifying inside a single closure. The formalised step up from this is SMASH, which is how d3 is built: https://github.com/mbostock/smash https://github.com/mbostock/smash
    - cj 12y ago
      IMO, a big upside of using a define / require pattern, even when the final library is fully concatenated, is that you have a clear picture of all of variables that are available in a particular module. It's a little ambiguous when using something like Smash, since you're not actually importing a module onto a variable. For example, check out this random file from D3 source: https://github.com/mbostock/d3/blob/master/src/interpolate/interpolate.js https://github.com/mbostock/d3/blob/master/src/interpolate/i... As someone unfamiliar with the codebase, it's unclear to me where many of the variables are coming from (d3_interpolate, d3_rgb_names, d3_interpolateRgb, etc). It'd imagine it makes managing dependencies a bit trickier.

fixjs 12y ago

I just added a working example of DefineJS which shows the way that the regular AMD format gets implemented.

fixjs 12y ago

A new working example which shows how to use one of the nonstandard syntaxes in DefineJS, something like: use(['dependency']) .then(function(dependency){ }) .then() .cache(); Imagine a control flow in the module definition, or having different private scopes when defining a new module.

fixjs 12y ago

Check out the DefineJS-v0.2.2 with a bunch of examples and Promised Modules.