Why should Javascript developers have all of the fun?

I've got two personal projects for CI on my semi-immediate todo list, both geared toward making out lives a bit easier:

  • better dynamic locale handling via the URI
  • hot reloading

I started in on the locale handling a couple of weeks ago but then got concerned it was going to be a BC break. Still have to look into that one further. In the meantime, though, I've just about got Hot Reloading working in CI.

What is Hot Reloading?

If you don't work with Javascript frameworks much, you might not have run into Hot Reloading. Basically, it monitors the application for any changed files and automatically reloads the page when one has been changed. This makes for a more enjoyable experience since changes happen on the page, often before you can switch back to your browser from your IDE.

In PHP, though, there are times when we would not want it to be able to reload all of the time, since it might mess with what we're testing. To bring it all under the developers control there is a new button being added to the toolbar that can turn it on or off.

How does this black magic work?

Hot Reloading works with the magic of Server Sent Events (SSE). Here's the basic flow:

  • You click the toolbar button to start the process
  • This creates an EventSource instance, set to respond to certain custom events ("reload"). The EventSource is given an URL on the server that it calls and keeps a connection open to monitor.
  • On the server, a controller and its method are fired up that gets a current hash of the application files, then starts up an infinite loop that hashes the directory again and compares the results. If it has changed, then an event is sent back to the browser.
  • When the browser receives the "reload" event, it reloads the page. This stops the previous connection to the server and starts listening for changes again.
  • All in all, it is a fairly simple process. I've added in the ability to specify which directories to watch, in case you want to limit changes to a module you're working on, or expand it to include files outside of the app folder. You can also limit the file extensions that are checked. All in an effort to keep it running quick even in very large projects.

I'm excited to get this pulled together for everyone! I think it will be a fun, helpful, and time-saving addition to the framework. I hope you will like it!