How do I navigate to an Ember Route within my Rails application?

Question

I have a very complex interactive page as part of a Rails application I'm working on, and it's really an SPA. I want to leverage Ember to do this so I have much more manageable code. All I really need Rails for is to ferry data back and forth on this page. Another reason for using Ember is so I don't have all of these nasty jQuery one-liner view templates written in JS (I prefer to use CoffeeScript).

I installed and configured Ember-CLI by following the instructions in the README for the ember-cli-rails gem. I have created a separate layout for any sections of my application that I want to use Ember. I have a route for Products set up to include the Ember JS and CSS resources. I can now see the "Welcome to Ember" message on the page for this route in my Rails application.

But I can't do anything else. I've tried to just create an "About" section for this little Ember application, which is called products. The problems I see so far:

• The ember-cli-rails gem initializer does not create a views directory. Why is that?
• I have yet to locate an Ember-CLI tutorial that doesn't have just a ton of assumptions built in.

I have an about.js.coffeee in my <ember app>/routes directory, one in <ember app>/controllers directory, one in a <ember app>/views directory that I had to create, and an emblem template in <ember app>/templates directory.

Now for a really basic question. How do I bring up this route in the browser? If I type in the route:

http://localhost:3000/products

I get my Ember page, as I should. But if I put:

http://localhost:3000/products/about

Then Rails tries to handle that route, of course. Which is not at all what I want. This is the step that is missing from the tutorials I have read. I would always recommend that a tutorial be put in front of a laymen in order to find the holes prior to publication. I would be happy to volunteer for that job in order to offer something to the community.

How do I navigate to an Ember route within my Rails application?

Answer 1

You don't.

Back in the days there was ember-rails which let you setup ember through the Rails asset pipeline.

You could basically make it so that your root path in rails would render just enough html to kickstart ember. It was nice, and it just worked. But it was a pretty bad idea.

Ember now has its own build process through Ember-CLI so we don't need Sprockets or the asset pipeline just to serve up ember and its dependencies.

Ember also works perfectly fine deployed with just a static html file - you can just pass the request straight from Apache or NGINX (using mod_rewrite for example). SPA's only need just enough HTML to get the SPA framework rolling and then they fetch in data to populate the views.

If you engrained your Ember app into Rails the request would have to go through Rack all and all the middleware just to render what is basically a static html page - that's a lot of unnecessary overhead.

Separate concerns.

The modern approach is to separate the front-end SPA and the backend API. They can even be developed by different teams. Having everything in one big repository was nice and cozy and you could just push to deploy - but separating the concerns makes better apps.

Not only will your front-end app load faster if it is not slugging through Rails. Your Rails API will run much faster if it can ditch all the parts related to serving assets, sessions and views. It becomes a mean green JSON machine instead of a slugging behemoth.

Routing in ember.js

So load up ember server and get the Ember Inspector plugin. Your route should be at locahost:4200/about

The ember development server will make sure every request to localhost:4200 renders the index.html page.

If you try it with javascript disabled you will notice that any path on locahost:4200 like locahost:4200/foo/bar/baz will render the same html.

But usually Ember will then parse the request url and pass it to your route handler.

This is how you declare a route handler in ember.js:

// app/router.js
Router.map(function() {
  this.route('about', { path: '/about' });
});

So when you locahost:4200/about.

Ember will render templates/about.hbs. As of Ember 2.0 views are out. Instead you have templates and components (think partials in Rails).

Ember will also load app/routes/about.js if it exists.

• http://guides.emberjs.com/v2.1.0/