6 ms·

Amok – Live Editing for JavaScript

63 points by caspervonb 12y ago

wgerard 12y ago
Awesome. The integration is really cool, though that's totally without digging in at all to compare it to live editing and workspaces (https://developer.chrome.com/devtools/docs/workspaces https://developer.chrome.com/devtools/docs/workspaces). Looks like Firefox supports some form of remote debugging too (https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugg...), though looks like it might be more painful to integrate with (https://github.com/caspervonb/amok/issues/10 https://github.com/caspervonb/amok/issues/10). I do wonder how well this would integrate with SPAs - seems like it would be great for testing events/handlers/etc, but might be weirder (or at least possibly more work than just refreshing) for testing app starts and the like.
- caspervonb 12y ago
  Support for clients are definitely coming, JavaScriptCore and Node would be awesome, but one step at a time, trying to support multiple protocols before 1.0 could become overwhelming very quickly.
DiThi 12y ago
Does it refresh all functions? Including the anonymous ones in already attached event handlers? I have done something similar recently but it requires any live-reload-able function to have a name.
- caspervonb 12y ago
  Yep, everything including anonymous functions.
  - kylebrown 12y ago
    I see the FAQ says no callbacks. So as long as there aren't any callbacks, running app state should be preserved through code updates? The video demos a React component, great. I hope amok will work with my current workflow, using jspm (rather than webpack or something).
    - caspervonb 12y ago
      It's the opposite, if the application has no callbacks, how can anything be live edited when none of your code is hooked up to anything.
      - DiThi 12y ago
        Old callbacks can call to newer versions of modified functions. The live-reloading code I made needed named functions for this reason.
namuol 12y ago
Could it be possible to use this with headless node applications for debugging?
- caspervonb 12y ago
  Like, phantomjs?
  - caspervonb 12y ago
    That's actually something I haven't thought about! file an issue?
joeybaker 12y ago
I've really liked using this. I donated!
tstrokes 12y ago
What editor is used in the demo video?
- Excavator 12y ago
  Looks like the Gnome 3 version of Gedit.
- adrusi 12y ago
  Gedit, I think.
- caspervonb 12y ago
  As mentioned, Gedit 3.x. Dark adawaita theme applied globally to the entire gnome desktop.
scotty79 12y ago
Light table can do that too: http://www.chris-granger.com/2013/04/28/light-table-040/ http://www.chris-granger.com/2013/04/28/light-table-040/
scotty79 12y ago
Does it work with closures?
- caspervonb 12y ago
  It does.
qnaal 12y ago
I haven't used any of these, but curious if this compares to emacs': SwankJs https://github.com/swank-js/swank-js https://github.com/swank-js/swank-js JsSlime https://github.com/segv/jss https://github.com/segv/jss skewer-mode https://github.com/skeeto/skewer-mode https://github.com/skeeto/skewer-mode
latchkey 12y ago
I'm trying to understand how this is different than browserSync [1]. [1] http://www.browsersync.io/ http://www.browsersync.io/
- nilliams 12y ago
  I don't believe BrowserSync does 'hot code loading' like Amok is doing. Hot code loading is when you update the running code without reloading the page, preserving any state in the program running. If you watch the start of the Amok video you'll see author changes the elasticity value but the timer at the top keeps ticking and the ball doesn't reset to the start position like it would do if the page were simply refreshed. (BrowserSync refreshes the page when JS is changed).

63 points by caspervonb 12y ago

Awesome. The integration is really cool, though that's totally without digging in at all to compare it to live editing and workspaces (https://developer.chrome.com/devtools/docs/workspaces https://developer.chrome.com/devtools/docs/workspaces). Looks like Firefox supports some form of remote debugging too (https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugg...), though looks like it might be more painful to integrate with (https://github.com/caspervonb/amok/issues/10 https://github.com/caspervonb/amok/issues/10). I do wonder how well this would integrate with SPAs - seems like it would be great for testing events/handlers/etc, but might be weirder (or at least possibly more work than just refreshing) for testing app starts and the like.

caspervonb 12y ago
Support for clients are definitely coming, JavaScriptCore and Node would be awesome, but one step at a time, trying to support multiple protocols before 1.0 could become overwhelming very quickly.

DiThi 12y ago

Does it refresh all functions? Including the anonymous ones in already attached event handlers? I have done something similar recently but it requires any live-reload-able function to have a name.

caspervonb 12y ago
Yep, everything including anonymous functions.
- kylebrown 12y ago
  I see the FAQ says no callbacks. So as long as there aren't any callbacks, running app state should be preserved through code updates? The video demos a React component, great. I hope amok will work with my current workflow, using jspm (rather than webpack or something).
  - caspervonb 12y ago
    It's the opposite, if the application has no callbacks, how can anything be live edited when none of your code is hooked up to anything.
    - DiThi 12y ago
      Old callbacks can call to newer versions of modified functions. The live-reloading code I made needed named functions for this reason.

namuol 12y ago

Could it be possible to use this with headless node applications for debugging?

caspervonb 12y ago
Like, phantomjs?
- caspervonb 12y ago
  That's actually something I haven't thought about! file an issue?

joeybaker 12y ago

I've really liked using this. I donated!

tstrokes 12y ago

What editor is used in the demo video?

Excavator 12y ago
Looks like the Gnome 3 version of Gedit.
adrusi 12y ago
Gedit, I think.
caspervonb 12y ago
As mentioned, Gedit 3.x. Dark adawaita theme applied globally to the entire gnome desktop.

scotty79 12y ago

Light table can do that too: http://www.chris-granger.com/2013/04/28/light-table-040/ http://www.chris-granger.com/2013/04/28/light-table-040/

scotty79 12y ago

Does it work with closures?

caspervonb 12y ago
It does.

qnaal 12y ago

I haven't used any of these, but curious if this compares to emacs': SwankJs https://github.com/swank-js/swank-js https://github.com/swank-js/swank-js JsSlime https://github.com/segv/jss https://github.com/segv/jss skewer-mode https://github.com/skeeto/skewer-mode https://github.com/skeeto/skewer-mode

latchkey 12y ago

I'm trying to understand how this is different than browserSync [1]. [1] http://www.browsersync.io/ http://www.browsersync.io/

nilliams 12y ago
I don't believe BrowserSync does 'hot code loading' like Amok is doing. Hot code loading is when you update the running code without reloading the page, preserving any state in the program running. If you watch the start of the Amok video you'll see author changes the elasticity value but the timer at the top keeps ticking and the ball doesn't reset to the start position like it would do if the page were simply refreshed. (BrowserSync refreshes the page when JS is changed).