Tweek: Using Pusher to improve our dev process

We’re always on the lookout for cool and innovative ways of using Pusher so when Klaus Hartl of Tweek told us about how they’d been using Pusher we thought “that’s cool! Let’s put that in a blog post”.

What was the problem you were trying to solve?

In the past I had been using Livereload sucessfully for desktop targeted frontend-development. It makes continuous testing much easier and faster, especially the CSS part of it; no more hitting cmd-R. At Tweek though we’re developing an iPad only web application but we didn’t want to go back to tapping the reload icon while developing. It only adds up when developing for different OS versions and devices. We needed a solution that met the following requirements:

• a. has to work in any browser (i.e. won’t require browser extension), in our case mainly iOS (that’s just the start). Browser here may also mean a web view within a native application.
• b. hassle-free (portable, no need to download and install any applications + browser extensions):
  git clone, little bit of configuration and done.

We decided to use Pusher, which we were using for other parts of our app already anyway. Our first implementation doesn’t work exactly like Livereload in that it does not inject only the new CSS but always reloads the entire page. This is good enough for our needs.

How did Pusher allow you to solve it?

Pusher’s ruby gem allowed us to easily build a Guard, which is a command line tool to easily handle file system modification events, to monitor files for changes and let any listener know in realtime of such a change. It’s like autotest on steroids! So whenever the Pusher Guard detects a file change it instantly publishes a Pusher event to let any listeners know.

Once the guard-pusher gem was in place and running, our homegrown Livereload was a simple matter of adding a few lines of JS code to our application view in development environment of our Rails backed application:

javascript
1var pusher = new Pusher('...');
2pusher.subscribe('guard-pusher').bind('guard', function() {
3  location.reload();
4});
Copy

The guard-pusher gem isn’t restricted to CSS or JavaScript at all. The developer decides which files to watch for modifications, that’s simply configuration in the Guardfile. Also, obviously, it doesn’t have to be Livereload at all, it’s just that I chose to use it like that (the location.reload() part in the listener function).

How can other developers benefit from your solution?

By automating the “how to get updates in client-side code to any number of browsers” it makes cross-browser development more efficient and fun. No more manual browser reloading!

It may also help with continuously running JS unit tests across a variety of browsers at the same time.

A big thanks to Klaus and the team at Tweek for coming up with this cool use of Pusher that could come in really handy during development. It’s great to see that our free Sandbox plan can add real value to the development process. If you’ve build something useful and/or weird and wonderful we’d love to hear from you.