As you build Tracker, you will learn the basic pattern of web application development using Ember, one of the leading MVC frameworks. Ember incorporates concepts and naming conventions that allow for rapid development. As you build your application, you will learn the Ember fundamentals.
As described on Ember’s homepage (emberjs.com), Ember is “a framework for building ambitious web applications.” In contrast to a library like jQuery, a framework like Ember informs your app’s structure and often includes scaffolding tools, which are scripts to create boilerplate files in the correct directories. Since its inception in 2011, the Ember community has been building a diverse ecosystem of libraries and tooling to accelerate development.
You will start your Ember journey with Ember CLI, Ember’s tool for scaffolding, development, testing, and building. If you are not familiar with the term CLI, it stands for “command-line interface.” You will create a new project, load dependencies, generate your Ember objects, and build and run your Tracker application from this tool.
To get started, you will need to install some tools.
First, make sure you are using the latest version of Node.js
(>0.12.0).
You can check your version with the terminal command
node --version. At the time of this writing, Node is at version 5.5.0. (Yeah,
that is a large difference from the minimum requirement of 0.12.0. For more on the history
of when and why Node jumped from version 0.12.0 to 4.0.0, check out Wikipedia’s article
at en.wikipedia.org/wiki/Node.js.)
If necessary, download an updated version of Node.js from nodejs.org.
Once Node is up to date, you are ready to install Ember CLI using the following terminal command:
npm install -g [email protected]
The installation may take a few minutes.
If you get this error: Please try running this command again as root/Administrator,
then there is an issue with owner permissions.
Do not rerun the install command with sudo,
as npm and sudo do not play well together.
Instead, run this command: sudo chown -R $USER /usr/local.
Then rerun the original install command (without sudo).
You may get other errors when you install Ember CLI that have to do with incompatibility with your existing system. Most errors have instructions for repairing the install process. Some install errors will require basic internet searches to update existing programs running on your computer. If you need more information, the Ember CLI website has a page for common issues at ember-cli.com/user-guide/#commonissues.
Next, install Bower, another asset management tool.
npm install -g bower
Bower and npm are required to create an Ember application.
Next, install the Ember Inspector
plug-in for Chrome.
To do this, open Chrome and, in the address bar, enter
chrome://extensions/. At the bottom of the
extension page, click Get more extensions. Search for
“Ember Inspector” (Figure 19.3), click Add to Chrome, and follow the prompts to install the extension.
Ember CLI uses a program called Watchman when it is running. Watchman is a command-line tool that integrates with browsers to enable live reload of applications.
On a Mac, you can install Watchman via Homebrew. Homebrew, a package manager for OS X, can be downloaded using a terminal command you can copy from its website, brew.sh. Once Homebrew is installed, install Watchman (version 3.0.0 or greater) with this terminal command:
brew install watchman
Instructions for installing Watchman on Windows can be found at facebook.github.io/watchman/docs/install.html
With that, you have the tools you need to begin your Ember project, Tracker.
Ember’s emphasis on conventions and patterns allows you to create an application with minimal code. The framework does a lot of the work behind the scenes, generating a number of objects and events when your application starts. As you build out more of the Tracker app, you will use your own objects in place of the ones Ember created for you.
In the terminal, navigate to your projects folder. The command
ember new [project name] will create a
directory and will scaffold all the necessary files to start
developing.
Create a new Ember app called tracker:
ember new tracker
Creating a new Ember application may take a few minutes.
As you can see from the terminal output, some of which is shown below, the ember new command creates the base project
files and directory structure. Also, it uses npm and
Bower to load external library assets. These libraries
are essential to running an Ember application and also to running the server
to compile, build, and test your application.
installing app create .bowerrc create .editorconfig create .ember-cli create .jshintrc create .travis.yml create .watchmanconfig create README.md create app/app.js create app/components/.gitkeep create app/controllers/.gitkeep create app/helpers/.gitkeep create app/index.html create app/models/.gitkeep create app/router.js create app/routes/.gitkeep create app/styles/app.css create app/templates/application.hbs . . . Successfully initialized git. Installed packages for tooling via npm. Installed browser packages via Bower.
When Ember has finished setting up the Tracker app, verify that everything is working by starting a local server.
In a moment, you are going to use the command ember server (or ember s, for those looking to
save a few keystrokes) to build your application and
start a server so that you can access it locally. As a convenience, ember server
watches your files for changes and restarts the build/serve/watch
process to make sure you only see the latest code in the browser
(much like the browser-sync tool you used in Ottergram and CoffeeRun).
Ember CLI uses the Broccoli program for compilation. If you have programmed in languages like Java or Objective-C, you may think of “compilation” a bit differently than what it means in JavaScript. In this case, Broccoli combines all of the JavaScript files needed to run your application, while ensuring that all dependencies are met.
It is time to fight for the user. Change directories into the Tracker folder and start up the server:
cd tracker ember server
In Chrome, open a new browser window and go to
http://localhost:4200 to see your new Ember app
in action (Figure 19.4).
You will also want to open the Ember tab in the DevTools, as shown.
As mentioned above, Ember CLI will
reload the browser page when you make changes to the application
files. This is called Livereload, and you will see it
mentioned in the terminal output as:
Livereload server on http://localhost:49152
In Figure 19.4, notice that both the console and Ember Inspector list various components that were generated for you, along with their versions. This book uses version 2.4 of both Ember and Ember Data. At the time of publication, Ember CLI generates a 2.x Ember application, as you can see by the version numbers in the figure. If you see version numbers starting with 1.x.x, you may have skipped the step to install or update Ember-CLI.
(Note that the Version
you see after starting a server in the terminal is the version of Ember CLI,
not the version of the actual Ember app you are launching.)