Terjemahan ini belum lengkap. Mohon bantu menerjemahkan artikel ini dari Bahasa Inggris.


This Quick Start guide introduces a recommended tool chain for creating open web apps, and outlines the specific requirements for building Firefox OS applications. It assumes that you are already familiar with HTML, CSS, JavaScript, and MVC architecture.

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 open web apps that can be installed on Firefox OS (conferring some advantages), but are built using standard web technologies.

Note: If you are fairly familiar with HTML, CSS and JavaScript, but are new to creating applications with an MVC architecture, visit our Modern Web App Architecture guide, which provides step-by-step guidance on creating an application with the tools introduced here.

Note: If you are looking for a detailed reference guide to creating Firefox OS apps, including what's needed and how they differ from regular open web apps, please see our Building apps for Firefox OS page.

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 and Ember CLI
We recommend Ember as a good application framework, therefore 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.

Also bear in mind that our recommendations are very much "one size fits all." They will work well for most general web app development requirements, but might not be ideal for advanced requirements. In such cases you should test available frameworks thoroughly before making a choice. As an example, the development teams behind the Firefox OS Gaia apps have generally chosen to create their own frameworks rather than go with an existing 3rd party solution. See bug 1027726 for a specific instance.

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 http://emberjs.com/.


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. You need to have Git installed to use some of Ember's functionality.
  2. Ember CLI requires Node.js and Bower. Go here to download and install Node and then go here for Bower before continuing on to the next steps.
  3. Open your Terminal or Command Prompt:
  4. Install Ember CLI using the node package manager (NPM):

    npm install -g ember-cli
  5. 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.

Gabung dengan komunitas Web apps

Pilih metode untuk bergabung diskusi:

Tag Dokumen dan Kontributor

Kontributor untuk laman ini: bekti, hendribagan, chrisdavidmills
Terakhir diperbarui oleh: bekti,