Modern web app architecture

There are many different ways to build an open web application, including a lot of different tool choices, and a lot of new theory to learn. This series introduces you to the types of tools you will likely come across as you learn about modern web app development, then takes you through the theory behind Model View Controller (MVC), the most common type of app architecture used on the Web. With the theory covered, we will then take you through a set of tutorials that allow you to build your own MVC app from the ground up.

So many tool choices

If you're just starting to build complex modern web applications and have tried to research what tools to use, it's easy to become frustrated by the sheer number of choices available. Throughout this series of articles we'll recommend tools for you and show you how to use them, simply as a means to demonstrate the theory we are explaining, and to show you examples that work.

The tools we'll use form part of the Mozilla Recommended Toolchain, a set of tools that our web apps team have tried and tested to make sure they work well with a minimum of fuss. The emphasis here is on "recommended": we aren't trying to promote a specific set of tools for any other reason than pragmatism. We aren't trying to say that you shouldn't try other tools, or that our choices are the best for everyone. If you already have web app development experience, you probably already have your favorites.

The main tool we will use in this set of docs is Ember.js/Ember CLI. Ember.js is a well-known framework for rapid development of MVC applications, and Ember CLI is a command line interface for generating Ember code. You'll learn how to install it in Creating an Ember app [en-US].

Articles in this series

MVC architecture

This article explains the different features of an MVC architecture in a general sense, before running through how Ember implements this at a base level.

Creating an Ember app

Next, we take you through the basic steps required to create a new Ember app.

Views and templates

At this point, you'll learn about Views (the V in MVC), and how they are implemented by Ember using templates (which define what content you'll see at each view), and routes (which define the URL where you'll find each view).

Controllers

Controllers (the C in MVC) provide the logic that defines what should happen when the application state changes, e.g., in response to user activity, and update the view and/or model in response. This article introduces controllers and explains how Ember implements them.

Models and application data

This article looks at models in detail (the M in MVC), including explaining how to use them in Ember. Models represent the form and structure of our application data, and manage requests from the view and the controller. We'll also look at handling data in Ember, and how you can incorporate functionality from third-party JS libraries.

Styling your Ember app

Now that the functionality of your app is finished, you'll no doubt want to style it to make it look more appealing to use. As with most things in Ember (and other frameworks), there are strict rules for doing this. In this article we'll explore how to use CSS, images, and fonts in your Ember app.

Publishing your app

Once you're satisfied with your app and are ready to release it to the public, you'll need to host it someplace where others can access it. This article covers the steps needed to build an Ember app for production, and publish it on Github as an easy test mechanism.

Next

Now that we've set the scene, we can get started by exploring the theory behind MVC architecture, and how it is implemented by Ember.js.