Good review, not sure it makes me want to move away from Coda but nice to see there's some good alternatives out there.
If you are a web designer or developer and you use a Mac, chances are you were at one time frustrated with the lack of good software to help make your job just that little bit easier. Before 2007 there wasn’t really anything you would call an IDE (Integrated Development Environment). Sure, there were syntax-highlighting text editors like BBEdit or Textmate, but they lacked features that could make your life easier. And there was Dreamweaver, an expensive and massively bloated piece of software that is overkill for a lot of professional-quality work.
Then along came Coda, by Panic. Coda was (and still is, in many respects) wonderful. It offered the ability to manage sites, built-in FTP capabilities to automatically upload files to your sever, an almost-live preview window, “clips” to make adding frequently reused code (like doctypes) much easier, and a terminal window (which I’ve never used).
For a long time it was the bees knees of web development, and many people consider that it still is. But over the last year or so another app has emerged as a contender for our coding dollars: MacRabbit’s Espresso.
Like Coda, Espresso is a bit of a mix of code-editor and IDE. It has many of the same features as Coda, lacks some, but attacks the problem of integration in a different manner. What they do have in common though, is the “all in one window” approach. There are a couple of exceptions, one being the Projects window in Espresso and the Clips window in Coda, but the majority of your time will be spent in one window.
Projects vs Sites
Espresso organises your work into projects. The basic project info asks for a folder location on your computer, a name, and that’s it. You can change the colour and image of the project icon after it’s been created. Setting up your servers is done once you get into the site itself. There’s not much else to it, and I find it to be lacking in completeness.
Coda is superior in it’s site management. Not only do you choose your local folder, you also set up things like your testing and live server, the urls used to access your testing and live servers, as well as some other options like site-specific terminal access and source control information. Coda will also automatically create a screenshot of the site to use as its thumbnail, an extremely handy feature.
Both applications allow you to have multiple sites open at the same time: Espresso by selecting a different project from the project window, and Coda by creating a new window and then selecting a new site.
Tabs vs Workspace
Once you get into your project/site, one of first differences you find is in how you work with the files of your website.
Coda uses a standard tabbed interface, opening up new files in a new tab, and this works well enough. The problem with this approach is when you start to have more than a few files open at the same time: if you click on an image to preview it in Coda, it opens as a tab, which can quickly fill up your tab bar. Sure you can then manually close all the tabs, but often it results in closing files you still wanted to work in.
As an alternative approach, Espresso uses a nifty idea called a workspace. The workspace appears as a list of files at the top of the file browser on the left. You can preview any file in your project without adding it to the workspace, so previewing images doesn’t needlessly add files to it. As soon as you start editing a previewed file, it will appear in the workspace and remain there until you’re done with it (by manually closing it).
Code Navigator vs Navigator
Both apps include a feature called a navigator, which is intended to help you find your way through your code. This is useful when navigating large files, especially if you’re working with server-side code, by itself or integrated with HTML code.
Coda’s navigator, which I’ve only just discovered exits so can honestly say I’ve never used for more than a few minutes, appears at the bottom of the file manager on the left-hand side. It shows the major features of your code, like heading tags in your HTML, DIVs (but not their relationship to each other) function names in your PHP, and CSS declarations. Click one and it will take you to the corresponding section of your code. Nothing fancy here.
Espresso’s navigator lives on the right of your screen and displays the entire hierarchy of your page (minus the content) in a tree-style diagram. Instead of limiting itself to just heading tags, you can find forms, paragraphs, comments, and PHP blocks. In PHP itself you can see class declarations, properties and if/else statements. If you’re a fan of CSSEdit, you’ll be pleased to know it displays the CSS declarations in the same way: visually. The navigator will even honour CSSEdit’s folder structure!
Viewing your web pages is one area where Coda far exceeds Espresso. While both provide the functionality via Webkit, Coda just does it better. For starters, Espresso never asks you what the HTTP site root is, either for the remote server or the local one. This means it will try to display a page you preview with the file:// protocol instead of the http:// protocol. Anything other than plain HTML will break, as will “root” links (i.e. that start with “/”, which I often use). The only way to get around this is to type in the URL manually, which is a pain and breaks the “live” aspect of the preview.
The great thing about the way Coda manages sites is that it doesn’t suffer this problem. Preview the page, and it will automatically go to the correct http:// location (so long as you set it up correctly). There is also extra previewing goodness in Coda: you can actually open up a preview window right beside (or below) your code! This will live update as you make changes, so you can see the results instantly. Another bonus is that this preview doesn’t even have to be the same page: you can drag another file to the window, hit the preview button, and see that page instead. You lose the “liveness” of the preview, but it’s still very handy when making stylesheet changes or fixing a bug in a PHP include.
Okay, so what is it like to actually code in them?
Well, Coda acts like a syntax-highlighting editor with line-numbering but with a few more features. You can change the colours to whatever you like, it supports many different languages out of the box (so to speak), and you can download more. It has typing suggestions with some code completion, and that’s about it.
Espresso does that, plus a little more. The biggest difference is that Espresso has a code-folding ribbon so you can hide blocks of code in one line. This is great for PHP classes, in that you can condense each function down so you just see it’s declaration. My biggest gripe is that it doesn’t save this between editing sessions — you have to do it every time you open the file. Still, it’s a step above Coda in that regard.
Another handy feature is automatic tag closing. As soon as you type “</” it will close the last open tag it finds. If the tag isn’t what you expect then you know to check your code, and if it is then it’s saved you a few keystrokes. Espresso will also highlight broken tags in red. Finally, I tend to find that Espresso’s syntax highlighting is more accurate for HTML that’s heavily intertwined with scripting code. Like Coda, you can also download more, but they call them “sugars”.
Working with servers
Both Coda and Espresso have server-management capabilities but differ in their approaches and abilities.
As mentioned above, in Coda you set up your local and remote servers as a part of the site preferences. You get one remote and one local server. You can then work with the server from the file manager on the left. Coda will track which files in your site have been modified — they will show with an arrow in a circle beside them — so you can publish the files individually, or click the “Publish All” button to publish all changes at the same time. You can edit files directly from the server, but there is no option to automatically publish files as you save them locally.
Espresso allows you add multiple servers to your list. They appear at the bottom of the file manager, which is where you perform most of interaction with them. You can browse the server, edit permissions, and delete files, just like in Coda.
One thing Espresso does not do is track which files have been changed, other than what it keeps in the workspace (which you can publish via a contextual menu). When you click on a server, it provides you with options to update it. One of those is the “Update” button, which will, when you click the “Review Changes…” button, compare the timestamps of your local and remote files and then allow you to upload any local files newer than those on the server. The “Merge” function works both ways, ensuring the latest-modified files are synched. The “Mirror” function works like “Update” but will then remove any remote files that don’t exist locally.
Espresso does provide a “Quick Publish” option to automatically upload files as they are saved, but this must be enabled every time you open a file.
Coda does have a couple of features that Espresso lacks, but these will depend on your needs. SVN version control support is built right into Coda and can be set up in the site preferences. This makes it easy and convenient to work with SVN repositories, if you need them. I tried it but found that Time Machine was all the version control I needed. This might change in the future, but not right now.
Coda also has a terminal window built in, for those who like to work in the command line, the settings of which are stored with the site. Another feature I only just discovered is validation checking: when selected it will display a little alert symbol on lines that don’t meet W3C specifications. Handy.
So, what’s the conclusion? Well, as with most things it comes down to likes, needs, and wants. What I like will be different to what you like, what I need will be different to what you need, and so on …
Personally, I’m liking Espresso a lot right now. The navigator is brilliant for CSS (especially if you use CSSEdit folders) and PHP, and even HTML if you comment your code. The Update/Merge/Mirror server functions are very handy. Quick Publish is good for minor changes on a couple of pages at a time. Code-folding, although flawed, is still a step above not having it. I prefer Coda’s code completion, but Espresso’s syntax highlighting is more reliable.
The one feature that almost killed it for me was the live preview. Coda’s ability to have proper local and remote URLs as a part of the site preferences means it can do real live previewing of dynamic code. I also extensively used the split-window to have code on one side and preview on another. It was so handy that I had to seriously weigh up whether I wanted to give that up.
In the end, I decided that a change in workflow (Cmd-Tabbing between Espresso, CSSEdit, and Safari) was worth it.
Another thing to keep in mind is that MacRabbit consists of two uni students with heavy workloads. This means updates aren’t exactly frequent — in fact they’re far from it. The next major version of Coda, on the other hand, is in the process and due for release … some time in the near-to-distant future. Who knows how they might close that gap in features …
Anyway, make up your own mind. Download the trial now.
Last edited by dezinerau; 26th October 2010 at 08:18 PM. Reason: Grammar and spelling
I really like Espresso, it is really fast and lean. I use it a lot for quick edits. However when it comes to do heavy development I use NetBeans for PHP and Ruby. I was hoping to use Espresso or Coda for Actionscript but their code completion is really a poor.
Both Coda and Espresso are great for HTML, CSS and basic server coding.
What's your opinion on the collaborative editing features of Coda? Have you had much of an opportunity to use it?
I have Coda but I have never been able to use the collaborative aspects due to the fact that I'm a Uni student and collaboration kinda get's you expelled. That and the fact that I'm the only Mac user in my group.
Scrum or Extreme Programming. Personally, I prefer actual in person pair programming rather than using collaboration in Coda/SubThaEdit.
If you need to discuss code on a collaborative project, I'd use something like Campire or/with github.
Nice comparison, but you kinda forgot about the fact that Espresso 1.1 has CSSEdit built in. You can load up a preview of your site in a separate window, and make changes to your CSS and it will - as you type - update the layout and style of your site
I switched from Dreamweaver to Coda - but felt it lacked the code colour hinting and tag closing abilities that I was used to with Dreamweaver. So I then switched to Espresso, and i have not looked back. I still do my previewing in Safari (then the others!). I LOVE the quick publish function, so that I just press command-S, and it saves AND uploads to my web server. I just wish it remembered if you had set auto publish on a file.
I can't think of much else that I want from it atm, apart from HTML5 support and a few bugs fixed (to do with colour hinting breaking in some instances in PHP and when comments are used).
Both great apps.
With apps like these, and Pixelmator gaining new features..... it won't be long before we can all say goodbye to the ludicrous expenses of the Adobe suite!
MacPro 8-Core 2.93Ghz, 32GB RAM, 3 X SSD R4870 | 2 x 24" Apple LED Displays | MacBook Air 13" 2012 2Ghz i7, 8GB RAM.
Not really. Sure, you can edit CSS manually in Espresso, and the preview works, but it’s not CSSEdit. You can’t create/delete/move folders, you can’t organise your styles by dragging and dropping them in the inspector, there’s no form-based CSS interface (not that I use it), and it doesn’t have the useful X-Ray mode in the preview that CSSEdit has. I’m not sure about other features, such as validation of CSS either.Nice comparison, but you kinda forgot about the fact that Espresso 1.1 has CSSEdit built in
My workflow here generally means creating the page structure in Espresso, then jumping over to CSSEdit to create the styles en masse with folder structure using the integrated preview (because it’s better for CSS than Espresso’s), then switching between Espresso and CSSEdit as needed, with only small CSS changes done in Espresso.
Anyway, I agree that there are some great apps out there that can be used if you don’t need the complexity or sheer number of features that Adobe products offer. However I think Adobe products are tools with their uses and can’t be entirely discounted. For example I’m just getting into using Fireworks for a lot of web design work and am loving it. There’s nothing that comes close in terms of focus for design for the web, though it has it’s … quirks … which mean Photoshop is still needed for a lot of things.