Single Page Application - techniques

Could we not? There are enough of the damned bloated things floating about. Could we just forget they exist and stop assuming clients want to navigate slow, resource-intensive pages for everything?

Dynamic content fetching makes sense in many cases, but making everything a dynamic fetch is rarely a good idea.

For example, if I want to check a company's contacts page, I can generally visit www.example.com/contacts and get a simple page with their contact information. If they've chosen a SPA, I first have to load a shitload of unnecessary javascript and probably wait for all the animation effects the marketing department forced on the developers before I can get to the information I want.

Not to mention most implementations are absolutely piss poor at handling repeated clicks. Ever since Youtube decided to jump on the bandwagon it's been an absolute pain to use, with videos continuing to play audio even after you've changed videos. And that's Youtube.

If a team with near-infinite resources can't do it right, I have very little faith in anyone who considers SPAs to be useful. As far as UX goes, they are abhorrent. They tend to consume way more client resources than they should ever need, causing browsers to slow down to a crawl even while they're in the background.

If you ask me, the sooner this fad passes, the sooner I can get back to ranting about those kids on my lawn.

It's true, implementations are usually poor. But good SPAs are much better experience. I hate blinking and re-scrolling of static websites.

Could you post at least one example of a "good" SPA?

@36864 Napster ?

I write SPA's for a large blue-chip company. None are available online, all internal applications and the user experience is far superior and a great coding experience.

Ignore the ignorant comments from people who have no experience. The UX is as good as you make it and if you decouple the front from the back they are easier to maintain moving forward.

I am off to watch the football but shall try and address some of your questions later.

To me a single page application is more like an invoice with details where you can edit on the Fly. Doesn't necessarily mean the whole application has to be single page application designed.

Laravel and Laracast aren't single page application, and Taylor and Jeffrey are pretty darn smart.

@jlrdw they might be smart, but are they also experts in user experience department? That’s what SPAs are about, right? Nerds find Terminal comfy, remember.

@RoboRobok My experience of SPA's is limited to Angular with a completely decoupled front end running in a separate domain.

Q1. Is it common to just render everything on the client side? Yes

Q2. How bad is this approach for SEO? I would not build an SPA where SEO is important due to combination of issues including my own learning curve. But google is getting better and you can look at isomorphic javascript.

Q3. How often is the content loaded as pure HTML? I have never rendered the entire page server-side including HTML, only JSON. But we are looking into it.

Q4. Are there any fancy techniques of replacing the particular areas of the page? A million approaches but no black magic solution. Learn as you go.

Q5. How often do frameworks/other solutions care about opening links in new tab? There are no limitations, open in a new/same tab as you wish.

Q6. Are WebSockets used to fetch the page contents in SPAs as well? I have never used websockets, merely a limitation of my own experience. All HTTP requests.

Good luck.

@primordial could you revisit Q5? You answered basing on the first sentence only.

@RoboRobok Just tested on a linux machine using CTRL and works as expected. No reason to believe cmd on OSX will differ.

So it seems like Angular is taking care of it, great! 99% of SPAs I've seen are ignoring this and they will just open new tab and display the new content in current tab as well (as the click has been registered).

I honestly think they are going to be implementation issues. I would be very surprised if the functionality was not available in any popular framework.

@jlrdw

"To me a single page application is more like an invoice with details where you can edit on the Fly. Doesn't necessarily mean the whole application has to be single page application designed..."

It does need to be "SPA designed". They include a full routing solution and the URL will change, how else could you bookmark it? I use common Javascript patterns such as Observables to bind volatile data to the DOM. I perform basic CRUD functionality using ajax requests who results are also bound to the DOM.

Simple show/hide effects and animations are also more common place and sophisticated. I love the Angular implementation of Material Design.

Point is, when you are using javascript and ajax for parts of an application, then those pages are in effect no different than an SPA. Therefore a large enterprise application will usually have parts that behave normally (no JS), but many parts that are SPA.

Remember these SPA's are basically using JS, but still rely on a backend programming language. Still round trips to and from a server.

Right now someone could write a whole laravel frontend interaction using javascript and ajax.

Doesn't matter if angular, vue, jquery, or vanilla JS, the same.

angular, vue, react are under the hood using regular JS. Just like eloquent under the hood is using normal sql and PDO.

Point also, no JS framework is really required for an SPA. But it makes it much easier for the developer with many built in helpers. I guess the don't re-invent the wheel thing.

Me, I prefer as little JS as possible, just some for small enhancements.

@jlrdw you prefer little JS because? JavaScript provides, hands down, better user experience and using web (and all media) is about the experience. It sounds like you are scared of JS (not enough practice). Am I right?

@jldrw

"when you are using javascript and ajax for parts of an application, then those pages are in effect no different than an SPA"

Twaddle. SPAs are a tad more involved than "a bunch of ajax calls".

You need to try building one. You have a lot to learn grasshopper.

@jldrw just confirms what I was expecting for a long time. People who are great developers (and I assume @jldrw is, better than me for sure), tend to be kinda insensitive for user experience. He doesn't notice a difference between having parts of a website using Ajax and entire website being SPA, without any redirections.

Whether you like it or not, in a few years our current URL request/response model will completely go away. It's just the limited technology that makes SPAs painful to make at the moment, but the concept is more natural than reloading everything brainlessly.

I always say that Web Development is hard these days, because we are implementing dynamic content on too static technologies. There's too much trickery about it, but the idea of SPA is the only way to go in the future.

@jldrw You are confusing "turbolinks" with an SPA.

@CJJ Yes! A poor mans SPA.

https://goiabada.blog/can-you-build-a-single-page-application-without-a-front-end-framework-6799cee03750

Whether you like it or not, in a few years our current URL request/response model will completely go away.

@RoboRobok I think if something was going to replace something as ubiquitous as HTTP, then we’d be hearing more about it…

And yes I have heavily programmed in JavaScript and Ajax on some applications for example like I said an inline edit of an invoice item in other words the detail it just makes for a better as you say user experience but for most things a complete page refresh verses in place refresh really doesn't make that much difference.

I also program in cakephp and here's a good example for you. Their discussion forum used to use regular pagination now it's infinate scrolling, okay now for user experience some uses may like infinite scrolling me I like the regular pagination in fact I hate infinite scrolling.

So when you speak of user experience do you really think 10 uses are going to like things the exact same way, I don't see that.

@jlrdw no, 9 of them will prefer slower loadings, because that’s their „preference” LOL.

@jlrdw Either solution is possible with an SPA? What's your point?

@martinbean I'm not saying HTTP will be replaced. But it will evolve in direction that HTTP/2 started. And web apps will more and more resemble desktop apps, also development of web apps will more and more resemble development of desktop apps. Static, jumpy websites will be seen as archaic and antipattern. Let's face it - static websites give terrible user experience! But we don't see it yet, because we haven't seen much better. Just like DOS games seemed good-looking before anything better arrived.

This forum isn't spa, but I have no problem with my user experience here. I think the spa thing is being way over thought. As Spa is still standard web techniques.

It's not overthought, it's just technology that is not ready. How can better user experience be "overthought"? o0

oh mama! hot topic today. I will read this as soon as I get home

@jcmargentina :D

There has been some grossly inaccurate feedback on this thread.

OP asked very specific questions and obviously has a desire to learn. @jlrdw You are waffling total rubbish. You have no knowledge of the subject matter and are way outside your Laravel comfort zone.

@RoboRobok , there is not an absolute formula that tells you that an SPA is better than a classical approach.

You need to use these "techniques" according your project needs.

2 cases.

1. You need a SEO friendly website, for your institutional website (i.e restaurant site), then ... go with classical http back and fordward approach, what is the problem? LOL

2. You dont care about SEO, lets say ... and admin panel , something like that, where you have a high rate of interaction ... choose SPA or hybrid approach.

these are just examples, not mandatory at all.

I think the secret here is to understand and use what is better in every single situation , I mean a situation not only the type of project ... but also ... the time you have to do it ... the money ... your team ... etc.

PD:

Guys lets debate, in peace. Some day in the future we will hang out together in a LaraCon afterparty ... all drunk like brothers and sisters.

Cheers!

@jcmargentina you didn't say anything specific. I know all these things. Looks like you are on the same boat with @jlrdw stating the obvious without any substance. I asked specific questions, not meta gibberish from a person, who just found out about the SPA concept.