Jump to content

Hot deploy


Deban
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...