A cross platform competitor to Codekit

(complete with Live Browser Refreshing, Preprocess Compiler, JS minifier, Remote Device Inspect Element and HTTP serving)

Aug 15 2015 Update:

I’ve posted a much better written, in-depth,  Prepros 5 review, you can read here. The review below is for Prepros 4. 

Not long after writing it, I retired Prepros 4 for CodeKit 2/Grunt. It’s filled with typos, crimes against English and edits. Most of the comparisons were to CodeKit 1.0, which wasn’t nearly as flexible as CodeKit 2.0, and before BrowserSync (for Grunt/Gulp). 



Introduction

Time for a story… Once upon a time, when you coded the front end of a website, you wrote your CSS and JS in their native format. Today, you have your pick of precompiliers:  SASS, LESS, Haml, Stylus,  Jade,  slim,  CoffeeScript, Livescript

I have a love/hate relationship with precompiling languages, I’m not always convinced I’m writing better CSS than if by hand but the management capabilities.  (Edit: I lied, I love Sass, vanilla CSS is evil) They do amazing things, with a few simple for loops, I can easily generate an entire responsive grid but they lend themselves to nested tag hell, and encourage over redundant classes. However, this is not about my opinions on SASS.  For the most part, I’m pro-SASS.

Everyone’s work flow is a little different. I tend to favor GUIs when they empower me more than the command line.  I started with Grunt JS. Grunt JS does its job admirably from the CLI, which makes a utility like Prepros less a necessity than applications for Git management.

These days my workflow is a combination of Sublime Text 3, Sketch, Photoshop/Illustrator, Tower, Kaleidoscope, Colorsnapper, GifBrewery, ImageOptim, Muir, and Prepros.  I’m not afraid of the Terminal, and still use it do all my config apache setups for OS X but I have a fondness for GUIs, especially ones that make tasks much easier. Prepros is nearly the same level of awesome as Tower is for Git management.  I spent much less time messing with terminal and more time coding, designing and developing. 

Propros…

Prepros’s HTTP works even with local devices and devices on separate VPNs.

Prepros isn’t the first Node JS-wrapper-alternative, that keeps you out of the command line. I tried CodeKit, and I wanted to love Codekit but it never quite fit into my workflow. Ironically while writing this review, Codekit matured to version 2.0, although I was unable to obtain it due to the vague “server error”.

It worked wonders for simple projects, mostly projects that I could host on my local machine (PHP, Wordpress sites), but was the square peg for a round hole when dealing with legacy coldfusion sites, the lone ASP.NET site and anything that involved complex VMs. CodeKit also seemed to crash more than it should have, and on occasion had some issues with Grunt files. Lastly, CodeKit insisted on reloading the front tab in Safari or Chrome regardless separate if was part of the site I was working on every time I hit save on a HTML/PHP file.  CodeKit wasn’t bad, in fact it was quite good but these quirks were enough to keep me just using the command line running Grunt watch over Codekit.

The error log is easily the panel you’ll spend the most time with. Failed compiles will appear red, and passing compiles show as green.

Prepros’s user interface isn’t better than CodeKit but from a strict dev perspective:  its everything I want. It is not the world’s most intuitive app and it looks and feels decidedly like a Metro app. Fortunately, Prepros lives in the background and you’ll rarely be looking at the app outside the error log.  It only took me less than an hour with with Prepros to convert me into a buyer.

For my test, I used Zurb’s Foundation, installed it via command line for an Expression Engine based project  for a decently budgeted client. After configuring Apache and Expression Engine on my local machine, I fired up Prepros and with a simple drag and drop, and brought the project folder over to Prepros.

After a few failed compiles, and a few tweaks to the default Foundation file and Prepros, everything was working. Precompiler? Check. JS Concatenation? Check. Live Reload? Check.  

Window panes present all preprocessing elements

Victory

It was that easy. The file output paths were auto detected, my App.js minified properly along with my SCSS files. Editing my import list didn’t cause any troubles.

The HTTP server worked sharing between VMs, (VMware and Parallels), the iOS simulator, iOS devices (tested on iOS6 and iOS7, iPhone 5, iPad 2, iPad 3), Microsoft’s Surface (RT, running version 8), a Nexus 7, Android Simulator running 4.x and even a lone Windows Phone. The inspect element worked on all the devices, although hiccuped on VMs, and IE tended to complain about console.log errors in the JS for livereload.  My guess is the particular livereload.js isn’t IE9 and below compatible.

Hitting save on any file will inject the relevant CSS changes or cause the browser to reload for JS, HTML changes.

Things got even more interesting when I installed Muir for iOS. Muir lets iOS  and Android devices follow the currently open page. Paired with Prepros, you never have to touch your mobile devices. 

The highest compliment that I can bestow on Prepros is it makes my job easier. 

Nerd fun: poking around in the innards of Propros shows that Prepros is a Ruby/Node application

Pros

  • Painless, almost zero problems
  • plays nicely with built-in Apache
  • detects VPNs, and multiple net connections
  • internal HTTP server plays nicely with VMs, simulators and separate hardware
  • Adds inspect-element (lite) to remote devices.

Cons:

  • No speed increase noticeable over Grunt.js,
  • Lacks many core features that other task managers offer
  • GUI feels un-mac-like
  • Included LiveReload.js can throw up errors in IE
  • Inspect Element can view but not manipulate attributes. 

Prepros vs Codekit

So which is better? Prepros or Codekit?

Prior to CodeKit 2.0’s release, I’d of been able to answer this with absolute certainty, Prepros but that isn’t true anymore. 

Codekit 2.0 boasts Libsass (a SASS compiler running in C# instead of JS)  and a re-write of most things. CodeKit ventures deeper into management as a Bower wrapper and source mapping. For those who are looking to avoid the OS X terminal at all costs, Codekit is the better choice.   Both applications are best used with locally hosted files.  If you’re looking for , inspect element on remote devices, ftp compatibility and cross platform support, Prepros is your man.  

Update #1: I purchased CodeKit 2.0 as an upgrade.  My initial impression so far is annoyance as it does not appear to place nice with Apache configs and instead prefers MAMP configurations.   Without re-setting up my current project, I can’t do an easy 1:1 test. Dragging over the project files returned compile errors. It took me a few minutes to discover Sass 3.2.x isn’t compatible for Codekit 2.0. 

From Codekit 2.0’s release notes:

If you have Sass 3.2 and/or Compass 0.12 installed on your system, you may see an error about a “superclass mismatch for class Literal” when performing any Compass actions in CodeKit. To resolve this, run gem uninstall compass and gem uninstall sass on the command line to remove earlier versions of these gems from your system.

I’m not looking to bork my working project near the end, so it might be awhile before I can do a head to head comparison. If you’re free of VM hell and running local MAMP configs, this might be the better route but Codekit hasn’t played nicely with the legacy ColdFusion 8 sites running off a Windows Server 2003 VM using Vbox. Prepros is more akin to using Sublime Text, drag the folder over and just go to work.

Update #2: Nov 12 2014: I posted a CodeKit 2 review, which covers Prepros vs CodeKit. Prepros 5 has been released since this review originally went live.

Update #3 Aug 15 2015: The opinions posted here were wantonly out of date and poorly written. This was from my Tublme days when I tried to use Tublme which didn’t have spell check and made editing a huge pain in the ass. I added strike throughs on some lines rather than delete my old opinions as it did represent my thoughts of me, nearly 2 years ago.

Conclusion:

Prepros seems more flexible (edit: than Codekit 1.0), especially for VPN/multiple subnets and for anyone using Apache built in to OS X. I’m not a MAMP user so I can’t comment to it’s compatibility in regards to MAMP.

Its well worth its $24 price tag. Users looking for a cross-platform solution, and wins on default for Windows users.

Version reviewed: 4.0.1

Prepros official website

Cost $24