This series of articles will walk you through the core concepts of creating an open web app. It aims to teach you the fundamentals of modern web app development and get you up to speed quickly, introducing a recommended tool chain and techniques for common app features as you go.

There are many different ways to build an open web application. With so many frameworks, libraries and tooling options to choose from, narrowing down the best approach can be a daunting task. To lighten this responsibility, Mozilla has published a set of recommended JavaScript libraries and tools you can use to write your next app. From project creation to templating and deployment, this tool chain will help you quickly create awesome web apps in less time.

Most of the techniques we describe throughout this guide apply to open web apps generally, so are platform-agnostic. Along the way, we will also introduce you to some additional tooling and concepts for building Firefox OS apps. Firefox OS Apps are simply open web apps that run on Firefox OS, and are built using standard web technologies — for much more information on developing Firefox OS apps, see Installable apps for Firefox OS.

Note: If you are looking for a quickstart guide to creating Firefox OS apps, including what's needed and how they differ from regular open web apps (it used to live at this URL), please see our Firefox OS app essentials guide.

Mozilla's recommended tool chain consists of an MVC framework for organizing your application code, a command line tool for handling repetitive development tasks, and several JavaScript libraries that make it easy to implement common app features. We'll be improving this tool chain as time goes on.

The Framework: Ember.js
Ember.js is a client-side JavaScript framework that will help you organize your application code. Ember applications provide an MVC (Model-View-Controller) architecture for your app, making it more flexible and easier to iterate on as you build. As we go through this guide, you'll be introduced to the core concepts of Ember and MVC architecture.
The Tooling: Ember CLI
Because we are recommending Ember as the application framework, we can take advantage of the Ember CLI command line tool to handle some of the more repetitive and tedious development tasks. This command line tool will help you generate blueprints for your application, and concatenate, build and minify your files to make them production-ready.
The Libraries
JavaScript libraries will make difficult application features easier to implement, and allow you to write cleaner, more readable code. Some of the libraries we'll introduce are:

Is this tool chain for me?

The emphasis here should be 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'll probably already have your favorites. If, however, you're just getting started with building complex modern web applications, have been frustrated by the sheer number of choices available, and just want a tool chain that works, these guides are for you.

Prerequisite knowledge

Some knowledge of HTML, CSS, and JavaScript is required, but our goal is to accelerate the app development process for developers of all skill levels. For beginners, we recommend reading through our Getting Started with the Web guide before jumping into the app development process. MDN is a great resource for learning the basics of:

Additionally, while you don’t need to know Ember, some previous knowledge would be useful. We will explain basic Ember concepts along with code examples later in this guide, but more comprehensive documentation can be found at


To get started with the Mozilla recommended tool chain, you need to use a terminal or command prompt on your given platform (Mac, Linux, or Windows) to install and use Ember and Ember CLI:

  1. Ember CLI requires Node.js. Go here to download and install Node before continuing on to the next steps.
  2. Open your Terminal or Command Prompt
  3. Install Ember CLI using the node package manager (NPM):

    npm install -g ember-cli
  4. To confirm that your installation is successful, type:

    ember -v


I don't know where my terminal/command line tool is!
Every operating system has a command line tool by default. See this set of instructions.
My NPM permissions are causing an error!
If you get an error about permissions and are on Linux, Mac OS X, or another flavor of Unix, you may have issues with the ownership of your .npm directory. We'll add some suggested solutions here soon. We strongly encourage people not to use the sudo command with npm, as packages can execute arbitrary scripts.

Next steps

In the next section of the quickstart, we will use our newly-installed Ember CLI tool to generate a skeleton application structure that we can start to work with.

Join the Web apps community

Choose your preferred method for joining the discussion:

Document Tags and Contributors

Những người đóng góp cho trang này: teoli, dongnat_bg
Cập nhật lần cuối bởi: teoli,