
Single page apps in depth (new free book) - EzGraphs
http://singlepageappbook.com/
======
Jare
This looks very interesting, but I have a few comments from the introduction:

\- Single-page apps offer a more native-app-like experience, but there's no
reason they must throw away the advantages of web over app. Almost any
conceivable app is going to have different top-level states, and many apps are
going to let you access different pieces of content. Support URLs to go
directly to those states and to those pieces of content for two reasons:
ability to be linked / indexed from outside, and navigability via the browser
history. I believe the correct way to look at this is to explicitly think of
these top-level states/content, and then look at supporting them in a URL, not
the other way around that you suggest ("we probably need to reduce the level
of detail that we support in URLs somewhat").

\- The MVC pattern predates web apps, web sites and the www itself. The thing
I always found shocking was that server side apps, not client, used the
pattern at all. That said, getting rid of controllers altogether due to the
myriad approaches and variants that exist out in the wild is a sensible idea.

Many thanks for taking the time to write this book!

~~~
SoftwareMaven
I completely agree with the MVC thing. It always felt forced and unnatural for
page-based web applications, so it was disconcerting to see controllers
getting railed on as inappropriate to single-page apps because they were
dragged down to the client from the server world.

However, while I think the incorrect history should be ripped out of the book
(if for no other reason than there are people who will write off the book
because of the inaccuracy), I've always felt that the controller part of MVC
wasn't defined explicitly so much as surveyed to see what was left after the
model and view, so I'm ok with the book not liking it.

It has surprised me for many years that we haven't found an architecture
better than MVC for apps, because I've _never_ been comfortable with any
controller code in any app I've worked on.

------
mixu
(author here) - if you're at YC's startup school today and have questions,
come talk to me. I've got a yellow tshirt and look like my Github pic.

------
anujkk
Nice one. I printed it to a pdf file to be read later. I would like to know
what are other resources to learn about single page web app development? I'm
looking for a book/tutorial that can explain it through some example projects.
Are there any good books that uses angular.js/backbone.js/ember.js etc to
teach single page app development?

------
CWIZO
I've asked this on StackOverflow but haven't recieved any answers:
[http://stackoverflow.com/questions/12949835/adsense-on-
histo...](http://stackoverflow.com/questions/12949835/adsense-on-history-
pushstate-enabled-page)

So does anyone here know how to deal with this (using adsense on single page
apps)?

As for the book, I've read the first intro chapter and it looks promising,
will definitely read it later.

~~~
polyfractal
You can, but you will only be able to show the ads that load on the first
page. Google prohibits you from refreshing the ads without performing a full
page refresh.

This made sense before AJAX, because people were simply refreshing ads every
few seconds to increase impressions/clicks. But now with AJAX, there's no good
way to get new ads.

Google has/had an "Adsense for AJAX" project...but no one has heard anything
about it in ages. [1]

I've vaguely read that DFP Small Business from Google _may_ let you refresh
ads through AJAX, but I'm not certain. Would be an avenue to check into. [2]

Alternatively, you could just say "screw you google" and run something like
Adzerk [3] on your site (which allows AJAX refreshing), but the problem is
that you have to find and manage your own ad inventory.

[1] <https://developers.google.com/adsense-for-ajax/> [2]
<http://www.google.com/dfp/info/sb/faq.html> [3] <http://www.adzerk.com/>

~~~
CWIZO
>>You can, but you will only be able to show the ads that load on the first
page.

Can you share some more detail on this one? And I'll look into DFP, thanks!

~~~
polyfractal
I don't have any links, sorry. I just remember this from the time I looked
into using Adsense for my own AJAX site. From what I recall, Google doesn't
care if you load and display one set of ads, but as soon as you start
refreshing the adsense snippet (via an iframe, or removing the divs and
recalling the snippet), Google brings the banhammer down quickly.

------
mise
What are the top single page apps that you have?

One close to this implementation that caught my eye this week for its design
is <http://deploybutton.com/>

~~~
ubershmekel
I think twitter used to be an example. You could tell because all their links
were to <http://twitter.com#the-specific-url-information-here> so the data had
to be loaded via javascript.

The problem is you get bad first-page load times (double-latency), but you get
better second-page load times (no waiting for templates, just data requests).

------
brador
What methods are used for getting traffic to single page apps? I'm guessing
search engines don't send much traffic.

~~~
polyfractal
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>

And here is an example product page within my site:
<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
You should check this out: <https://github.com/balupton/History.js>

~~~
polyfractal
I'm using Sammy.js (<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
There'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-
enhancemen...](http://stephanierieger.com/a-plea-for-progressive-enhancement/)

------
lobo_tuerto
Previous submission & discussion:

<http://news.ycombinator.com/item?id=4172837>

(How comes it's the same URL and it didn't get detected as a duplicate?)

------
2color
Many thanks, what a great resource.

I saw that there is a big focus on modularity, how come there is no talk about
why use the commonJS and not AMD?

------
mattrandle
Was reading this earlier in the week. Very well written. Cut and pasted a few
sentences into my quotes evernote.

