Quick Start Guide to App Development

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.

Mozilla recommended tool chain

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:

• Handlebars for writing application templates.
• LocalForage for storing and managing offline data.

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:

• Web APIs and DOM
• HTML and HTML5
• Javascript
• CSS and CSS3

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

Installation

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

Troubleshooting

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.