Rapid website development with django and jQuery UI

Last week, I launched my latest development project: The official site for the band Murasaki (紫).

I was happy to take on this project, partly because Murasaki is something of a legend in the Japanese rock scene (and especially here in their home prefecture of Okinawa), and partly because it would be a good chance to test out some ideas I've been having about getting simple, clean websites up quickly and efficiently.

There was a firm deadline for getting the site up: a major Japanese heavy-metal magazine (Burrn!) was going to feature Murasaki, and they were going to list the band's website. My strategy was therefore to get something simple and working up by the deadline, and then add to the site gradually.

The Tools

django

I'm partial to cherrypy/jinja2/SQLAlchemy as my web stack, but for this project I chose django for the website backend, because django is known for making bog-standard stuff very easy.

The built-in admin interface was a big win for django, because it allowed the band to get in and start adding information right away, as I worked on the site design and structure.

A major annoyance, however, was the inability to smoothly evolve my database. django won't modify database tables for you if you add a field to one of your models, and since I'm growing the site organically, I'm faced with either mucking with the SQL by hand to modify my tables, or violating YAGNI by adding all the fields up front, even if they're not used now (and might never be used).

A good example was lyrics for song tracks. At first, I didn't add a lyrics field, because we weren't sure if we were going to publish them. But then the band's manager decided that it would be OK, so I had to modify the database to add the field. The next issue is samples for tracks; the band thinks that it would be a cool idea, but hasn't worked out if they want them. So that will be another modification to the database if they're added.

I think that django's insistence on making database evolution as hard as possible is wrong-headed and violates the Pythonic principle that we're all consenting adults. Modify the damn table for me, and let me deal with the consequences!

I'll note that although there are a couple of django evolution apps, the ones I checked didn't support sqlite databases (which I'm using because the database is currently around 100 KB, and I don't expect it to ever pass 1 MB).

jQuery UI

I chose jQuery UI for the site layout. The Theme Roller application for designing a custom theme was a huge win; I was able to get exactly the look and colors I wanted in minutes.

One small issue I had was that the UI is a bit too coupled to the JavaScript end. For example, I decided to use the tabs widget for the navigation menu, but out of the box, this widget makes you load all the content into the page, and switch using JavaScript. I had to muck about in the CSS file in order to have the tabs link to actual URLs.

I also benefited from a couple of other jQuery components, such as jQuery galleria for the photo gallery (although I'll probably move to something else as more photos are added, and I add a tagging feature).

WordPress

I used WordPress to create two blogs for the site (one English and one Japanese). Yes, there are blog solutions for django, but WordPress is ready to go out of the box, and in this case (a tight deadline and budget), practicality definitely beat purity.

I created themes integrating the blogs into the site design using Themes Press — that was $10 very well spent! I doubt that even an experienced wordpress hacker could create an integrated theme for less than $10 of their time.

Overall Impressions

I think that the combination of django and jQuery UI can make designing a simple site very quick and painless, although django has some issues with organic site growth, and jQuery UI couples the CSS and JavaScript a bit too tightly for me.

There were a couple of other minor issues (such as when my approach to internationalization differed from django's), but they were probably due more to my lack of familiarity with the frameworks than inherent limitations, and I found workarounds for all of them, so no big deal.

It was also a good experience for me to step away from my more familiar combination of cherrypy/jinja2/SQLAlchemy to use django. I think that in cases like this one, where you have non-programmers contributing a fair amount of the content, the advantages of the free admin interface outweigh the loss of flexibility from using an all-in-one stack like django.

7 comments to Rapid website development with django and jQuery UI

  • Yes, that’s all good, but seriously, how long would it take to implement this? Do you have to be a professional or can I just do it?

  • @Diane

    Well, you should have a passing familiarity with python and javascript, but I don’t think you need to be a master programmer to get something simple like this up and running.

    It took me about three or four days of programming, although that was split over about two weeks total.

  • : ) that is certainly one of many ways to look at it 😉

  • Masklinn

    A major annoyance, however, was the inability to smoothly evolve my database. django won’t modify database tables for you if you add a field to one of your models, and since I’m growing the site organically, I’m faced with either mucking with the SQL by hand to modify my tables, or violating YAGNI by adding all the fields up front, even if they’re not used now (and might never be used).
    This isn’t quite correct. While Django itself does not provide a way to migrate databases in this manner, there are several Django applications which do, the best-known one probably being South.

  • @Masklinn

    Thanks for the link to South; I’ll look at it the next time I develop a django site. It would be nice for migrations to be built into the django core, though.

  • yelbart

    I’m new to django and i really want this kind of framework using also jquery ui. can i ask a favor then,can you please give me a copy of the site that you made because i want to review on how did you integrate jquery ui to django. thanks a lot…

  • John Carlson

    I am faced with starting to integrate JSON and JavaScript into my Django site, initially I used datatables, a home grown menu, and Django Forms and custom HTML. I haven’t really found the “master/detail on a single page” of the Django admin interface yet–and I don’t really want to expose the admin interface anyway. I’d like to move away from templatized forms to something more like a JQuery form plugin. Have people done this and can point the way?

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>