Chapter 11: Introducing Our Example Application

Well, it was great teaching you guys all there is to know about Marionette. I hope you enjoyed it. See you later!

Just kidding. What kind of library or framework discussions come without a sample application? Sure, you now know about all of Marionette’s components, but you haven’t seen them working together. To really understand how Marionette can work for you, you need to understand how its pieces fit together to form a cohesive framework. So, I’ve created a sample application that demonstrates how most of the Marionette components could be used. Sadly, since I was attempting to make the application small and simple enough that there wouldn’t be too much application logic to distract you from the lessons about using Marionette, I couldn’t find a way to squeeze every single component into the application. Both CollectionView and Request/Response didn’t make the cut, though I feel the application is sufficiently large and complex to demonstrate how Marionette should be used.

Derick Bailey created an example application to show how he believes Marionette should be used, and while I think it is a good application for this sort of demonstration, it also misses a few components — and I feel like it’s cheating if I steal his application for this book. His application is BBCloneMail¹, which is a simple fake email client (it can’t really be used to send and receive emails) that mimics some of GMail’s functionality. His application leaves out CompositeView, AppRouter, and Layout. The reason he doesn’t use AppRouter is because he used a filtered router (which can run a special method before or after each route method). The plugin he used (Backbone RouteFilter²) can now be used to enhance AppRouter instead of just Backbone’s Router, but his application hasn’t been updated in a while so it doesn’t reflect this change. It would be nice to have this functionality built into AppRouter, but as long as the plugin exists elsewhere, there is no incentive to add it to Marionette.

Switching our focus back to the example application for this book, we’ll be building a quiz engine. And we’ll name our wonderful little application, appropriately enough, Quiz Engine. Why make it confusing, right?

You can try out the application on my site³ or you can get it off of GitHub⁴ and run it on your own server. We’ll discuss how you can get it running on your own server later.

Before we get into the nuts and bolts of the application in the next few chapters, we’ll take a little tour. We’ll talk about what the application does and looks like from the perspective of a user.

Quiz List

The first thing you should see is a list of the quizzes you’ve taken.

Home Screen: List of Quizzes You’ve Taken

From here, you can start a new quiz, delete quizzes, review the answers of quizzes that have been completed, or continue a quiz that you haven’t finished yet.

So, what happens when we click one of those “Delete” links? Well, it simply removes that test from the list. No big deal. But instead of deleting one of those quizzes right now, let’s click the “Review” link for the completed quiz and see what we get.

Quiz Review

Quiz Review Screen

Here we see a few details about the quiz. We have its title, the number of correct questions, the total number of questions on the quiz, the score of the quiz, and then a table showing which of the questions were right and which ones were wrong. Of course, the ever present header is also there so we can get back to the main page, which is good — I was too lazy to add a button that would bring us back there!

You could take this review page one step further and show the user details about each question, such as the question text, the answer they chose, and the correct answer, but I figured I’d keep it simple. This is one of the places where it doesn’t pay to add features because I’m just demonstrating how to use Marionette, not creating an application for the masses.

Anyway, head back to the main listing page, and let’s click the “Continue” link for the other quiz.

Taking a Quiz

Answering a Question on a Quiz

Whether you’re continuing a quiz you already started or you’re starting a new quiz, this is what you’ll see. After the quiz name, we see the question number, the question text, and a list of possible answers. Users can select their answer and click the “Next Question” button. If they’re on the final question of the quiz, then the button will say “Finish Quiz” instead and it’ll take them to the review page.

Let’s see what it looks like to create a new quiz. Head on back to the main screen and click the “Start New Quiz” button.

Creating a Quiz

Creating a Quiz

When creating a quiz, you give it a name and choose the categories of questions you’d like to add to the quiz, and click “Start Quiz”. After that you get taken to the screen that we looked at just before this one. If you decided that none of the categories interest you, you can always click “Cancel” and get taken back to the main screen and take a gander at the quizzes you’ve already completed.

Summary

That’s all the major screens that you’ll see, though there are a few bits that we missed: error handling, empty lists and such. We’ll take a look at those in some of the later chapters. For now we’re done with our introduction and we’ll move on to some of the decisions that we need to make before putting our fingers to the keyboard.