Can loading and running be separated? about script.js HOT 17 CLOSED

check out the beta V2 branch. it supports parallel downloading, but in-order execution. it's intermittently failing one of my tests in IE7 so I've been reluctant to release it

from script.js.

@tauren have you had a chance to play with the V2 branch yet? Source is here

from script.js.

@ded -- been on vacation, I'll try to play with it some next week. I'm not sure how much help I can be with your IE7 bug since IE7 is not officially supported by my webservice. Of course I'll let you know if I find anything.

from script.js.

@ded -- I finally was able to use V2. Since I was running into some issues with my application while using it, I created a small experiment that loads scripts very similar to how my application works. I whipped up a simple backbone app to test within this experiment.

Both this expeiment and my app work beautifully in modern browsers using script V2:

Firefox 5.0 on Ubuntu 11.04
Chrome 13.0.782.112 beta on Ubuntu 11.04
Chrome 13.0.782.107 on OSX snow leopard
Chrome 13.0.782.112m on WinXP

On the following browsers, both my app and the experiment work intermittently. I'm getting errors that make me think the scripts are loading correctly, but they are running in random order, or perhaps the order they finish loading in. When I get luckly, they load in the right order and the apps work. Otherwise, they display errors like "Backbone is undefined".

IE 8 on WinXP

Neither my app or the experiment works on these browsers. The scripts don't even seem to be loading at all, as I don't see them in the Firebug Net tab. I can trace through the initial script that is loaded via a script tag in the HTML, but the other scripts never seem to get loaded.

FF 3.6.16 on OSX
FF 3.0.19 on WinXP

So far, that's all I've been able to test. Here's the experiment if it helps. Note that I'm using coffeescript, building with cake, and using smoosh to combine everything. Just look at www/index.html for the javascript. Also note that I added $script.styles as I suggested in another issue.
https://github.com/tauren/scriptjs-experiment

See it live here:
http://tauren.github.com/scriptjs-experiment/www/index.html

So I'm curious, what browsers do you plan to support with V2?

from script.js.

Excellent, these are great tests. My plan is to get these working on IE7 at minimum, ideally IE6. So you can count on some eventual work to get those working right.

from script.js.

@ded: cool, I'm glad they will be helpful. I had to get some work done, so I've reverted back to v1 for now.

I was actually surprised it didn't work at all in FF3. I can probably live without IE7 and certainly without IE6 support, but FF3+ would be good to have.

My code in these tests is so much cleaner than my v1 codebase. Making sure the right dependencies are loaded in the right order just using callbacks is not only messy, but also lengthens the overall load time.

from script.js.

I've really been looking forward to utilizing the v2 code, but am curious if you've had any luck getting it to work in IE7 or FF3?

No rush of course, v1 has been working fine for me, but loading dependencies in a predictable order sure would make my scripts look and work nicer!

from script.js.

I was trying some interesting advanced stuff with V2.... but fwiw, the gain wasn't amazing. if you want ordered execution (but not necessarily parallel downloading). you can add this to your toolkit:

function order(scripts, done) {
  (function callback(s) {
    (s = scripts.shift()) ? $script(s, callback) : done()
  }())
}

It's pretty straight forward and leverages the internals of $script.js. Use it like this:

order(['a.js', 'b.js', 'c.js'], function () {
  alert('all done')
})

It's so basic that I might just add $script.order into V1

from script.js.

That's pretty nice--parallel downloading would be ideal, but this might be a good solution for now. Thanks!

from script.js.

ok, i added $script.order in this latest release. it does a little more than what I explained above, but it still is nonetheless restricted to not loading the next until the previous ones load before it (as I mentioned, this is a ridiculous thing to get right, that even LAB.js is constantly trying to get right.

So... it works like this:

// assign an id and a callback
$script.order(['a.js', 'b.js', 'c.js'], 'base', function () {
   console.log('done')
})

// subscribe to the event
$script.ready('base', function () {
  console.log('done')
})

// just assign it to an id
$script.order(['a.js', 'b.js', 'c.js'], 'base')

// only have a callback
$script.order(['a.js', 'b.js', 'c.js'], function () {
  console.log('done')
})

from script.js.

Thanks--while as you mention it doesn't solve the parallel loading request, it looks like it'll definitely make it simpler to load dependencies without extraneous nesting, and that's a good thing. And as a bonus it seems to use the same syntax as $script() itself so it'll be easy to integrate.

from script.js.

@ded - thanks for this enhancement, as it is basically what I'm doing now with a cleaner syntax.

However, does the fact you've closed this issue mean that $script.order is as far as you will be taking this in $script? Or do you still plan to support parallel downloading in the future? I'm sorry, but I'd really like my cake and to eat it too, and if you aren't going to go that route, I'd like to know so I can pursue other solutions. Thanks!

from script.js.

LAB.js is really the only solution at the moment that is doing this right (nobody else, as far as I know (I know a lot of them)). So if you want ordered parallel loading across all Grade A browsers, LAB.js is where you want to be. Otherwise I'm probably not going to pursue this further.

from script.js.

Ok, thanks for your feedback. This means the V2 branch is effectively dead then?

Also, have you checked out yepnope? Modernizr changed from LAB.js to yepnope. It is smaller than LAB.js and appears to have similar parallel loading, ordered execution capabilities. Plus it has CSS loading support.

You say that LAB.js is the only one who's doing this right. Are you including yepnope in the list of those who are not doing it right? Or have you not checked into yepnope?

from script.js.

As far as I know yes, YepNope like LabJs has a nice way of parallel downloading and ordered execution. I use it within Modernizr sometimes.

From their page: "yepnope.js fully decouples preloading from execution. This means that you have ultimate control of when your resource is executed and you can change that order on the fly."

I've found yepnope to be somewhat useful (especially for conditionally loading JS shims), but I just REALLY love the simplicity of the callback structure that script.js uses--it's so easy to reference a loaded script later on without having to specify a callback initially.

from script.js.

Agreed, I prefer the script.js callback structure. That's why I was hoping the script.js V2 branch would be released. For projects where I'm using Modernizr, yepnope might be the way to go. Especially if I want to separate loading order from execution order.

@ded - is there something you know about yepnope that makes you feel labjs is doing it right and yepnope isn't?

from script.js.

yepnope from the last time i checked had more of my (this) implementation... and scouring through LAB I know it takes even a bit more than what I had in V2 and really, it's truly a pain in the ass to get right across IE6 to various versions of Firefox, and Chrome

from script.js.