Listotron Blog

The development blog for Listotron!

Test, test, and more testsNovember 10 2008

Also fun news:

I’ve added my first round of SimpleTest unit tests for the Listotron server side, and I’ve also added some jqUnit test for the client side.

The cool thing about the jqUnit tests - they run on live Listotron code. So all the client side tests not only test the JavaScript, but also end up testing that the entire app does what we think it does. They end up doubling as functional and regression tests.

awesome!

Tiny Update - Slight Architecture ChangeNovember 10 2008

I just spent quite a few hours this weekend making some changes to the Listotron code-base.

The Problem

The browser polls the server many many times a second, and the server sends back whatever’s changed in that small amount of time. This means that if an AJAX call is taking about 100ms, then the change 1 user makes to the list will show up on all other collaborators screens after no more than 200ms. Pretty sweet!

So I had all of that working a few weeks ago - multi-user list collaboration and all - but I found that sometimes collaborators lists got out of sync. Not all of the edits seemed to make their way across all collaborators.

The problem: I was doing all of the data manipulation in JavaScript in the browser, and only sending the changes to the server. So when a user indented a line in the list, instead of sending an “indent” command to the server, I would indent locally and send the updated row’s properties to the server.

The problem was further compounded by the fact that 1 edit (that should have been atomic) was split into multiple AJAX calls (due to how BAJAX bundles sets of ajax requests).

The problem manifests itself when 2 people edit the exact same row at the exact same time (not that uncommon in my 6 row demo list). Each user’s JavaScript would update the row differently and send their own results to the server.

Multi-User Listotron PrototypeOctober 4 2008

I’m very happy to show off the first prototype of Listotron below - complete with multi-user edit capability! The video below shows me editing in one browser and edits showing up live in a 2nd window. You’ll have to trust me when I say that it works with 2 users editing in their own windows.

 

Bundled and Ordered Asynchronous AJAXSeptember 22 2008

The Problem

 
Imagine for a moment that you’re building a web application based nearly 100% percent on AJAX. And imagine that you’ll likely need to send bursts of  multiple AJAX requests to your server, and you also need all of these requests to be processed in order when they hit your server. You want a near continuous AJAX connection - every action, every edit, every keystroke the user makes - all of these need to be sent to your server for processing. You are building Listotron.

Since we’re designing Listotron to be a 100% AJAX based application, every edit the user makes will need to be AJAX’d to the server. What’s more, we want users to be able collaboratively edit the same list at the same time - Google Spreadsheets style. This means that every edit, every tab, every indent, everything needs to be AJAX’d quickly and efficiently to our server so we can update any collaborators that might also be working on the list. And as I mentioned, all of the edits need to happen in order, since most edits to the list will depend on previous edits to the list.

My goals for speed are to make the real-time editing even faster than Google’s collaborative spreadsheet editing. A large part of the perceived speed of collaboration is the frequency of AJAX calls (the more calls per second the faster the app can update collaborato

jQuery : the Official JavaScript Library of ListotronAugust 10 2008

JavaScript has allowed us to create dynamic interfaces, adapting to a user and providing context in many ways. In past endeavors, we have developed the entire front-end layer using JavaScript: a vast object-oriented structure to deliver HTML on the fly.

When we started using JavaScript as a serious web-interface tool, JavaScript libraries were young and most too cumbersome to implement. We decided on the cross-browser library for its structure and ease of modular integration. However, in the past two years, JavaScript libraries have matured, each taking a separate approach in programming methodologies. jQuery is the one we enjoy using the most.

Rather than focusing on why we did not choose other libraries, we will keep things as short as possible by providing a few reasons we chose jQuery.

jQuery is small.

It’s true. jQuery has left out many utility-style functions Prototype has included, and rather focuses on functions that require some cross-browser love. jQuery is easily extensible if we find we need to add functionality to the library.

In addition to the jQuery library being small in size, it allows us to write shorter, more readable code. This provides a significant decrease in development time as well as a decrease in page load time.

jQuery is easy.

A friend of mine once told me “It took me less time to learn jQuery and implement a jQuery