Subversion for Designers

If you attended Future of Web Apps this year in Miami, or even listened to the audio, it’s apparent that version control is a crucial part of building web apps. As Cal Henderson put it, “If you listen to nothing else I say today, start using source control.” This might be obvious to developers, but many web designers still have not discovered the benefits of version control. Without version control, most web designers work in constant risk. Each time a new change is made, the previous code or files disappear forever. In this article I’m going to explain how to get started and why Subversion is going to change the way you work.

Subversion is an impressive version control system that has been widely adopted. You’ve probably heard of it. You might have even tried to use it without success. Most people know they need it, but can’t get past the complexities of getting started. At Wildbit, we realized these problems and created Beanstalk, a hosted Subversion system designed to make version control painless. In order to understand Subversion, let’s start with the benefits and how it works.

Fear commitment? Drop that ball and chain.

With Subversion, you don’t have to worry about overwriting files or losing code. Subversion will keep a constant history of revisions for every file in your project. Each time changes are made to your code or files, they are preserved forever. Subversion allows you to view the changes to specific code, review with your team, and even roll back changes to previous versions. Think of it as a never-ending “undo” for the life of your projects.

In addition to revision history, Subversion improves team collaboration. Many people can update the same files without the risk of overwriting each others work. Subversion also provides a constant backup of your files in a central location, where you can share changes and updates with clients or team members. Since it preserves the history of your files, you can instantly compare multiple revisions of HTML mockups.

How does it work?

Subversion works as a client/server tool, similar to the way most designers use FTP. A Subversion server stores all of your files in a repository and a Subversion client is used to download (update) and upload (commit) file changes to the server. In the past, the process of setting up a server, finding a good Subversion client, and learning the basics of Subversion was a painful process. These days there are many tools and services available that allow almost anyone to get started. Let’s jump in.

Setting up a Subversion server

The first step is to setup the server. This used to be the most difficult step, but there are now various web applications that simplify this process. Services such as Beanstalk, Versionshelf, CVSDude, and RoundHaus make it easy to create a repository, manage users, and view activity. These services have literally taken the process from hours to minutes.

After signing up for one of the services, you can setup a repository. A repository is like a project, which defines the location where your files are stored. Each repository has a URL that is used to interact with the client and the server. As part of setting up the repository, you can either import an archive of existing files or start from scratch. An example repository URL would look something like http://svn.account.beanstalkapp.com/reponame where reponame is the name of your repository.

Installing the client

The next step is to setup a Subversion client on your computer. I feel like this is the part where most people give up. There are many options and most are poorly documented or difficult to install. Fortunately, there are a few installable clients that can make this process much easier without having to bother with the command line.

If you are on Windows, I highly recommend TortoiseSVN. This Subversion client seamlessly integrates into the Windows Explorer, making it easy to interact with your Subversion repositories. With a right-click, you are provided with the most common Subversion commands. The installation process is really straight-forward.

On Mac, you have several options. The biggest issue with Subversion on Mac is that you need to install Subversion as well as the GUI. Fortunately, there is a package from Martin Ott that will install Subversion for you. You can grab the file (My Subversion-1.4.4 Package) from the link and install it. After the install, you can choose a Subversion GUI client. I recommend either svnX or Textmate’s Subversion bundle. Details about the use of each product can be found on the respective web sites.

Basic Subversion usage

With a Subversion server, repository and client we are ready to start using Subversion for a project. The best way to explain Subversion is through a normal day to day work cycle. In this example, I will use Beanstalk (server) and svnX (client) to cover the common commands and terms.

svn checkout

The first step is to checkout the files from your subversion server. A checkout is the first download of files from the Subversion server to your computer. In your Subversion client you will insert the repository URL along with your username/password and perform a checkout. This will “checkout” all files from the repository to a directory on your computer. The screen shot below shows that we checked out several files. As you can see, I am using Subversion to edit this article.

Checkout in svnX

working copy

The working copy is the local copy of files on your computer from your repository, which is created after your first checkout. Subversion will automatically keep track of changes in your working copy as long as you edit within the initial checkout directories. For now, I will edit this page in Textmate.

svn commit

After editing the file, we can commit (upload) the changes to the Subversion server. svnX will automatically find all new or changed files when you are ready to commit. Make sure to write a detailed comment that explains the changes.

Commit in svnX

changeset

Once the files are committed, Subversion will create a changeset that records the changes from the commit. Each changeset is assigned a revision number and is frozen in history in your repository. The changeset and revision is displayed in Beanstalk and is visible to other members on your team. The screen below shows that I modified the file subversion-for-desgners.html at Revision 2.

Changeset in Beanstalk

diff

When viewing a changeset or file in Beanstalk, you can see a “diff” of the changes. A diff is simply the difference between one revision and another, which will display the lines of code that were changed, added, or removed. This makes debugging and reviewing changes very easy, since you can review specific differences in each file between revisions. I went ahead and edited this line so we can see the “diff” between revision 2 and 3.

Diff in Beanstalk

svn update

If you are working in a team it is important to have the latest version of files. An update is the command used to grab the latest version of files from the Subversion server. You should run this often to minimize any conflicts with team members.

SVN update in svnX

svn log

The Subversion server will keep a constant log of everyone’s activity across your repositories. Most hosted Subversion services offer a section where you can view recent revisions and changesets. This is ideal if you need a snap shot of recent updates in your projects. The log will display the latest commits from each person as well as a direct link to the changeset.

Activity in Beanstalk

much more

There are many other terms and commands, but the above are the most important to get started. Once you start using Subversion on a daily basis, you will learn how to resolve conflicts, revert files to previous revisions, and create a smarter workflow for your process. The best in-depth resource for Subversion is the book Version Control with Subversion. Instead of starting at the top, I recommend starting at the chapter Basic Work Cycle. This will help you discover the key advantages of Subversion without reading the entire book.

Taking it further

I tried to keep this as simple as possible, but once you get started with Subversion there are many more tools and benefits. Hosted Subversion services have some great tools that allow you to automatically deploy files from Subversion to your servers, notify your team when new changes are committed, integrate with your favorite web apps and allow anonymous access for open source projects. After you decide to use Subversion, you will wonder how you ever got any work done without it.

If you have any questions, feel free to post comments and I will reply quickly. You can also email us at support@beanstalkapp.com if you need help along the way. Our goal is to open up the world of version control for designers, so we are here to help.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Comments

24 comments on “Subversion for Designers

  1. Your tutorial article was very helpful — thank you! I have a question. I'm using svnX, and I was able to commit to my svn server. I believe there's still another step for deploying the committed HTML file, correct? How do I deploy? Thanks in advance. – Randy -

  2. Your tutorial article was very helpful — thank you! I have a question. I'm using svnX, and I was able to commit to my svn server. I believe there's still another step for deploying the committed HTML file, correct? How do I deploy? Thanks in advance.
    - Randy -

  3. Pingback: All my bookmarks ever | Daniel John Gayle

  4. If you’re looking for a Photoshop client, I’d recommend PixelNovel Timeline.

    It’s a Photoshop plug-in and sits in PS as an additional palette (hence no need to switch from the PS window to get or submit versions).

    It also shows the previews/info/comments of the file versions.
    And you can access all the versions online if sign up to the PixelNovel account

    http://www.pixelnovel.com

  5. Pingback: Organize Your Next PHP Project the Right Way - Programming Blog

  6. Pingback: Organize Your Next PHP Project the Right Way | KolayOnline

  7. Pingback: The Ultimate Guide to Version Control for Designers

  8. Pingback: The Ultimate Guide to Version Control for Designers | huibit05.com

  9. Pingback: Resources for PHP Webmail « David Woodfield

  10. Pingback: The ultimate guide to version control for designers « PixelNovel Blog

  11. Great article. Never considered using Subversion when designing but I will now. Thanks for the easy-to-read post!

    Cheers.