In this chapter, we'll design one last application from start to finish. Rather than continuing to introduce new ideas or techniques to visualize and construct an application architecture, we'll double up on the work we've done so far. We'll incorporate routes, view models, and events in order to consolidate everything that's been discussed, and we'll create design documentation to inform the application's structure.
In each chapter of this book so far, I've tried to stress that there's no "one true way" to application architecture. Every application is different; there is plenty of room for interpretation. At the beginning of the book, we discussed the MVC and MVVM design patterns and what an architect must find is their own pattern (a way of working that feels natural). More than this, a pattern is something that emerges because of a regularity in our work, that is, repeating the same thing again and again. While different architects will have different ways of working and can use different methods in different ways, in the practical chapters, we've completed there is a logical development path that it's easy to fall into.
"Falling into the pit of success" is a phrase used to describe a methodology that works well without users having to try hard to follow it. That's what we've been working towards. Showing you the choices Ext JS provides, not only giving you options, but also trying to illustrate why they're good options to use. By now, you should have a picture of the design of an Ext JS application and the features you can use to fulfill this design.
In this final practical chapter, we'll once again see how, despite having a choice in how to implement this application, we'll end up selecting a a path that's similar to the one we took before, a path that feels logical and that makes development easy.
The application we'll build is designed to shop on a tablet-sized screen. We'll be taking advantage of the burgeoning "craft beer" scene and creating an application that allows customers to select from categorized beers in the store. Here's the full feature list:
- Login and register
- Category list
- Product list with sorting
- Shopping cart
- Touch-friendly
In other words, the standard set of features you'd see on a straightforward e-commerce website. The final product looks like this:
We have a simple interface that provides large tappable areas for tablet users. There are more screens in this application than any other we've worked on so far, so let's sketch these out and see what the full app will look like:
Here, we have the wireframe of the first screen that the user sees when opening the site. As you can see, it maps out the features and layout, as shown in the previous screenshot.
This mockup mentions all of the main features of the application. Note that, unlike in our earlier e-mail application, the user doesn't have to log in to start browsing. This only happens when they want to place an order.
The categories of beer are listed on the left-hand side in alphabetical order; the user can scroll through the list when it extends past the bottom of their screen. In the main part of the screen, the beers in the selected category are listed with the sort order determined by a combo box above the list. Each beer on sale is represented by its name, an image, and its price.
Finally, at the top-right corner of the screen, we have the "login" and "cart buttons" that will change to reflect the application state and are both clickable, revealing further windows.
This next screen shows the product detail page when the user selects a product to view:
This screen fleshes out more of our requirements and the way they'll be implemented. When the user clicks on a product from the list, a modal window pops up showing more information about the product in question, such as a discount message showing price reduction, a full description, the brewery that made the beer, and a tagline that sells beer to the customer. This is all accompanied by a larger image of the product as well as buttons to add the beer to the shopping cart and to close the product window.
At the top-right corner of the main app screen, we can see a shopping cart icon and a label that changes to reflect the number of items in the cart. When the user clicks on the icon or label, the cart window is shown:
This modal window contains a list of products in the cart and the quantity of each item. The user can adjust the quantities of each item here as well by clicking on or tapping the plus or minus icons. The other key feature of this window is the Order Now button, which processes the current cart into an order.
If the user hasn't already logged in, clicking on this button will show the login and registration screen, which we'll look at next.
The Login and Register options are shown in the following screenshot:
The login and registration forms are shown side-by-side because they're simple enough to fit in the same window. The fields will have validation in order to ensure e-mails are correctly formatted and required fields are completed. When the registration or login process is completed, the Login icon on the main screen will be replaced by the user's e-mail address; clicking on this link will show an account screen.
The user account page allows the user to edit their details and view their past orders:
The text fields on the left-hand side allow the user to amend their address and user credentials, and the pane on the right-hand side is a list of previous orders, showing the items that were ordered, the date, and the total amount.
We've looked at all of the main application views in turn; for simplicity, we've excluded an actual payment process to avoid integrating with a third-party service. When the user proceeds with an order, it will immediately be processed and added as a past order in their account.
One great thing about Ext JS 5 is that it adds support for touch devices and includes a touch-friendly theme. This should make it super simple to achieve our goal of presenting this app to tablet users; however, we'll include some theming tweaks to create a custom look and improve the experience for users on tablet devices.