On: Managing Async Dependencies with JavaScript

[jamescostian]

AFAICT using async defer, one cannot express "you need to load X.js and Y.js before running Z.js, and you need to load X.js and A.js before running B.js". It looks like fetchInject allows you to express that type of thing.

But how is this different from RequireJS? I think RequireJS uses XHR and I don't think it supports CSS, but aside from that, what's new? I feel like this is just reinventing AMD.

[thehandofkwll → jamescostian]

Yep, this is the race condition that the author was referring to. RequireJs also let's you express these dependencies, but will block behind the cssdom due to the way it injects. Actually, I made a little library which let's you manage dependencies with script async or defer, and can be considered an alternative to the authors (neat) solution. https://github.com/bohdyone/adm.js

[lewisjoe → thehandofkwll]

Curious question: Can you explain a bit more on "will block behind the cssdom due to the way it injects"

As far as I know, requireJS doesn't do XHR requests and evals. That sounds ugly. I think it dynamically injects a script tag and loads the module. I maybe wrong.

Either way, how's it a blocking one?

So, the only thing that makes fetchInject, differ from requireJS is the non-blocking way. Is my understanding correct?

[thehandofkwll → lewisjoe]

This article by an engineer at Google explains it pretty well. My own testing has shown the same results. https://www.igvita.com/2014/05/20/script-injected-async-scri...

[dgoldstein0 → lewisjoe]

also wondering about the cssom comment. I can confirm that requirejs works by injecting <script> tags - <script async> to be precise. requirejs' api isn't promise based, but that's mostly an aesthetic concern.

btw you seem to imply that requirejs blocks - what do you mean by that?

[yladiz → jamescostian]

This seems to be a lot simpler in scope. RequireJS allows you to essentially do dependency injection, whereas this doesn't handle that. It also uses the fetch API rather than plain XHR as well as using and returning native promises when fetching libraries. I think it's primarily for loading resources from a different server, like a CDN, in arbitrary but definable order, and that's it.

[dgoldstein0 → jamescostian]

requirejs doesn't natively support css, but it has a pretty easy to use loader api so it'd be easy to add css support and in fact one already exists: https://github.com/guybedford/require-css

[emergie → dgoldstein0]

lib you linked is a bit crazy, it uses setInterval to guess when a css is properly loaded/applied and delays running dependent code

imho this is sufficient:

    define('css', function () {
            return {
                    load: function (name, parentRequire, onload, config) {
                            console.log('loading css ' + name);
                            const link = document.createElement('link');
                            link.type = 'text/css';
                            link.rel = 'stylesheet';
                            link.href = name + '.css';
                            document.getElementsByTagName('head')[0].appendChild(link);
                            setTimeout(onload, 0);
                    }
            };
    });

usage:

    require(['lib/js/jquery-ui.min', 'css!lib/css/jquery-ui.min'], function () {
        // jquery-ui magic goes here
    });

[hdhzy → emergie]

You don't need to guess, you can check document.styleSheets if it contains your file. See: https://curiosity-driven.org/minimal-loader#plugins