Process

Developing web applications is hard work which requires a lot of time spanning multiple talents. We have a methodic approach, especially in cases of complex projects, to reduce the risk of losing project scope, not respecting times of delivery and wasting your and our valuable.

Scope

In a generic web application developing process we’ve identified five main phases:

  • Requirements definition
  • Design
  • Development
  • Testing and QA
  • Release

Project management follows all phases and defines a project plan composed from a list of activities which are monitored during each phase of a project. For each task we define a set of information useful for monitoring, for example:

  • Assignment
  • Time Estimate
  • Time logging = costs
  • Version
  • Dependancies

In small projects the project manager is the client.

We use an online tool for all project management and communication. It allows for PM’ing a project effective and easy. Check out our secure our secure PM software at https://core.sproutventure.com, all our projects are private but you can get a feel for the tool with our open source projects.

1 Requirements Definition

In this first phase we define the scope and needs of your web application in terms of what your application must do, main features and technical requirements:

Scope
In order to define the scope of your web application is sufficient we compile a detailed list with a clear description of application features. At this moment it is not important for you to determine “how”, we will help you realize the “what”.
Needs
Needs analysis is a crucial part of developing process. In this step we have to estimate potential traffic, choose a server-side language (PHP, ASP, Coldfusion…), database, choose an hosting service… Place a big attention on not to overrate/underrate estimates!

At this point we evaluate every thing with a right balance between times, costs and objectives.

2 Design

After requirements definition phase, we have to “design” your application with a clear project. In this phase we following steps:

An application map contains meaningful and essential information about the structure of your application: pages (represented with some blocks) and main relationships between them.

Unless you’re project is very large visual comps will replace application maps.

If we do create an application map it could look like this:

An application map shows some “locations” (pages) and a “path” (relationships between pages) which we have to follow in order to proceed, page-by-page, to implement your application in the next phase. In this way we’ll save a lot of time, having clear in mind what we have to implement.

Design: Database
Ok, now it’s time to design application database. A simple way to do that it’s using a entities-relationships (ER) model. We wont bore you with the details but something visual might help.

Design: Page Structure
Next step is to design a wireframe of the page,s identifying all main sections using a name (for example #header#navbar,#content, #sidebar).

Design: Programming Language
Taking an object-oriented approach for developing your application, we define classes, functions and all server-side features you need. This isn’t “development” but a way to have a “guide” for what we’ll implement in the next phase.

Design: JS Framework
In this step we choose a JavaScript Framework (jQuery in 95% of all cases.), than pass to identify the main features you want to implement (drag and drop, animation effects…) compiling a simple list which associates each specific feature to one or more pages identified in you application map.

a diagram showing the design process

A this point design phase is completed and we can start implementation!

3 Development

This is where the rubber meets the road, all of our planning allows for the development process to be efficient and precise. If it helps, this is our normal process for development.

  • Media preparation ( slicing in photoshop, importing media, etc. )
  • Markup ( (x)HTML )
  • Build application functions ( e.g. application class, application functions, DB interactions, queries, and every thing requires a server-side interaction.  )
  • Styling ( CSS )
  • Effects ( Javascript: drag and drop, animation effects.. )

4 Test

During this phase we have to “stress” your application executing your code in various conditions (for example using different browser). Our objective is to detect all application bugs and fix them before QA.

Quality Assurance usually comes from our client. This is where you’ll be able to take it for a spin in our staging environment.

A staging environment is provided for 90% of our projects and provides an way for you to test things out and provide feedback before release.

5 Release

Finally we’re ready to release your application.

a diagram demonstrating the release of a web application