Building an AJAX application with POG and ExtJS: Part 1 -the setup

September 4th, 2007 Posted by Don Albrecht

This is part one of a multipart tutorial on AJAX application construction. Today we will be building a Software Project Scheduling application based on Joel Spolsky’s Painless Software Schedules system.

The application will be built using the Php Object Generator, and ExtJS Framework.

Step 1, The design.

Although the overall principles of the design are derived from Joel’s Essay, The following highly simplified use cases will explain how they are used in our final application.

Project Designer: The original designer of the project breaks tasks down into atomic units and adds them to the schedule. These tasks are all believed to be between 2 & 16 hours of work.
Boss Type Person: He is responsible for herding the developers to a consistent goal and end. He logs into the system and views reports on project status. He knows what the developers are doing, how long the project is currently estimated to take and has access to various reports on the project to appease his stake holders. He’s also the one responsible for assigning developers to tasks.
Developers: They are responsible for actually doing the work. They generate & update time estimates, write code & further atomize tasks.

In practice, the workflow is something like this.

Some PHB tasks Janette the software designer with designing a whizbang new Web 2.0 social networking application for tracking all sightings of lime green ford bronco’s in a tristate area. She does some research and writes a detailed project specification for the program. She enters all of the various tasks into the task tracking system. Just before jetting off to Barbados for a month of drinks served in coconuts and snorkeling, she sends the Word file to her boss as an email attachment and lets him know that the project is in the system.

The PHB spends all day Friday looking over the spec & task list and starts assigning all of the various tasks to his developers through the system.

When the developers come in on monday, they grumble and groan and start filling in their time estimates for the various tasks they were assigned. Developer Joe discovers that task number 253, “Hack into government spy satellite and upload macro to automatically track all lime green objects entering the tristate area” is a bit too complex to be implemented as a single task. Instead, he breaks it down into 37 subtasks and sends the revision to the PHB.

The PHB approves the change.

Once the initial estimates are in the system, The PHB is happy with the 90 day development cycle and developers get to work. After 3 weeks of coding however, Developer Sarah discovers that her task (plot all lime green broncos on a map), is taking significantly longer than was originally estimated. She adds the needed 480 hours to the schedule.

A week later, the PHB suddenly discovers that the project estimate has been delayed 3 months. He looks through the assigned tasks and spots the problem. Since map plotting is crucial to the success of the project but the delay is unacceptable he begins reassigning uncompleted tasks to other developers and reduces the delay to 6 weeks. Since the 6 week delay is still unacceptable, he begins looking for features to cut. In a Eureka moment, he realizes that utilizing CIA property is a bad idea and he drops task 253 and shuffles developers around a bit more. He gets the delay down to 2 weeks and everyone is happy.

The actual application will consist of 5 screens & a Desktop Widget:

Login
Task View
Reports
User management
Options

Getting Started

This project will require that you have access to the following:

LAMP server for testing. I recommend XAMPP
Text Editor/ Development Environment for PHP, HTML, Javascript, CSS. I recommend Aptana.
Internet Connection
Zip utility ( needed for downloads & POG objects. POG objects may not unzip in OSX ).
Local copy of ExtJS 1.1
Local copy of Blueprint CSS