But Why E-Mail Models?

Building a Simple Email Web Interface to Illustrate the Concepts of MVC and Cross-Module Communication in JavaScript: A Rope of Sand

The purpose of this tutorial is to provide one example of an MVC setup for a web app that allows for cross-module communication. I don't want to put forward that it's THE way to setup MVC, but it's an approach that has worked well for me. The reason I'm writing this is mainly to cover concepts that I get asked a lot about by less experienced developers. So because I'm getting tired of repeating myself and I haven't found any good tutorials that cover this stuff, I'm writing my own.

What we'll be building

TODO: Image of finished app.

• The left panel will display all emails with some teaser text
• The right panel will display the detail view (the email in its entirety)
• Clicking an email teaser in the left panel will activate it and cause it to display in the detail view
• We'll also have a search bar to filter emails

Prerequisite knowledge

• Basic JavaScript foundation
• jQuery
• RequireJS

Topics we'll cover

• Binding function scope
• MVC architecture
• Templating
• Using base classes in JS (natively!)
• Cross-module communication using custom events
• How to use Collection objects

Tools we'll use

• EventEmitter.js
• Handlebars

Steps

0. MVC in General 0. https://developer.chrome.com/apps/app_frameworks 0. http://todomvc.com/ (Vanilla) 0. Give tldr on what methodology we'll be using * Show a typical MVC diagram and explain why it's not helpful * Implies you should have one Model, one View, and one Controller, which easily leads to God objects, components that are difficult to reuse, and does not scale or maintain well. * Show a revised diagram illustrating how we'll setup this app (Ravioli code) * A Brain (representing App) pointing to two Views and a Collection. The Collection has Models floating in it. One View points to the Collection and the other View points to a Model floating inside the Collection.
1. Setting up our MVC architecture 0. Go over file structure and explain roughly what each file will do 0. Modules at this point will basically just be constructors (we'll gradually flesh them out)
2. The collection object 0. Link to JS Nerdery Collections article 0. Give tldr on collection object 0. Add EmailCollection.prototype.fetch, EmailModel.prototype.fromJSON
3. Data to display: Rendering data to our views 0. Add Handlebars 0. Turn our static html into a handlebars template 0. Add a render method to each view
4. Making it interactive 0. We add click event handlers 0. Talk about scope (find link)
5. Bridging the gap: Getting the two sides talking 0. Add EventEmitter 0. Make views extend EventEmitter base class 0. Trigger and listen for custom events
6. Making it searchable 0. We add submit event handler 0. We add EmailCollection.prototype.search