Hot deploy

[Deban]

I was wondering if there exists any hot deploy / hot swap / hot reload (I have no idea how it's said in javascript).

 

I thought that, as scripts aren't compiled, if I modified a .js and save it, the change will be reflected instantly without reloading, but doesn't seem to work. Seems like the scripts are already loaded in memory.

 

Is there a way to make changes to the code and see the change without reloading?

 

For example, I comment the function that moves things in my main loop, and they should stop moving.

 

Thanks.

[STuFF]

No, it's impossible. You MUST reload your page...

[Gio]

I wouldn't say it's totally impossible, but certainly it can't work with a standard browser in the way you described.

 

If you wanted to do it, you could use node-webkit and set up a script to monitor any file changes (see here), or set up a web page with a couple of iframes, one where you write code and one where you execute it - when the first iframe changes, you automatically reload the second (we've done something like that on our website here). This could also be done without reloading the whole iframe (if you don't want to restart the execution), but just by reloading (or rather eval'ing) the functions that have changed.

[Deban]

(if you don't want to restart the execution), but just by reloading (or rather eval'ing) the functions that have changed.

 

That is it. That is what I wanted.

 

How do you re-evaluate functions?

[Gio]

You would need to detect which functions have changed (it shouldn't be too hard - if you use function.toString() then you can just compare strings), and your functions should be named, or otherwise accessible. If that is true, then when you eval a string that contains a new definition for your function, the existing definition will be overridden. So for example, if you have functions like this:

var myFunction  = function(x, y) {}

that's fine. If you have functions like this:

function myFunction(x, y){}

that's also fine. But if you have unnamed, inaccessible functions like this:

setInterval(function(x, y){}, 1000);

Then it won't work, because that's not easily overridable.

 

So, provided that your functions are defined in an appropriate way, all you have to do is this (in the context of the iframe/window where your code is normally executed):

var newCodeString = "function myFunction(x, y) { /* my new function definition here */ }";try {    eval(newCodeString);}catch (e) {}

It's always a good idea to surround your eval's with try - catch statements, just in case the code that you are evaluating contains syntax errors.

[Deban]

Thank you.

[george]

I think Light Table (http://www.lighttable.com) can do what you're calling hot swap/reload. It's an lightweight IDE with an integrated JS VM which can be updated without reloading. I never tried it but this live scripting was one of the promises which made this IDE so famous in the beginning. 

 

Here a quote from a blog post (http://www.chris-granger.com/2013/04/28/light-table-040)

 

But the most powerful thing to me is the level of eval we now have. Thanks to the devtools integration, we aren't just making calls to eval(), we're patching the running VM. This means that all the things that should be "impossible" to change at runtime, are a single Cmd+Enter from being updated.

 

Regards

George