Blaze: Instant Code Reload Demo (+Beta)

EDIT: A beta version of this package is now available https://atmospherejs.com/qualia/reval

I was able to figure out how to get instant front-end code reloads for Blaze (both the HTML & JS files); this trick could work with more than just Blaze, but so far I’ve only spent time getting it to work in Blaze. Check out a demo video below:

Mike Lublin will be presenting this feature, and many other cool Meteor related things we do at Qualia (http://qualia.com), at the next Meteor Night on February 23rd. Also, here is a shameless plug for our jobs page; we are hiring lots of engineers :slight_smile:

I’m not quite ready to release this as a package, but I’d figure it’d be good to put a demo video out there. No promises, but we will try to release a package at the same time as Mike’s Meteor Talk.

30 Likes

We should be releasing a sublime plugin pretty soon as well.

5 Likes

Now this is a very interesting thing. Hear that, all you guys claiming there is no progress in Meteor community? :wink:

7 Likes

We’ve come a long way since Ideas For Faster Reloads :slight_smile:

2 Likes

Can’t wait to try this :slight_smile: :slight_smile:

2 Likes

This is going to be great :astonished:

1 Like

Hi veered

So at the very beginning, you type “Hello, this is pretty neat right” and the title on the page updated as you were typing?

That’s so cool - so instant update before waiting for save/restart cycle.

Can’t wait for you to provide a package!

Thanks!

1 Like

Wow this is amazing! And it’s really good to see Blaze is still getting love from companies and the community. Nothing beats Blaze!

Can’t wait to start using this.

2 Likes

Yep! It instant reloads. It’s even faster when I’m not video recording. I have some plans to make it re-render pretty much as fast as you can type. Also, it’s smart enough to not push anything when the template or code is malformed.

Doing the good work :fire:
Even if you can’t make a package directly, could you please put up a gist or something if you can? Interested in playing around with this. Would save us a bunch of time atm while refactoring.

What’s the chance of this working with the rest of a code base by the time you release it? I would personally pay for something like this, and others probably would too.

Right now there are a few things that are slightly coupled with our codebase but I think they are not too difficult to factor out. I’m going to work on getting this package ready for public consumption tomorrow (and perhaps some of our other internal packages, we have some realllllyyyyyyy useful internal stuff). The weirdest things about how this works are:

(a) It requires an editor plugin; right now we only have plugins for Emacs/Spacemacs & Sublime Text. Very easy to add support for new editors though.
(b) It works best if each template is in it’s own JS/HTML file. If there are multiple templates in a file it’d require additional work (however, I’d guess it’s probably not too hard to get it working).

1 Like

I’m currently using it with Sublime, and having it save when I stop typing. It’s about as fast as anyone would want it.

I’ll try to create a package for Sublime sometime soon and lucas will be working on OSing the meteor side and Emacs stuff.

If there’s a way to make it work for Webstorm I’m all-in for help :slight_smile:

1 Like

I managed to write one in emacs lisp without knowing lisp, so I think you’ve got a good shot at making one for Webstorm :wink:

I’m loving the idea of this package… I was blown away when I saw live CSS push and imagine this would even more exciting.

However, I think it may be a bit too “clever” with the Sublime Text integration. I think it would be a much cleaner solution if it worked on file save. After all, the file save is when we say, “okay, this is ready.”

I think it would be sufficient if, whenever a <template> or Template-related code was updated, it would skip the rebuild and just send a patch. Then, all other changes would trigger a rebuild.

On a side note, would be cool if text editors could tell us that there is an error with our templating before we find out in the browser window

I also think that’d be really convenient! Unfortunately (1) it’s hard to control the Meteor build system like that (2) you can’t do as-you-type reloads without an editor plugin

Alright… I’ve published a beta version of the reload package! I hacked it together pretty quickly today, so the code is ugly and it might break. That said: https://atmospherejs.com/qualia/reval

9 Likes

Had a quick look and confirmed that the in-browser editor is working for me, with instant reloads on both the html and js changes.

Quick notes:

The path for the url param needs to be a full path, not a path relative to the project folder.
Relative imports break.

Looks promising though! Pretty busy at the moment but might take some time over the weekend to try hacking on atom.

1 Like

I updated the package to support relative paths now (good catch, it’s much easier on the eyes).

I also added some super simple Sublime & Spacemacs plugins to the Github repo. I left the as-you-type reloading out of the plugins because it complicates them significantly.

2 Likes