Ember.AutoLocationlocation: ‘auto’ for Ember.Router

Jay PhelpsDudebro @ Pivotshare

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.

Ember.Router

•Manages application state via pre-defined routes

App.Router.map(function () { this.route('about');});

•Abstracts browser inconsistencies

•Currently supports history/hash/none

history.pushState() Support

IE9 doesn’t even support it!IE9 doesn’t even support it!

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

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)

Using It

App.Router.reopen({ location: 'auto'});

Client side

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

When Can I Play!

• Hopefully 1.0 final!

• Try it now: https://github.com/emberjs/ember.js/pull/2685

Questions?

Please point out possible issues!

hello@jayphelps.comgithub: jayphelps