Ember.AutoLocationlocation: ‘auto’ for Ember.RouterJay PhelpsDudebro @ Pivotshare
Location = Stateless• Direct page access without an in-app referrer• Page refreshes• Bookmarks• Sharing (outbound referrer...
Ember.Router•Manages application state via pre-defined routesApp.Router.map(function () {this.route(about);});•Abstracts b...
history.pushState() SupportIE9 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 e...
How AutoLocation Works• Checks what the browser supports• Supports pushState? hashchange?• Compares support vs. current UR...
Using ItApp.Router.reopen({location: auto});Client side
Using It• Apache mod_rewrite• RewriteRule ^(.*)$ bootstrap.php [QSA, L]• Rails• match /*path => pages#bootstrapThese won’t...
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
Upcoming SlideShare
Loading in...5
×

Ember.AutoLocation

589

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
589
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ember.AutoLocation

  1. 1. Ember.AutoLocationlocation: ‘auto’ for Ember.RouterJay PhelpsDudebro @ Pivotshare
  2. 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 organizationNative applications don’t have this problem. Youcan’t jump into any random section of the app.Native applications don’t have this problem. Youcan’t jump into any random section of the app.
  3. 3. Ember.Router•Manages application state via pre-defined routesApp.Router.map(function () {this.route(about);});•Abstracts browser inconsistencies•Currently supports history/hash/none
  4. 4. history.pushState() SupportIE9 doesn’t even support it!IE9 doesn’t even support it!
  5. 5. hashchange as a fallback?• Pretty URLs for modern browsers (SEO, forward looking)• https://example.com/about• Hashes for everyone else• https://example.com/#/aboutor pushState as a fall forward
  6. 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. 7. Using ItApp.Router.reopen({location: auto});Client side
  8. 8. Using It• Apache mod_rewrite• RewriteRule ^(.*)$ bootstrap.php [QSA, L]• Rails• match /*path => pages#bootstrapThese won’t give 404’s!Server sideI’m not a full time Rails guy so there’slikely a better way of doing this.I’m not a full time Rails guy so there’slikely a better way of doing this.If your app isn’t served from the root path, you’llneed to assign Ember.AutoLocation.rootPath to thepath you want it to ignore; the part that neverchanges.e.g. /app/#/aboutIf your app isn’t served from the root path, you’llneed to assign Ember.AutoLocation.rootPath to thepath you want it to ignore; the part that neverchanges.e.g. /app/#/about
  9. 9. When Can I Play!• Hopefully 1.0 final!• Try it now: https://github.com/emberjs/ember.js/pull/2685
  10. 10. Questions?Please point out possible issues!hello@jayphelps.comgithub: jayphelps
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×