Building Web Apps with Ember.js

Chapter 2. The Basics

In this chapter, we’ll start out with the traditional “Hello, world!” then backtrack to see all the work Ember did for us under the covers. We’ll also take a look at what tools and software you’ll need to get started.

Hello, World Wide Web

If you haven’t already, head to emberjs.com in your browser.  Click the big, orange—at the time of this writing—“Download the starter kit” link. While it’s downloading, bookmark the Guides link in the navigation bar at the top of the page. It may not be the absolute best place to start, but the guide linked there is an excellent second or third lesson on Ember. The Getting Started video on the first page, though, is definitely worth your time and makes as good a starting point as it does a refresher.

Once that starter kit has downloaded, take a look at the contents. You should see:

css (folder)

normalize.css

As the maker explains, “Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.”

style.css

A place for you to put your style declarations.

index.html

A nice HTML file set up for you with all the JavaScript and stylesheets correctly imported and a couple example templates in place.

js (folder)

libs (folder)

Contains Ember, jQuery, and Handlebars.

app.js

This is where your application will live.

Go ahead and open up the index.html file—on any modern platform I can think of, this is as easy as double-clicking/tapping ...