Ember.AutoLocation

Adding the location: 'auto' option to Ember.Router.

UPDATE: It is now released in all stable builds of Ember and included in the documentation.

Transcript

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.
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!
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. 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