Getting Started with Ember.js Part 1: Project Setup


Tomster greeting in the browser

Shortly after sitting down to try and learn Ember.js, I learned that Ember has a “Getting Started Problem.” Everything in the docs seems reasonable, but when you go to make a real world application with a real web server, you realize there are a lot of gaps. Each individual component is well documented, but gluing them together proved to be an exercise in frustration. There are not very many examples of best practices within the context of a real application, instead of a single page to-do app. In this post I’ll take you through making a single CRUD resource. I’ll use a toy example of a car database, from which you can create, read, update and delete cars. We’ll be going through a typical Rails application to serve up JSON using Active Model Serializers to feed the client side application using Ember.js and Ember Data. If something is amiss or is not idiomatic, let me know in the comments or via the contact form. Let’s get started!

Getting Started with Ember.js

Setting Up the Project

View on Github: Part 1 Part 2 Part 3

The Ember team has provided a gem, called ember-rails, along with a great template that will generate a typical Ember focused Rails application. It generates the typical Ember directory structure in app/assets/javascripts. It also configures all of the ember requests to include the Rails CSRF token. So we’ll use this to get started, however, there are instructions on the ember-rails Github page on setting up an existing application.

From a shell, download the rails template from http://emberjs.com/edge_template.rb

<!– Crayon Syntax Highlighter v_2.7.2_beta –>

You can stick with the default CoffeeScript, but to reduce the scope here, we’ll stick to JavaScript. Change the line that reads “generate “ember:bootstrap” to the following:

Save that and generate a new Rails project using the modified Ember template. Also change into that directory.

Fire up the Rails development server.

Visit localhost:3000 in a browser and you should see the Ember mascot, the Tomster, giving you a warm greeting.

Tomster greeting in the browser

Also note that the project template sets up a typical Ember directory structure in app/assets/javascripts that looks like this:

app/assets/javascripts/
├── adapters
│   └── application_adapter.js
├── application.js
├── cars.js
├── components
├── controllers
├── helpers
├── mixins
├── models
├── router.js
├── routes
├── templates
│   ├── components
│   └── index.js.handlebars
└── views

Adding some CSS and a Header

I’ll be using Foundation to provide some styling, so you don’t want to tear your eyes out. Add foundation.css and normalize.css to app/assets/stylesheets. Since the stylesheets are in that directory, Rails will automatically include them. Obviously feel free to use any CSS library, but all the class names in this example are using Foundation.

Add a new file, app/assets/javascripts/templates/application.js.hbs. Since it is named application.js.hbs, Ember will assume it is a layout template that will include something like a header and a footer. That’s exactly how we’ll treat it. Add this structure to application.js.hbs. Note that {{outlet}} yields to the template, which is currently index.js.hbs.

The footer won’t look very nice, so let’s fix that up. Add these styles to the bottom of app/assets/stylesheets/application.css

That will give the footer some height and stick it to the bottom of the window. It’ll also make any tables span the entire width of the page and right-align save and cancel buttons, which we’ll make later. It should now look like this:

screenshot of header and footer

Finally let’s add some data, so we can get started with Ember. We’ll add a model, create a migration, and add some seed data.

Back at the shell, generate a new model:

Note that this makes a new migration in db/migrate/*date*_create_cars.rb. Now let’s add three cars to the database. Add this seed to db/seeds.rb

Back at the shell, create and seed the database.

Now we’ll add a route and a controller. Open up config/routes.rb and add a resource route for cars. Note that the Ember Rails template added the first two routes when the project was created. It should now look like this:

From a shell, add a controller without a view and with an index action. We’ll add the rest of the routes ourselves later.

Open up app/controllers/cars_controller.rb and add a respond_to block inside the index action.

To have the respond_to block render Car.all as JSON, we’ll use an active model serializer. Generate one like this:

That will generate a file in app/serializers/car_serializer.rb. Open it up and add all of the car attributes. It should look like this:

Now if you visit localhost:3000/cars.json in the browser you should see the JSON representation of the three cars we added in the seed. We’re done with the Rails bit for now; let’s move onto the client side and hook Ember up to this list of data.

Now that we’ve got Rails all set up to serve up cars via JSON, head on to Part 2: The List View


Advertisement

No Comments

Name
A name is required.
Email
An email is required.
Site
Invalid URL

No comments yet