We now have three practical applications under our belt. The objective has been to show the process of designing an application and think it through in a series of careful steps to create a clear picture of the project that's we're going to build. This time around, there's going to be a change of pace and rather than looking at how "we" would design and build an application, I'll be guiding you through my own process of creating a multiple-step, dynamic questionnaire component.
Here are the features of the application that will be the subject of this chapter:
Why the step back from the all-inclusive "we" to a look at my own architecture process? I hope that it'll give you a more practical look at the thought processes that go into an application design. You can also see how there are always multiple correct paths that an architect can pursue. Sketching out these paths and investigating them before writing any code will avoid the "analysis paralysis" that hits many projects and causes them to grind to a halt when difficult questions need answers.
My first port of call when thinking about an application doesn't involve fancy tools or an IDE. Once the customer requirements are established, I take myself as far away from a computer as possible, wash all thoughts of JavaScript and Ext JS from my head, and remove as many distractions as possible.
With that done, I grab a large notebook and a pencil and get scribbling. I've never found a better way to quickly draft ideas than a bit of manual labor, so while I'm designing in the same way as we've seen in the previous few chapters, I can avoid getting bogged down with drawing tools and UML diagrams.
How did I start?
Well, it's not pretty, but you can see the relationship between this and the diagrams of UI views we saw in previous chapters. Note that the intention with these images is not to spell out the design in exacting detail, but simply to give an insight into the process I went through, warts and all! Eventually, I'll use these sketches to build something like this:
What are the features I picked out from this original sketch?
In addition, this component needs to be able to validate the mandatory questions in a step that have been completed before the user can move to the next step.
Rather than spending lots of time in front of a computer creating the perfect UI design, I was able to quickly flesh out an idea to see how it looked and this informed me about my design requirements.