The architecture of a modern web application

This series of articles introduces the basic concepts of the architecture of an open web application, including MVC, the recommended frameworks and tools, and much more.

There are several ways to create an open web application, with a large choice of framework and a lot of theory to learn. This series of articles introduces you to the types of tools you will encounter during this learning, and we will see the basic theory of Model View Controller (MVC) architecture; the type of architecture of the most used applications on the web. Once the theory is mastered, a series of tutorials will allow you to build your own MVC web application from scratch.

This series considers that you already know the basics of HTML, JavaScript, and CSS, the technologies that drive modern web applications. If you are new to this point, we recommend that you first study some tutorials to assimilate the basics. A good starting point is the DND Learning Zone section.

This series considers that you have NO knowledge of MVC architecture or web frameworks, and assists you with their learning. If you are experienced in developing MVC applications and are just looking for a quick start guide that shows you how to quickly build a modern web application, by being assisted, you should instead turn to Apps Quickstart.

So many choices of tools Section

If you’re just starting out in building modern web applications and have been trying to research what tools to use, it’s easy to finish frustrated at the sight of the number of choices available. Through this series of articles, we will recommend tools and how to use them, simply but also to explain the theory through concrete and functional examples.

The tools we will be using are part of the Mozilla Recommended Toolchain, a set of tools that the Application-web team has tried and tested to make sure they work properly with a minimum of complaints. We stress the importance of “recommended”: we are not trying to promote a specific set of tools for any reason other than pragmatism. We are not trying to say that you should not test other tools, or that our choice is the best for everyone. If you have experience in web application development, you probably already have your preferences.

The critical tool we will use in this article series is Ember.js / Ember CLI. Ember.js is a well-known framework for the rapid development of an MVC application, and Ember CLI is a command-line interface for generating Ember code.

MVC Architecture

This article explains the different functions of the MVC architecture in general before seeing how the Ember framework implements it in its foundations.

Create an Ember application

Then we will see the basic steps required for creating an Ember web application.

Views and templates

At this stage, you will learn the View section (the V in M V C), and how they are implemented in Ember through templates (which defines what content will be displayed for each view), and roads (which defined the URL to which we will find each view).


Controllers (the C in MV C) provide the logic that defines what must happen when the application changes state, e.g., in response to user operations, and updates the view and pattern in response. This article introduces the controllers and how Ember implements them.

Application templates and data

This article focuses in detail on the model (the M in M VC), including its use with Ember. The template represents the shape and structure of the data in your application and handles view and controller queries. We’ll also see how data is manipulated in Ember, and how you can embed features from external JavaScript libraries.

Add style to your Ember application

Now that your app’s features are complete, you’ll probably want to add some style to make it more appealing to use. Like many things in Ember (and other frameworks), there are strict rules for that. In this article, how to procedure CSS, images, and fonts in your Ember application.

Publish your application

Once you are fulfilled with your application, and it is ready to be distributed to the public, you need to host it somewhere where others can access it. This article discusses steps to build an Ember application for production and how to publish it on GitHub as a test mechanism.

Leave a Reply

Your email address will not be published. Required fields are marked *