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:
- A reusable package that can be included in any application
- Theme variables and mixins to allow visual integration in other apps
- Splitting a questionnaire into multiple steps, each with multiple questions
- Construct the UI dynamically from incoming server data
- A JSON object produced by the questionnaire, representing the steps, questions, and the answers that the user has provided
- Use Ext JS Associations to help structure application data
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?
- Questionnaire header, changing per step
- Panes containing an introduction and a conclusion to the questionnaire
- Panes for each of the steps making up the application
- A step can have introduction text
- A question needs explanation text
- Navigation buttons to move between steps
- A progress bar to show the number of steps completed and numbers until the end
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.