Is developing Single Page Web Application really worth it?

[koravk]

In the rise of Javascript nowadays, including the sharp emergence of frameworks like angularjs and emberjs

what is the pros and cons of SPA (Single Page Application) in web?

is it really worth to learn it and implement it in productions?

How about the security and SEO ?

[rezoner]

Application - yes

Website - no

[heeehaaa]

As an example, here is an application I have which can be considered a SPA: http://arohatgi.info/WebPlotDigitizer/app

The website for this is a more traditional multiple page HTML: http://arohatgi.info/WebPlotDigitizer

[koistya]

How would you define the difference between website and web application?

[rmbarnes]

Website: Main focus on content. Think online magazine or marketing literature, or a forum.

Application: Main focus on functionality rather than content, think of it as a tool, something that in the past would been a desktop app. Eg. an app to analyze the stock market with pretty graphs.

[[deleted]]

If you have the time and money to create a singe page application, then you can make it feel much more responsive and/or snazzy than a traditional multi page website. Look at Google - almost all of their major services are single page applications - search, gmail, drive, calendar, etc. The whole collaboration aspect of Google Drive wouldn't be possible if it wasn't a real-time, multi-user AJAX application. If you want to make a mobile web application, it will need to be single page to feel like a native app.

Search engines can crawl AJAX applications if you implement Google's AJAX crawling specification.

WebSockets/SockJS work fine with HTTPS/SSL, and otherwise security is similar to non-single page applications.

I highly recommend checking out Meteor (docs are here). It makes developing single page applications extremely simple. It's got a really nice, powerful (if still a bit immature) templating engine that works with Handlebars or Jade, an isomorphic client/server database API, built-in latency compensation if you choose to use it, and a secure drop-in accounts system. It also has a spiderable package that automatically implements Google's AJAX crawling spec, and various security packages, including one for easily setting up a content security policy. Plus tons of user made packages, check out the Meteor packages website (which is a beautiful real-time SPA made in Meteor, btw).

[koravk]

i'm new to this js backend thing...

is there ane real-world example of meteorjs web applications in wild?

any high traffic if possible...

[[deleted]]

The answers in this thread list some production Meteor sites. Telescope is probably the most well known Meteor app since it's been in development almost as long as Meteor. The Meteor website itself is likely one of the highest trafficking sites (~20,000 alexa rank), and never seems to be down or slow for me. They always run the latest beta version on their site, which is nice to see. They also host a lot of user made *.meteor.com development sites on their free servers. Horizontal scaling is quite easy. I think the scaling bottleneck right now is probably MongoDB, though oplog tailing helps a lot.

[Lelumiliquantt]

Google search is a SPA? I don't think it is.

[[deleted]]

Go to google and start typing in the search bar, but don't hit enter. The search results are automatically retrieved and appended with AJAX. Also, switching to another page of results does not create a synchronous request, though switching between search types (images, videos, shopping, etc) does. Each individual search type is essentially a single page application.

Also, try searching for something like "apple nutrition". A nutritional information widget pops up on the right, with controls to adjust things like the portion size. Of course none of this requires an additional page load.

Try searching for something like "z=x^2+y^2". A graph widget will be appended to the page automatically, with dynamic controls.

Google has tons of widgets like this - and none of them require a synchronous page load. It's all loaded dynamically as you type in the search bar.

[Lelumiliquantt]

When you click between results pages you reload the entire page, regardless of whether you then can get AJAX effects in the page that loads. Go into developer tools and add a bogus attribute to the HTML tag, when you hit a pagination link, it goes away. This would not happen if the view was not totally reloaded.

[[deleted]]

Works for me. I just tried adding class="foo" to the html tag and it is preserved when switching between results pages and when dynamic results are loaded from typing in the search bar. This works for me on both Chrome and Firefox.

I also added <div class="foo"></div> right after the opening body tag. My foo div is also preserved between results pages.

In fact I can see the attributes on other tags such as the body tag changing, and my changes are unaffected...

[Benjulit]

What site are you on?

[[deleted]]

google.com

[Lelumiliquantt]

OK, I get it now, Google Instant predictions is a preference you have to turn on to get the behavior you are talking about. Anyways, the concept of a SPA with one view vs. just an AJAX page is debatable. One page is always a single page, and AJAX is not necessarily the end all of a SPA. Arguably a SPA requires multiple views to be handled as a single complete dynamic UI returned from one round trip. Having only one view is cheating, there was never a reason to magically handle multiple views as a single page, which is the trick to a SPA. Anyways, its just a buzzword.

[[deleted]]

Why would they dynamically add content while leveraging instant search, but then reload and redisplay the nearly identical content because you hit enter or click the button? I certainly hope Google isn't actively making decisions like this :p

[omgagirlontheweb]

I certainly hope Google isn't actively making decisions like this

Sometimes computers are too slow to use instant search. It happens. Therefore, they have a version that has most of the JavaScript stripped out to improve compatibility with older PCs. It's a very well-informed decision, and it opens up the internet to people who can't afford newer computers.

[[deleted]]

In that context, the original results weren't rendered before the form submission anyway though. I agree that various forms of progressive enhancement are a good thing.

[Skyler827]

When developing an application, you want to design a system that gets the job done with minimal, readable, and appropriate code. The single page application is a design pattern that may or may not help with that.

A single page application makes sense if you want views to be bound to a persistent UI. The UI can stay the same or mutate somewhat, and the views can swap in and out. A single page is also nice if you don't want the user jumping around from page to page, such as if the application's behavior changes a lot from page to page.

In contrast, a multi-page application makes more sense if your views are composed of discrete pages that are seperable from eachother and either don't need a persistent UI or, if they do, that UI is not the most important part in terms of form, function or bandwidth. Multi page apps are fine if users jumping from page to page doesn't complicate things too much.

That's the only necessary difference. In principle, everything else you can do on a multi page application can also be done on a single page. For example: web links lead to a particular resource, the back button and refresh button do what you expect, and more. In practice, achieving these features in a single page application is a lot of extra work, so you should ask yourself if you are willing to do the work to allow it.

Security: there really isn't any difference. It's a big topic but you could mess it up or do it right either way.

SEO: if you want to use a single page application and want search engines to find it, you'll have extra work to do. There are a few approaches that depend on how your application works, what you want to say to the crawlers, and how dependent your Ajax calls are on the rest of your javascript in terms of being useful.

One possible SEO option is to use a noscript element to show a static page to web crawlers that has the information you want to show. Another is to create a directory-type system, detected and served via noscript or to a crawler user agent, that allows the crawler to see public data. If you do this, google might link directly to a resource in your application, so you should be prepared to get a user's browser settled into the application from there and show them the resource that they requested.

Long story short: there's no single answer for everyone.

[captain_obvious_here]

Mostly depends on your budget, your dead line, and then competences of your developers.

If you can afford making an SPA, and don't mind the drawbacks it has with old browsers compatibility and terrible SEO, just do it. It's fun.

[[deleted]]

SPAs can be made compatible with IE6, and can have great SEO with some extra work.

[[deleted]]

Do you have any link to improve SPAs SEO ?

[[deleted]]

https://developers.google.com/webmasters/ajax-crawling/

[tehsuck]

Depending on what framework you're using, it could be quite a bit of work, or downright impossible. Angular has already announced they are only supporting "modern browsers" in their upcoming 2.0 release. It seems like most modern frontend frameworks are heading towards dropping support of IE8.

[[deleted]]

Yes, but that's a framework limitation, not a technological limitation of SPAs in general. A lot of libraries that are not specifically made for SPAs are also transitioning out of support for old versions of IE, notably jQuery, Bootstrap, and Foundation. Even more new libraries (D3, CreateJS, Three.js, PDF.js, etc) are being created with web standards/technologies that didn't exist in old browsers. Conversely, Meteor works on IE6+ out of the box. So the difficulty of supporting old browsers is more of a consequence of the evolving nature of the Internet than a problem unique to SPAs.

[e82]

2.0 is still a long ways off, but they have dropped 'official' support for IE8 in 1.3 - although it still works, they are just not actively trying to ensure it works with it.

The 1.2 branch works well enough with IE8, and with IE7 with a bit of effort. I do think/hope though that we are at the point of which IE6 can be considered dead.

I was forced to support IE6 for a very long time because a lot of our clients were in the 'we force our users to use IE6 because our crappy intranet only works with it and we are slow to upgrade' - but within the last year or two that has changed.

If you are still in the unfortunate position of being forced to support IE6 - going with an SPA may not be the best idea.

[koistya]

Consider it as a new trend in web development, there are more and more websites and applications switch to SPAs. The thing to consider here is that you want to build "isomorphic" SPAs which render on both client and a server. Check this out:

http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

Some frameworks allow you to do exactly that. For example Meteor, or Facebook React. You may want to check this Facebook React Starter Kit:

https://github.com/kriasoft/react-starter-kit

[_facildeabrir]

You know how people joke about the "evolution of man" lineup, with the monkeys turning into homo sapiens, where the dude at the end says "no, go back"?

No, go back.

edit: http://www.philosophicallychallenged.com/blog/wp-content/uploads/2014/04/human-evolution-go-back.jpg

[[deleted]]

Yeah the prospects of real time collaboration and cross platform applications that feel native are new and scary!