Cloning Backpack
Just over a month ago now, i got sick of my chief open source project, RailsCollab. Nobody seemed interested in it, and the code was growing tired and deprecated. So i decided to try making another open Ruby on Rails project.
Like my previous chief open source project, i decided my new one was also going to be a clone. Mainly because i couldn’t really come up with anything else more interesting, bu i also wanted to see what it would be like cloning something from scratch.
After much deliberation, i decided the focus of my attention would be to clone another of 37Signals’ products. Not Basecamp this time - that has already been done to death. Instead, i decided to try and clone… Backpack!
Interestingly while i looked far and wide for a comparable product, i couldn’t seem to find anything. The only one that came remotely close was TiddlyWiki. But while that was free and open, i felt it completely missed the niche that Backpack filled. Collaboratively edited pages, which are actually easy to edit.
The nitty gritty
First of all - before i even writ one line of code - i decided to check out Backpack’s underlying data models. They told me a lot about how Backpack worked, and of course they gave me a few hints about what data i should store.
Backpack
Models
(generally created and modified dates exist for all of these)
Pages
- scope
- title
- email_address
Belongings (basically reference from page -> list item + position.
referred to by id)
Lists
- name
List Items
- completed
- content
- order
Notes
- title
- content
Seperators
- name
- page id
Tags
- name
WriteboardLink
Writeboard
- title
WriteboardPages
- content
Reminders
- at time
- content
- creator
- remindees [Users]
Emails
- title
- content
Statuses (one per user)
- message (text)
- last update
- owner
Journals
- body (length=255)
- owner
- last update
Users
- name
Calendar
- color
- subscription url (pulling from other calendar?)
- name
- token (used in url for sharing)
Events
- title
- occurs_at
- occurs_until
- reminded_at
- remind (bool, note fixed time before)
- all day (bool)
Next i decided to sketch out some of the models. has_many, belongs_to, etc. I also decided to give some models such as the “Belongings” different names, as i thought the originals sucked.
(Note that by this time i decided to concentrate my efforts on making a Page editor, as i felt that was the key defining feature)
After i got that out the way, i built a simple page RESTful scaffold for editing pages. All it did was render page slots and the widgets contained therein. What it lacked was the rather crucial AJAX editing that was prevalent in Backpack.
So then i decided to take a closer look at how Backpack’s AJAX page editing worked. It turned out that there were a few crucial components:
- The widgets - the real content of the page. e.g. Notes, Lists, Dividers
- The insertion bar - this pops up when you hover your mouse over the top or bottom of the widgets.
- The action bar - this pops up when you click “Insert Here” on the insertion bar, and is inserted between the relevant widgets.
- The actions on the action bar - when you click on them, either a widget is inserted (e.g. list) or a form is shown in the slate.
- The slate - this either exists in a container before the widgets, or in the action bar. It contains most of the forms.
These components are almost exclusively powered by client-side Javascript. Only when you get to the parts where content is added, edited, or removed from a page do you get an AJAX request sent to the server. e.g. Inserting edit forms, adding widgets and belongings, etc.
What you get back from the server is usually Javascript code which alters the content in the page according to the request.
So once i figured all that out, i eventually managed to implement a rather nifty AJAX-powered page editor which somewhat resembled Backpack’s. Mission accomplished!
The result
Well, here it is. It’s called Rucksack, and it acts similarly to Backpack. You can make pages, and share them with others to edit collaboratively. Strange but true.
“Now wait a minute!” you might be thinking, “it looks like crap, and it doesn’t implement everything“. True, but remember that i was only interested in implementing a proof-of-concept page editor. I wasn’t planning on implementing everything and making it look nice. That is for later.
Now while i did start off thinking of Rucksack as a Backpack clone, i don’t think it is the best frame of mind to be in. So for future development, i will be concentrating less on copying backpack, and more on tailoring it to what i think will be useful in organising.
Meanwhile, i have put the code up on github for anyone to check out.
