In previous chapters, we explored the more theoretical side of application architecture as well as the cast of tools we'll use to support us. We've reviewed design patterns, methods of structuring our application. Now, it's time to understand how these can fit together to create a well-structured application.
In this chapter, we'll create a basic user interface for a content management system (CMS). While many businesses will work with an off-the-shelf CMS (such as Joomla! or Drupal), the vastly varying requirements from business-to-business means that a bespoke content management system is a fairly common project.
It's also a deceptively-complicated proposition. With such a range of business-specific requirements, the basic CMS can quickly become a complex application with modules and interface elements that are tailored for the problem at hand. This makes it even more important that the basics are taken care of, for example, code structure and naming conventions.
In reflection of this, we'll only be creating a basic starter-level CMS. We'll be:
- Designing a data structure and the corresponding Ext JS model and store implementation
- Building a full class structure and mapping the interactions between them
- Sketching out pseudocode for some more complex interactions
- Fleshing out our design into a full implementation
This is also the general pattern that the next few chapters will take. In this particular chapter, our application will contain:
- A hierarchical treeview of website structure
- The search feature
- A form panel showing page detail
- A create, update, read, and delete functionality
By the end of the chapter, we'll have put our knowledge to test in a basic real-world application using Ext JS 5's MVVM architecture to structure our code in a way that's clean and understandable.
We're going to be producing a bare-bone, but usable implementation of a CMS, which uses some of the Ext JS architectural concepts we've already touched on, such as view models and view controllers, event listeners, and data binding. Here's a look at the desired final product:
Architecture CMS: our first example application
Long before we get to this point, we need to go through the requirements for the application, design its various application layers, and come up with a design. Only then can we start talking about the code level. Let's get started with checking out our client's request.