If you haven’t seen Bret Victor’s talk, please find 54 minutes and do it. This video is giving many interesting ideas, inspiring people to create new things. The main idea of his talk (at least as I understood it), is whatever you do, you have to see the result of your work as soon as possible. This short feedback cycle is important, cause it leads to better ideas and good productivity.
As a developers, we do code. Applying Victor’s principle, ideally we should have this code immediately running and showing it’s results of execution. Some experimental IDE’s like Light Table is trying to adopt this principle now.
Ideal workflow is something like, you apply changes to JS, press Ctrl + S in your text editor and browser get’s immediately reloaded, showing the results of execution. That’s sounds really cool and fortunately there is great solution for that. It’s called LiveReload from Andrey Tarantsov.
It can be installed as either a
How does it work? Take a look on a diagram.
The LiveReload plug-in (or livereload.js script) expect’s that there is Web Socket Server, where it connects to and start to listen for changes. Web Socket Server is responsible for tracking changes and if changes occurred, it send the package of data with information about the changes, back to the web socket. LiveReload receives the data and reloads the browser.
As you installed plug-in and pressed “LR” button, it’s gonna light green if connection to server is successful, otherwise it will pop-up the message, that server is not available.
So, to make LiveReload work properly we have to provide an Web Socket Server, that conforms to LiveReload interface.
There is a great plug-in for Sublime Text 2, from Janez Troha called, LiveReload-sublimetext2. It’s get easily installed through standard ST2 package installer (package name is “LiveReload”). Basically, it instantiate Web Socket Server inside the sublime, listening to editors event’s and push data to socket.
As soon as it’s installed, and browser connected to it, you can now modify any HTML/JS/CSS file. As file get changed and saved, you will see LiveReload-sublimetext2 will immediately send the command and browser got refreshed.
When I first time tried that, I could not believe how smooth it was. Can’t even believe how I lived with-out it before. Nothing to add here, just nice and easy.
“Any IDE” in my case means Visual Studio, where I spent some time if I’m not Sublime. Unfortunately, there are no dedicated plugin for VS (as seems there are no for JIdea and Eclipse, so good opportunity for developers). Even so, you have a chance to get benefits of LiveReload. All you need to have is Node.js or Ruby installed on your machine.
Originally, LiveReload comes with Ruby-based server, that you can install and used from gems. I’m not much that comfortable with Ruby, so I went Node.js way.
There is Node-base LiveReload web socket server from Joshua Peek. It’s written in coffee-script and actually really easy to adopt. Here is an example, how I used that for my project. With a simple .cmd, I start up livereload, specifying which folder to observe.
@echo off node ./tools/livereload/server.js ./src/Candidate.Nancy.Selfhosted/Client/
It will start up the server, wait till browser connects and watch all files in folder for changes.
Not everything so perfect with that approach, though. There are 2 reasons, why I did not finally like that:
fs.watchFile, which is quite slow (at least on Windows). That mean’s if you save the file, it takes 1-1.5 seconds for browser to refresh.
There reasons above prevent me to go on with node-livereload. So, even if I work on .NET-based application, I do C# in Visual Studio, but HTML/CSS/JS in Sublime, having the all it’s benefits. So, I basically have 2 things opened side-by-side.
That works very fine to me, I don’t want to press F5 anymore. Do you?