Adding the location: 'auto' option to Ember.Router. UPDATE: Currently available in Ember canary builds, or if you just want the latest stable (v1.3.1) + Ember.AutoLocation, get the builds here: https://github.com/jayphelps/ember.js/releases/tag/v1.3.1%2Bauto-location

1. Ember.AutoLocation
location: ‘auto’ for Ember.Router
Jay Phelps
Dudebro @ Pivotshare

2. Location = Stateless
• Direct page access without an in-app referrer
• Page refreshes
• Bookmarks
• Sharing (outbound referrer)
• Back/forward buttons
• Decoupling pages
• Code reuse and drastically improved organization
Native applications don’t have this problem. You
can’t jump into any random section of the app.
Native applications don’t have this problem. You
can’t jump into any random section of the app.

3. Ember.Router
•Manages application state via pre-defined routes
App.Router.map(function () {
this.route('about');
});
•Abstracts browser inconsistencies
•Currently supports history/hash/none

4. history.pushState() Support
IE9 doesn’t even support it!IE9 doesn’t even support it!

5. hashchange as a fallback?
• Pretty URLs for modern browsers (SEO, forward looking)
• https://example.com/about
• Hashes for everyone else
• https://example.com/#/about
or pushState as a fall forward

6. How AutoLocation Works
• Checks what the browser supports
• Supports pushState? hashchange?
• Compares support vs. current URL format
• Transforms current URL into supported (if needed)
• /about => /#/about (vise versa)
• Provides supported Ember.Location class to the Router
• Handlebars `LinkTo` provides currently supported URLs (clean in pushState, hash in older)

7. Using It
App.Router.reopen({
location: 'auto'
});
Client side

8. Using It
• Apache mod_rewrite
• RewriteRule ^(.*)$ bootstrap.php [QSA, L]
• Rails
• match '/*path' => 'pages#bootstrap'
These won’t give 404’s!
Server side
I’m not a full time Rails guy so there’s
likely a better way of doing this.
I’m not a full time Rails guy so there’s
likely a better way of doing this.
If your app isn’t served from the root path, you’ll
need to assign Ember.AutoLocation.rootPath to the
path you want it to ignore; the part that never
changes.
e.g. /app/#/about
If your app isn’t served from the root path, you’ll
need to assign Ember.AutoLocation.rootPath to the
path you want it to ignore; the part that never
changes.
e.g. /app/#/about

9. When Can I Play!
• Hopefully 1.0 final!
• Try it now: https://github.com/emberjs/ember.js/pull/2685

10. Questions?
Please point out possible issues!
hello@jayphelps.com
github: jayphelps