Preface

Django Ray is a new approach to front-end development with Django. The primary goal is to abstract the complexity of backend development (including VCS) to front-end interface designers by letting them edit templates and static media on a deployed project through a rich web interface.

Today I would like to introduce Django Ray.

It's a project idea I had about a week ago, it took me about a weekend to get a first prototype working.

For the moment it's far from being production ready and that's partly the reason why I'm unveiling it; this is a fairly big project and I will have to accept all the help I can get.

OK, now that we're done with the why you're probably wondering what this is all about.

First and foremost, it's important to understand the motivations behind Django in order to understand the purpose of Django Ray.

Here's a quote that I think resumes perfectly well the purpose and mindset of Django:

At the same time, it's important to recognize that Django's always been built around this ideas that designers and front-end folks ought to be able to do their job (templates/html/css/etc.) without having to know or understand Python. That was a core tenant when Adrian and company built the thing in 2005, and I believe it still is.

• Jeff Croft

I think Django managed to achieve its technical goal pretty well by providing a system that makes a clear distinction between front-end and back-end development. The admin also does makes the work between backend developers and integrator a lot easier .. but for designers the gap has still not been quite filled because they are constrained to work with the backend developer's tools.

Most designer don't want to run a python web server on their machine, they just want to code HTML/CSS/JavaScript and Django Ray gives them just that.

In essence, it means that backend developers, integrator and front end designers can work very efficiently on the same project.

The concept is fairly simple, select folders you want to be editable online (most likely templates/ and media/) and load a in-browser code editor along with a file browser to edit the static files and templates live online.

Here's what it looks right now:

If you don't want to work live on the production server you only have to deploy your project somewhere else and work on this one.

In my wildest dream VCS would be seamlessly integrated, the designer/front-end programmer could use subversion, mercurial or git without even knowing it.

I've presented the project to a couple of people who use django daily and some did not see the point initially, but once they understood that this project is not intended for backend developers or integrators, but for UI/website designers who don't work with Django or VCS, the advantages became clear.

It's important to understand that this project was not created to replace "real" editors like Vim, Emacs or Textmate etc.. It was created to integrate seamlessly in most common development process to make the designer's life easier when working with django.

The obvious advantage is the ability to work with anyone who know HTML/CSS/JavaScript without having them to know how your preferred VCS work and how to run Django locally with all the dependencies of your project. Ultimately, you should not even have to tell them what your development process is.

Just the act of checking out a project, running it and committing changes is a lengthy process if you only want to make a simple change to a template. Of course SSH+Vim (or whatever other good editor) will always be better, but it requires basic knowledges of it and privileged access to the system.

I though that "Ray", in hounour of Ray Charles, would be the perfect name for such project since one of the primary goal of the project is somewhat to make the interface designer blind to the complexity of the backend and thereby let him focus on creative tasks.

Currently planned features

These are the planned feature for version 1. Some might be added meanwhile .. or not make it.

• RCE: Rich Code Editor provided by CodeMirror with support for multiple buffers (Syntax highlight with auto-detection and switcher, syntax validation, brace matching, etc..)
• History: Saved history states with undo/redo
• Workspace: Workspace area with splittable buffers
• FileBrowser: Allows to browse files on the server.
• SVN: Subversion integration to FileBrowser (add, commit, revert, roll-back, log, etc..)*
• FileInfos: FileBrowser plugin that show extended file informations (File size, modification time, etc..)
• GoToLine: Put the cursor at a specified line
• SearchReplace: Search and replace
• Autoindent: Auto-indent code
• Config: Configuration panel
• Spell checking: Configurable spell checking (Firefox only)

Note: I would love to see other VCS working with this project, but as I have very little spare time and I only use SVN, I will only implement SVN. I'll try hard to make it generic enough so other VCS could be easily contributed later on.

Technologies used

• Django - Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
• jQuery - A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.
• jQuery UI - jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
• CodeMirror - CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content - computer programs, HTML markup, and similar.

Call for help

This project is born out of a business need. I need to work with designers without having to teach them how to use Subversion and Django. That said I'm very busy and the only way to see this project progress faster is to allow other developers to join it and participate. So if you think this project could help your business and you have some code monkeys to spare, some help would be more than welcome.

Don't hesitate to contact me if you want to join the project.

Resources

• Django Ray Google Code
• Demo (to come)

Roadmap

Highly subject to change..

• 0.1 (Mess Around) - First working state (now)
• 0.2 - FileBrowser is stabilized
• 0.3 - CodeMirror is stabilized
• 0.4 - Split buffer support
• 0.5 - Search and replace
• 0.6 - Configuration panel
• 0.7 - Subversion basic integration
• 0.8 - Integrated diff support
• 0.9 - Django Syntax highlight and documentation has been integrated
• 1.0 (Sun Shine) - First production stable release
• 2.0 Concurrent editing support ? Vim/Emacs key bindings ?
• 2.5 On site template block editing ?

Initial presentation

This is the presentation I've sent initially to get some feedback .. minus a non-disclosure slide and some corrections .. (yeah I suck at presentation and I like to put unrelated images):

Update: Before you ask, yes I know about Mozilla Bespin and it was even my intention to use it initially. After some testing I've concluded that it did not meet my specific needs for several reasons .. (It requires a much more complex backend running in parallel to Django, some critical feature like copy/paste are cruelly missing from some key browsers, the performances are not so great with Firefox.. and my personal deal breaker; the apparent lack of support of mixed syntaxes (HTML+JS+CSS..). While I think Bespin is an awesome project, I don't think it's mature enough yet to be used in my project.. maybe someday)