Ask HN: How do you begin the process of developing a web application?

[pstinnett]

I'm curious about others processes for beginning the development of a web app. It's always hard for me to "just dive in" and start, so I'm curious to get some feedback from the community.

After you have the initial idea, what's next? Start defining features? Draw up a mockup on a piece of paper? Start writing the DB schema?

[edw519]

Write something, anything! It doesn't even matter how good it is, just get something up and running. Then change it. Change it again. Repeat.

Have you ever written anything before? Good. Then take the closest thing you have from your repository, strip out the code that doesn't apply and file it under the new name. There. You're already x% done. Now finish.

I've tried many different approaches, but this one has worked best for me. It may seem counter intuitive, but I have found that things move along much faster when I enhance a minimal product than if I stew with my thoughts for too long.

[EDIT: No offense taken, but I took out the template. Now close your browser and go write your own.]

[jacquesm]

I'm with Ed on this one, with one small variation, every fifth project or so I start from a blank piece of paper just to get rid of the cruft that will build up otherwise.

That way I still have the 'blank paper elephant' to stare at every now and then but at least not every project and I find that re-writing stuff it usually comes out much better on the next iteration.

It's like remodeling houses, every now and then it pays off to raze the thing to the ground and start over instead of adapting the house to a new occupant.

[abstractbill]

This is exactly the way I work - I almost never actually start from scratch.

[smokestack]

After following the anti-planning approach for a long time, with dozens of half-finished pet projects to show for it, it seems approximately as good as procrastination (for me). If I get excited about something and start tapping away at the keyboard, I'm often left with a couple thousand lines of code and the realization that there are some major components that could have been thought out much better. The joy I originally had in creating it takes a major blow when faced with major rewrites (and the thought of all of the wasted time that could have been better spent thinking about it).

Nowadays, I'll let a project incubate in my head for a few days/weeks/months and approach the keyboard with a solid plan in mind and a well reasoned, well designed feature-set/interface.

But if you really don't have time for an incubation period, write your schema out first. This exposes so many design flaws in the beginning while it's still very easy to manipulate. This should be the "contract" you sign with your blood for the vast majority of apps you'll write for the web, and you should be spending a good deal of time thinking about it (for any non-trivial app) then, not later when you're atop a few thousands lines of uselessness.

[moomba]

You probably are never going to use the original code you put down, so its kind of irrelevant how you start designing your web app. The most important thing is to start working. By doing this you will know what works and what doesn't. This will help you in your next iteration.

[tomh-]

No offense, but please don't use this template :)

[kentbrew]

100% right. Get something working on the screen as soon as possible. Then show it to your designer and product people, and get immediate feedback about whether it looks like it's going to work for the audience or not.

[patio11]

I buy a $1 project notebook, put the name of the project on the front page, and start jotting down things in the notebook. This could be database tables, paper mockups, notes on features to add, roadmap, whatever.

Eventually, on a day I'm feeling particularly inspired, I can't stop myself from coding. This sees me make a quickie Rails development environment and push hard to get One Cool Thing accomplished. As long as I have one thing done, further attempts at coding don't feel like breaking ground (hard work!), they're just extensions to existing functional code.

You'll laugh, but the One Cool Thing I did with Appointment Reminder was making it so the logged in user can switch the color scheme for her pages. This has rather little practical utility but it was quick to do and satisfied my monkey brain: "visual changes == making progress, ergo, five visual changes == LOTS of progress."

Often the first thing I do is something with domain logic that I can only execute through the console to start out with. Crikey I love my Rails console. Right now for client work I have a program which goes to a particular government agency, slurps down a gigabyte of data, does some number crunching, and then tells you things any well-informed high schooler knows about a particular subject. The difference between the program and the well-informed high schooler is that the high schooler would get bored after listing 5 or 10 of the facts but the program can punch through thousands.

[vyrotek]

Personally, I dive right into the DB Schema. I use a modeling tool and just start with the basic relationships. For example, a User table and then as I think of features I think about how I will need to store them, how each entity relates to the other, etc. I'm a nut for normalization. At some point the schema is good enough to start coding some basic pages to login and do things. Of course, the schema never stays the same but evolves with the app.

I think the biggest reason I enjoy doing this is because I'm driven by visible progress. I do just enough DB work to then do a little bit of coding so I can do something in the app. Basically giving my self little feature goals here and there.

[nanexcool]

I usually begin with the database as well. I start creating tables for the basics of whatever I'm building and it's here that I think of new tables to complement the main ones. After that, it's mostly CRUD with some logic.

[decadentcactus]

Same here. I use django though so it's basically just typing up some quick models. If not, I'll write them in notepad in the form of:

  @Table:
  - fieldname char
  - field2 int

[tptacek]

Sinatra, Haml, Blueprint, Sass, jQ.

I have a template that does login, tabs, and layout.

I sketch in terms of "ghetto REST"; GET /foo, GET/POST /foo/new, GET /foo/1, GET/POST /foo/1/edit, POST /foo/1/delete. I write handlers before I write markup.

I write the same %ul#foos // - @foos.each do |foo| markup for every feature I start. Ditto the edit form.

Prune down, customize, work out page flows (which is easy once I have a base of things that works properly), pick a couple hotspots that want Ajax-y behavior (not because it's hard, but because whenever I start a project Ajax-y, I'm always unhappy with how brittle the result is).

I use Compass for the Blueprint/Sass style, but I don't waste too much time making things look good; my template gets me to about 80% of "competant" and 85-90% of "usable" and then, if I care, I spend money on a designer. I find knowing that I'm going to do this is liberating; means I don't waste a whole lot of time lining up pixels.

I never touch Photoshop. I can't mock up graphically. My brain just doesn't work that way. But then, I came to web dev from 10+ years of Unix commandline dev.

[elptacek]

I also recommend DataMapper. You don't mention a framework, but Sinatra is very simple and a good choice for banging out a web app fast.

Start with the main page -- whatever you (or your users, if you plan to have them) will be looking at most often. Put text on the page, even if it's static Lorem Ipsum. Or, as Tom said, the handlers for GET /foo and POST /foo. IMO, it is much easier to live with ugly pages at first than to start out with a rigid idea of a design and then struggle to cram stuff into that. Getting the CSS just so seems to take so much more time than anything else -- I prefer to save that for last.

After your main page, start asking yourself questions about how your app is going to be used. Does it need admin pages? Will it need a login page? What kind of data does each page have and how will it be displayed (eg, a directory tree with collapsible subitems)? Write all of this down. Really.

By the time you're done with this, you'll have some idea of how many pages/views you'll want, and some mental idea they should look like. Do a web search for designer portfolios -- this is a good way to find ideas for UI elements in similar apps. Use Sass + Blueprint to put the text in columns and boxes. If you use Firefox, I highly recommend Firebug (Safari has Web Inspector, but it never works quite the way I expect it to). Print out these pages and mark it up using your favorite color of crayon. Designate where stuff like images, forms and tabs will go. Take a look at CSSEdit, too.

[jacquesm]

> But then, I came to web dev from 10+ years of Unix commandline dev.

Same here, and I'm beginning to think that that is slowly becoming a handicap rather than an advantage.

[10ren]

In what ways do you find AJAX brittle?

Also, could you explain (I think it's css/ruby/REST/psuedo code for an unordered list comprised of the foos - but how is that for a feature?):

   %ul#foos // - @foos.each do |foo|

[ashleyw]

     1. Draw some ideas out on paper, and work out the minimal viable feature set.
        For some people this is just a buzz word, but I'm a firm believer in it.

     2. Use Balsamiq mockups to neatly replicate what I've drawn and make adjustments
        (this step could be skippable, but it only takes 10 minutes generally, so
        it's nice to have)

     3. If it's client work, export the mockups as PNGs and send them a link

     4. Create the design in Photoshop, rarely pixel perfect, I just use it as a
        supped-up Balsamiq, to get a feel for the design

     5. Create a Rails or Sinatra base, depending on the complexity of the project.
        For a Rails project, I git clone http://github.com/ashleyw/Slate

     6. Write some Cucumber features, referring to any notes or drawings I made in
        step #1

     7. Design the model structure, write some unit tests for them, and then
        implement each model until the tests pass

     8. Once I have a model basis, I move on to the controllers and views (HAML),
        going by the Cucumber features I wrote until they pass. Semantic markup is
        important here, but styling is not.

     9. Replicate the Photoshop design in CSS (or SASS)

    10. Launch

    11. Reiterate adding features which didn't fit into first version

[apsurd]

As a programmer I'm finding out it's best not to code anything immediately. Think [first] about the idea, conceptualize it, let it soak in your brain. Take some time to let it refine itself a bit.

[Next] would be a marketing website. Grab a theme off themeforest.net and work on a one page slideshow explaining your idea. Do this from a marketing perspective: sell it to your customers.

I find this is crucial because it forces you to refine your idea into a marketable idea. If you are taking 3 paragraphs to explain what your app does, what problem it solves, or why people should care, well your idea is probably not that great, much less marketable. What this also does is sell yourself on the idea. Once you've taken the time to craft out some great marketing copy, you begin to think "hey this does sound like a good idea!". You also have an easy way to get initial feedback from your network.

[Finally] after using your marketing site to get inner-circle feedback, you go after some customer development. Customers tend to need to see an actual working something though so it's probably best to code out and MVP. I'd start with modeling the data and then work out the core features and at long last, I get the joy of coding!

[joelhaus]

This HN post was a pretty good example of what you describe (not complete to your specs, but a nice start): http://news.ycombinator.com/item?id=1365807

The professional logo goes a long way toward making it feel legit.

> If you are taking 3 paragraphs to explain what your app does, what problem it solves, or why people should care, well your idea is probably not that great, much less marketable.

This may also be a function of your marketing/copy-writing ability; it doesn't necessarily correlate with idea quality or marketability. It could also indicate that your focus simply needs refinement.

[pistoriusp]

I don't do anything once I have the initial idea.

I let it sit around in my head for a few days/ weeks... If it keeps bothering me then I try and get the core of the functionality down as quickly as possible -

I get something online which I show my friends and family. Once I've taken, or not taken, their advice I move forward.

I push forward a bit with my gut feeling and get my girlfriend to work on the design. (She's an awesome designer, I'm really lucky!)

I flesh it out around the edges, user registration, 404, 500 error pages whilst I'm waiting for the designs. (Or I just work on something else.)

And then I'm in "beta."

[jroes]

You can try what the 37signals guys recommend at http://gettingreal.37signals.com/ch06_From_Idea_to_Implement...

  1. Brainstorm
  2. Paper sketches
  3. HTML + CSS mockup
  4. Code

[wheels]

I tend to think in terms of architecture, so how the data will fit together and what the major compontents will be. The functional requirements are usually something that crystalize in my head on the back-burner over a period of weeks until I pull the trigger and jump in. I often write some throw-away code that captures some of the non-trivial couplings between pieces as a proof of concept and then start filling in the gaps upwards.

Usually on the interface side there's a separate process that meets in the middle. I'll often either do some dummy HTML pages or (yeah, laugh) Keynote slides that give me an idea for the interactional mechanics.

That said, and it probably shows, my strong suit is in developing libraries, not applications, and I tend to paint with that brush even when doing apps.

[tptacek]

That's pretty much where my webdev style comes from too --- library design --- so that, how I write C library code (foo_new(), foo_release(), foo_get(), foo_put(), etc) just gets expressed as (say) Sinatra handlers.

Then I call the library in different ways to build something useful out of it.

Never thought of it that way, but that makes sense to me.

[jkaljundi]

1. Write 2-3 sentences about each potential user type for your app. 2. Assume each of the users will spend a max 1-3 minutes on your app, do just 1-3 actions. Which would these minutes be spent on, what are those key actions? 3. Find some white paper and a thick calligraphy pen. Draw the flow in very broad outlines, as a storyboard. Max 3-4 screens per flow. Paper and pen are the best. Forget computers. Forget details. 4. Think if those key flows are something users are willing to pay money for. If not, start over from 1. 5. Once you have a few short flows where users would go mad and pour money over you, start thinking about wireframes and details of the mockups.

[pierrefar]

There are several attack angles I tackle in semi-random order:

1. What problem am I really trying to solve? The point is to think about the users. I draw boxes that walk through the user sessions I want to support. For example, "user wants to do X lands on the site, they find the link that says Do X, they click on it, which shows them a screen with UI elements 1, 2, and 3....". They're called storyboards, and you don't need to be very detailed.

2. Knowing what I want to serve to the user, I think about the data that needs to be stored, how I'm going to obtain it, how to store it (database choice + schema), and other backend plumbing bits. This step is critical as I'm a firm believer that your database schema is a competitive advantage of a business. Get it right and you'll be able to serve your users better. However, it's important to realize that you won't get it right first time, and even if you do, it will need to evolve with your app. This is why I love schema-less databases.

3. With all this sorted, I tie up with a web framework I've written. It handles the routing, has data validation/sanitization helpers, handles user authentication, and all the other functions a web app needs. I just copy/paste these standard files into the new project's folder and I'm well on my way into the project because I can start focusing on the business logic.

Yes I plan on open sourcing this framework when I get a chance. It's constantly evolving though and there a few things I need to fix before releasing.

[tomh-]

Personally this is what I do:

1) Idea

2) Write a small paragraph explaining the idea

3) Derive features

4) Make todo list

5) Make mockups using mockingbird (awesome tool)

6) Write some code

7) Get bored and go back to 1) (not recommended)

Between 5 and 6 It should be better to work on the design rather than code. Code should be last imo. Also I hope someone could erase step7 and actually launch the product :)

[skermes]

It may work well for you, and you should certainly feel free to work however you like, but I've found that diving into the code as early as possible works better for me.

I'm generally driven by seeing something working, even if it's only working enough that I can see some data on a page or have a single button that makes something happen.

If I can keep a good decoupling between my views and my models it's pretty easy to go back whenever I get the itch and make things look nicer without touching anything else. Unless you have a lot of javascript doing intense dom operations on a page you should be able to redesign it at will without worrying about breaking anything else, so I don't really worry about getting it right the first time, or really any time unless I'm getting ready to show it someone who's going to judge it on visual rather than functional grounds.

I've found (and, again, this may only apply to me and not you) that leaving design for later helps keep me from getting bogged down in details and losing my steam. If I have a very concrete picture of how something should look in my head I start worrying about getting my boxes to line up right and why my line heights are off and all that stuff that doesn't actually contribute to getting anything working. If I've purposely left the design aside I've in essence given myself permission to be okay with things looking crappy until I feel like fixing it, which helps keep me going on things that actually contribute to working code.

[jamesbritt]

Many project float around my head for a bit of time. If something seems persistent I tend to make some notes on it to track ideas, features, core concepts, whatever.

If I decide to actually do it, I kick off a Ramaze project. This lets me start fast, light and simple while giving me a solid migration path should the app get complex. Last thing I want to do is have to change frameworks midway through; it'll be an excuse to not do stuff. I can start with a single-file app and build out as much as needed.

I use Rhesus to jumpstart such things, with personalized templates for assorted needs. I get the layout I want with the core files I know I use, skip the cruft.

Then I iterate. I put pretty much every app into a git repo so I can easily try stuff and not get lost down some dead end.

I also like using Selenium to drive test cases from a user perspective, see that I have important site-wide behavior in place and working. And it lets me automatically "walk" an app and mull over the big picture.

[Chris_Newton]

1. Top-level requirements: What problem or problems is this application going to solve, and for whom? If you can't answer these questions clearly, you aren't building a serious application, you're just playing around. (This does not mean that you can't change your goals later, but you should always be building towards a clear, specific target.)

2. Functional requirements: What are the use cases, and how will the user interact with the application in each of them? Use storyboards, mock-ups, whatever helps you to understand what the application will do from the user's point of view.

3. High-level design: How will you model the data and functionality you've identified in the previous steps? Typically for a web app, a lot of this will be about setting up a data store server-side and figuring out how to implement any interactive behaviour client-side. You don't have to work out all the little details at this stage, but you need to choose a viable technology stack and know how the big picture is going to look.

4. Start prototyping: Set up the basics, enough to represent one key feature or perhaps a small group of related features, and create enough of the model/database behind the scenes to support it. Again, you don't have to code up every last bit of HTML and CSS at first, but you need to have a general idea of how things are going to fit together.

5. Refine what you've got and add further features and more details to the model, until you start to see how things are coming together. Go back often to check that the design and implementation are still meeting the requirements. Go back to the requirements themselves and make sure they are still appropriate as you gain experience in the field and/or you receive feedback from users/prospects.

It's very trendy to just dive in at about step 4 and starting hacking away, at least among the young, entrepreneurial types who seem to dominate forums like HN. By all means try it: if nothing else, you will learn why steps 1-3 are important.

Still, please don't bet your life savings on the project getting anywhere if you don't at least know where you think you're going before you start. You might well find that you change direction on the way, but aside from a few high profile exceptions, it is relatively rare in reality to see a successful business where someone just started coding something up one day and fluked their way into running a serious, profitable business before time and money ran out. Good ideas aren't worth much without a good implementation, but implementations aren't worth anything at all if they solve a problem no-one has.

[Jd]

"you should always be building towards a clear, specific target"

Why?

[jwitchel]

"All this has happened before. All this will happen again" -- Pythia, BSG.

The first thing I do is research the daylights out of every competitive product I can find and compile a super set of features of all of them, noting pricing, positioning, messaging, etc.

Then I circle the features that matter to me and I add my own secret sauce features. Then I turn the computer off and start sketching.

Sketching isn't the act of coding or even designing. It's the act of thinking. Look at Leonardo's sketches -- particularly the ones of the human body. http://www.drawingsofleonardo.org He isn't documenting in so much as he's working out what he thinks about how something will work, not just on the outside but on the inside as well. This is particularly true for his anatomy sketches. IMHO he would have been an awesome software designer.

I believe that coding is the art of thinking clearly. Lack of clarity in what you're building almost always results in bad code, the kind that no amount of tweeking can fix.

IMHO the absolute best prototyping tool out there is graph paper and pencil. Personally I like the marbled notebooks because they can take a beating and you can write on them reclining.

Once you've got all the screens of your site drawn out and even some copy written in the margins then you can turn the computer back on and revisit each of those competitive sites and see if your idea still hunts. If it still does then start coding.

[uggedal]

    mkdir mynewapp
    cd mynewapp
    git init mynewapp
    mkvirtualenv mynewapp
    echo Django > requirements.txt
    pip install -r requirements.txt

[jedediah]

Draw a mockup on paper and figure out how you want your app to work. Once it's done, get the simplest case working in real software.

I find that by getting something simple working helps me keep motivation whilst going forward, even if the code is crappy. Conversely, I've started a non-trivial number of webapps by designing a DB schema and an application architecture, each of which left me burnt out before anything of value was even written.

[fuzzmeister]

Personally, I just write. I write pages and pages of stream-of-consciousness thinking about the application, everything from how it will look to how the backend will function to how it will make money. Once I'm done with that, I sleep on it (as it's usually 5am by that point), and the next day work on mockups and DB schemas if it still seems like a good idea.

[awt]

Make a mockup in HTML/CSS or Photoshop/Fireworks, then show it to someone.

[cmelbye]

I use a Rails scaffold for a certain feature of the app (usually the simplest) and I build off of it. The generated code may change completely, but that's the point; it's just a scaffold to get me started so I can write the real code. If your framework of choice doesn't have that feature, you could try writing something similar yourself.