The Architecture Series: A Guide to Modern Web Application Architecture

As the Internet continues to evolve and modernize, developers are faced with increasingly different ways to create an open web application. There are so many tools to keep in mind and new skills that developers are constantly learning. Our short article series will introduce you to the different types of tools you’ll encounter as you learn more about modern web app development. It will also give you an overview of the theory behind the Model View Controller (MVC), which is the most common type of web app architecture used to date. Once you have a good understanding of the theory, it will be time to put your new knowledge to work with our series of tutorials that allow you to build your own MVC app from scratch!

So Many Choices

Especially if you’re new to app development, it’s easy to become overwhelmed by the sheer number of different routes you can take that will ultimately lead to you to the same destination. Trying to research different tools and techniques can be frustrating and stressful and not actually lead you anywhere productive. Allow us to recommend tools for you and help you learn how to get familiar with them as you read about them here.

We’ll be using tools from the Mozilla Recommended Toolchain, a compilation of tools that our web apps team have tested for their usability. Please note that keyword: “recommended.” It is not our goal to push a certain brand onto you any more than it is your goal to be so aggressive with your advertising that you end up driving away any future users. The reason we chose this specific set of tools is because they are practical and tailored towards beginner programmers. We in no way believe that our recommendations are the absolute best for everyone, and we encourage you to try a little bit of everything if you are able. In particular, if you already have some web app development experiment, it’s likely that you already have a favorite set of tools that you find yourself reaching for the most often.

The main tool we will use in this set of docs is Ember.js/Ember CLI. Ember.js is a well-known framework for rapidMVC app development, and Ember CLI is a command line interface for generating Ember code. You can learn how to install it here.

MVC architecture

Here, you’ll get an overview of the different features of MVC architecture in general. This is potentially are most important article since it contains so many fundamental concepts that really form the foundation that you’ll later build once we get to how Ember implements these concepts.

Creating an Ember app

Next, we take you through the basic steps required to create a new Ember app. Sounds simple enough. Take your time and get comfortable here. No matter what tools you are using, a lot of the more basic steps are the same across different programs. It’s important to get good at the foundational practices before you start building really unique, standout apps of your own.

Views and templates

At this point, you’re ready to learn about Views (the V in MVC). Specifically, you will learn 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). There are many different types of templates and routes that you’ll encounter as you work in app development, so as we’ve been saying, now is the time to take it slow and really ensure that you’re familiar with the basics.
Controllers

Controllers (the C in MVC) are some of the most crucial parameters to troubleshoot and perfect because they define so much of the user experience. Controllers are essentially the logic (or magic)

that defines what should happen when the application state changes. A chance in application state occurs in response to user activity, and it’s up to controllers to update the view and/or model of the application in response to previous user input. This article introduces controllers and explains specifically how Ember uses them.

Models and application data

This article looks at models (guess which letter? Yup, it’s the M in MVC) in detail, particularly how they work in the Ember system that we’ve been using. Models represent the form and structure of application data, and respond to input from views and controllers. We’ll also look at handling data in Ember, and how you can incorporate functionality from third-party libraries. Models are generally what the user sees most obviously while utilizing an app.
Styling your Ember app

Now that you know how to build an Ember app, the logical next step is to style it! You’ll want to look modern, sleek, and appealing, not just in appearance but also in usability and ease of navigation. Remember, if your user becomes overwhelmed with your app or struggles using it, they’re far more likely to delete it and download a competitor’s app than to take the time to learn to use it. It’s important to keep in mind that, as with otheraspects of Ember that we’ve seen (and also in other frameworks), there are strict rules for stylization. In this article we’ll explore how to properly use CSS, images, and fonts in your Ember app, and then it’s up to you to customize and optimizing everything according to your own standards.

Publishing your app

Now that you’re satisfied with your app’s construction, appearance, and performance, it’s time to make sure that other people can access it. This article will teach you how to use a host (here, we use Github) to release your app to the public. You’ll finish up the final parts of your Ember app production and then publish it as a simple test mechanism.

Congratulations, you’ve finished! Thanks for letting us help you learn – it’s developers like you who’ve contributed to the ever-evolving, mystifying, amazing bubble that is the Internet. We look forward to working with you in the future!