Modern Web application development
This series of articles will introduce you to the core concepts of open web app architecture, including MVC, recommended frameworks and tools, and more.
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.
Note: This series DOESN'T assume familiarity with MVC architecture or web frameworks, and holds your hand through the basics of such things. If you are experienced in MVC/app development and just want a quickstart guide that shows you how to build up a modern web app rapidly with little handholding, you should check out our Apps Quickstart instead.
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 seriesThis article explains the different features of an MVC architecture in a general sense, before running through how Ember implements this at a base level. Next, we take you through the basic steps required to create a new Ember app. 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 (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. 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. 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. 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.
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.