These initial sketches enabled me to quickly think about the underlying data powering the component. In previous chapters, we've stopped here to discuss whether the design requirements can be fulfilled by Ext JS. Instead, we're going to push ahead, put technology to one side, and just focus purely on architecture.
In some ways—as we're going with MVVM—the architecture is technology agnostic. We can create the kind of application that we want to build without feeling constrained by the framework we're using. This can be dangerous; in that, we might lose sight of particular client requirements or start drafting something that might turn out to be impossible. To this end, we introduce new checks and balances that we'll discuss in a little while.
For now, I continued with my pencil and paper to work out a data structure. As in previous cases, the UI design informs the underlying data requirements. Here's a quick insight into my design doodles:
It's the same as in previous chapters, just a bit messier! Again, don't worry about the detail. Look at the rough notes and the scribbles and realize that the initial stages of an application design are an organic process and things can (and will) take a meandering path. Here's what my doodles led to in terms of data structure:
- Questionnaire
- Title
- Introduction
- Conclusion
- Steps[]
Title
Introduction
Questions[]
Name
Required?
Question text
- Field type
I'm not yet worrying about what inherits from what at this stage. I just know that I'd like to have a single questionnaire that has many steps and these steps will each have many questions. From here, I just fleshed out the fields each class needs.
It's at this point I have to tell you that I lied to you. In the purest sense, it would be fantastic to think that you can sketch out the full application architecture on paper, but in reality, you will always do so with an eye on the real world. Look back to my last page of pencil doodles and you'll see a few notes like "associations" with a giant underline. That's there because I knew that the data structure I've described previously will be implemented using Ext JS associations, a feature we haven't yet used in this book, but one that can be very powerful.
As much as possible though, I've tried to push past any thoughts of detail, but trusted my knowledge of Ext JS to pop to the fore without any warning signs.