7 ms·
My side project is a single page JS application. It uses hashbangs because I want to support legacy browsers, but a lot of fancy new apps will just use HTML5 p
by polyfractal 14y ago
My side project is a single page JS application. It uses hashbangs because I want to support legacy browsers, but a lot of fancy new apps will just use HTML5 push-state to control the URL.
What this means is that your browser loads a single page (e.g. index.html) which loads a big chunk of javascript. That JS then handles all the state changes, content refreshing, URL changing, etc. So instead of querying the server for new pages as you navigate, the JS asks the server for you.
The advantage is that you (can) have lightening fast user interface and minimal data transfer between browser and server.
As an example, this is my project: http://comparerc.com http://comparerc.com
And here is an example product page within my site: http://comparerc.com/#!/product/84869/pnp-micro-p-51/ http://comparerc.com/#!/product/84869/pnp-micro-p-51/
The URL is unique and lands on a unique "product", but all the code is generated from a single PHP page and a single chunk of JS. Despite that, Google has most of my product pages in it's index, just like any normal website.
- Skoofoo 14y agoYou should check this out: https://github.com/balupton/History.js https://github.com/balupton/History.js
- polyfractal 14y agoI'm using Sammy.js (http://www.sammyjs.org/ http://www.sammyjs.org/) which supports auto-fallback to hashbangs if HTML5 push-state isn't supported...I just haven't bothered to turn it on. Frankly, the hashbang doesn't really bother me at all, my URLs have a bunch of random parameters anyway (because it's a search engine) and Google is incapable of indexing either push-state or hashbangs without extra help. So all it really does is remove two characters from the URL at the expense of more complexity and fragility.
- Skoofoo 14y agoThere's also the added benefit of being able to support users without JavaScript, which includes a large portion of iOS/Android users. http://stephanierieger.com/a-plea-for-progressive-enhancement/ http://stephanierieger.com/a-plea-for-progressive-enhancemen...