project steps in web application design/programming

Question

I'm looking to start working on a web application and I'm almost done with the functional specification:

Where do I go now?

• Do I begin work on creating the html and css?
• Do I begin creating the backend body of code? (setting up serverside email validation and database data-entry functions)
• Do I begin working on the client side scripting? (javascript/jquery)
• Do I begin working on the database structure?

Is there a best-practice order to these things?

Thanks!

Answer 1

Okay, you've created a great spec. Now it's time to expand that "description" into functional user interface mockups.

Why?

A spec says what an app "should" do. It can even be very detailed about it. But complete user interfaces say exactly what an app "really does". After all, do users really care what is under the hood?

In our experience, we find that projects that have the user interface designed and refined (valid html for example) BEFORE the functionality is applied go together several times faster and more efficient than the others.

• A spec can only contain a small percentage of the actual details that you run into when implementing an application.
• A functional User Interface can cover nearly all of the actual details that you run into when implementaing an application, at a fraction of the time of actually making it work.

Once the client/stakeholder is pleased with the UI, then it is a quick route to plugging in the functionality.

And a functional UI is not a small job. Maybe even 20-40% of the work could be spend doing that.

--

All that being said, don't waste time making everything pretty -- just focus on highly usable interfaces. A graphics person can come by later and make it pretty while you are busy making it work.

Answer 2

The answer is: all of the above. (e.g. HTML/CSS, server-side, database, client-side scripting, etc.)

However, only the smallest possible amount of each of those required to get the simplest single feature actually working.

Based on your question, it appears you've never done a web application before. That's OK, and your question is a good one, as I recall finding my first web app quite daunting.

To get started using this best practice I recommend short/tight iterations, where each iteration yields finished working code.

Here's a simple description of this process, per my experience:

• Stop working on your functional spec - set it aside, and keep it - it is important work.
• Choose 1 feature...make it the absolute simplest feature in your spec as it is right now.
  • my guess would be: to display the simplest possible version of your home page
• Start working on everything it takes to make your super-simple homepage really work.
• To make this 1 page work, you are going to have to learn a little about every part of your stack - except perhaps the database, that's OK, you can take that on in a later iteration.
• Choose the tools in your stack...
  • development machine/environment (e.g. linux/apache/php, or windows/iis,asp.net, etc.)
  • if you don't know your stack, ask your friends or colleagues to recommend one.
  • find a tutorial on development language (php, asp.net, javascript/jquery) - there are plenty of tutorials online - just google for them
• Following the tutorials and/or asking specific questions on SO and/or SF, get your tools/platform installed, and get a tutorial example to work.
• Once you have confidence, start clean, and develop your super simple homepage.
• Now...return to your functional spec, and choose the next simplest feature - perhaps one that involves the database.
• Repeat the steps above, selecting your tools and learning how to use them with a tutorial, then move on to implementing your actual simple feature.
• After you've done a few simple features, let's say 3 for example, review your functional spec and see if it needs updating based on what you've learned doing the first 3 features.
• Review your code from your first 3 features, did you learn anything since you began? Is there perhaps any reason to refactor or clean up? If so, do 1 pass at clean up/refactoring.
• Once you're happy with your 3 simple features, go back to your spec and choose another feature and/or add more sophistication to an existing feature.

Each cycle described above is an iteration, keep them short and always finish with working code that you could potentially ship, if your app required only that small feature.

I didn't invent the process above, it's called Scrum. Although you don't really need to know anything more than what I have described above to get started, you can read more about it (in your spare time, or perhaps not until you've completed 5 simple features) here:

wikipedia entry on scrum

Note that each iteration will likely require you to learn a little bit and create a little bit of each of the component parts you describe above: HTML/CSS, server-side code, database, etc.

Thus, what you will do "first" is implement the simplest possible feature, using the least amount of coding required to get that feature working.

Good luck.