Escaping the SPA rabbit hole with modern Rails – Jorge Manrubia – Medium

What people use that :wink: ? I think the scroll tries to be fancy and remember that last thing you read or something like that. For sure the implementation can be wonky. As with all things theres a place for it and as with all things people take it to the extreme. For the record, I typically take advantage of SPA style functionality behind guarded endpoints. Pages such as landing pages, marketing pages etc. I try to keep as static as possible because, and I quote

Pure server side rendered pages are today so fast and predictable

2 Likes

Of course SPAs have their problems and building a server rendered application is easier. That should be a no brainer. You introduce a new language and a new framework + communication between 2 systems. Plus, you introduce state.

But I feel like the article misrepresents some of the complexities involved in building an SPA.

You will need design carefully your serialization logic to optimize the database queries and keep things performant.

As if you didn’t need to do with server side rendering. You need to be equally careful when rendering a whole page with all of that data (where otherwise you’d retrieve part from an API). Which especially in Rails thanks to lazy loading ™ can be hell.
The post also kind of glosses over GraphQL (imo) and just how much it helps with the problem of fetching the right data. For instance with Relay each component can specify the data it needs and it will all be composed into one big query (granted I never did this in practice, so far).

As for initial load time, it depends on how much of your page is static. In an SPA or well JAM stack where you pre render the markup and then hydrate your first render is much faster because you need no database queries serving the initial page + the static HTML can be stored in a CDN close to where your users are.
Of course that’s not always great (looking at you reddit where I see a useless page and then it loads posts for like 5 seconds).

On the other hand, for apps that I expect to spend a significant of time in (think: a game) - I don’t really mind an increased initial load time vs. the much faster interactions later. If the data is already loaded/cached then the interactions can be pretty much instant, as no server round trip is needed at all.

I’m also mildly unhappy with some of the criticism in the post is just presented as “this is bad” without much reasoning:

On the other hand, I strongly dislike the Flux/Redux camp. I have seen so many smart people adopting it that I have made an effort to study and understand it, multiple times. I can’t avoid ending up shaking my head in disbelief when I see the code. I don’t see myself writing code following such pattern and being moderately happy at the same time.

Finally, I have a difficult time accepting that mixing HTML and CSS in components full of javascript logic is a good idea. I understand the problem this solves, but the issues it introduces don’t make this approach worth it, in my opinion.

The whole section (for me) pretty much summarizes to: I dislike the arguably most popular approach for building SPAs (the react way) without really specifying what’s bad about it other than mixing HTML, CSS and JS.

The last kicker for me is betting on stimulus that is only “months old” after saying that every yea new frameworks appear and that it’s a problem because you have to live with your choices for so long :woman_shrugging:

It might also be worth mentioning some time that if you already have an API ready to roll, development of a native app (mobile!) is easier, albeit I think lots of mobile apps would have been better off by just staying web pages. But it also, if you choose so, allows 3rd party developers to integrate with your platform easier.

Funnily enough, through “trusted web activities” Progressive Web Apps (special SPAs) can now apparently be published to the Android App Store - Google Docs. Which for certain kind of apps makes SPAs even more appealing to me, however we’ll have to see how this does in practice (this is from a couple of weeks ago).


Contrary to what you may now believe, I’m not some super SPA lover I just think the article misrepresents some of the trade-offs quite a bit. And that there are use cases for SPAs. I completely agree though that they are over used and people seem to severely underestimate good old server side rendering and how far it can take you. It highly depends on what you build though. Our app is mostly server rendered, but we have some parts where we need very fast interactions and rendering it server side might actually be more complicated (think someone editing a huge “document” were submitting the document for real triggers calculations that take quite a while). These parts are then SPA-ish in their use of front end frameworks, which I think is a good tradeoff often, and also what Stimulus aims for to the best of my understanding.

6 Likes

Then I guess you better hope that you never become one of those
people who have no choice but to care, eh?

What are you saying?

Damn Discourse cut out my previous quote:

I am saying OVERALL few people care. I guess that was lost.

As far as I can tell PWA’s don’t have to be SPAs (I was confused about this as well for the longest time).

Progressive Web Apps:

Now “Feel like a natural app” may imply SPA to some …

There is a qualification when it comes to the App Shell model:

For single-page applications with JavaScript-heavy architectures, an application shell is a go-to approach.

4 Likes

This has to be your OS or net though because even my patched and slowed to hell i7-3770 (thanks to Spectre and Meltdown) on Windows loads Discourse near-instantly both on Firefox and Chrome (and also on Safari on my MBP). I do have a gigabit connection though, that might be it.

1 Like

Not strictly factual. Most people I asked said they actually prefer the sites where they can see that the browser is still loading, even if the loading takes 10 seconds. Many SPAs give almost zero clues that a work is being done currently and people end up clicking a lot of stuff on the screen until they realize that their previous request was still in progress.

For a lot of common folk the UX of SPAs is confusing. I don’t contend that they are a good fit for a number of cases but the SPA approach in general is oversold.

4 Likes

…brother? :003:

That’s not such a minor problem as you make it sound. If you constantly mix a number of these 3-language fragments you would have a very difficult time tracking down a layout or lag problem, for example – I’ve heard many Vue and React devs complain about how hard it is to dissect / manually reconstruct a page when a subtle and not-always-reproducible problem is reported (especially with frameworks minifying stuff; I know about source maps but surprisingly few teams actually deploy these). Granted I might have misunderstood but the fact that I’ve heard very similar complaints 5+ times has to say something.

Contrast this with a server-side rendered template + a few partials where almost everything you need is right in front of you and can even be made better by showing 4 opened file panes on one screen.

I wouldn’t underestimate developer happiness. People throwing their hands in the air and taking 3-hour breaks because they got pissed is a reality and something that likely each and every one of us has done at some point in their careers.

No contradiction. Elixir is claimed by many to be LISP-like (minus the syntax obviously) and yet Jose and the others didn’t go contributing to Common Lisp, Racket or Clojure – they made Elixir, and Elixir is doing great while being much younger than a ton of programming languages (and I’d argue it’s doing much better than many of them as well). So I don’t get the irony you seem to be pointing at. People learn and invent better ways of doing things. It’s just that in web development that’s the exception and not the rule – I’ll immediately agree that most newly “invented” things in the web area are not only superfluous but downright harmful.

And I am not a SPA “hater”. As a practical guy who loves receiving money for getting things done that the businessmen actually want, I cannot help but shake my head in disbelief when I see the majority of an industry falling victim to hype, fashion, cargo-culting and a complete lack of independent critical thinking.


To clarify, I think we agree in general – just felt I wanted to refine some points and show my disagreements with certain nuances.

7 Likes

But not everything developer friendly is tradeoff neutral.

Dear Developer, The Web Isn’t About You

Whatever you may think of the arguments in detail, what it seems to boil down to is that most of the SPA-culture has a disregard for the browser’s version of fault tolerance. For a web document (delivered) markup (HTML) is the foundation, visual design (CSS) is an enhancement, and finally interaction is an enhancement (Adaptive Web Design).

Meanwhile SPAs treat the browser as some kind of universal JavaScript runtime - barely delivering any markup, making the most fragile of the three the core technology and making it responsible for emitting the DOM - practicing JavaScript-first in a JavaScript-last environment.

9 Likes

With JS web apps, as long as the initial app works enough to render (if it doesn’t that is a sign of a different sort of problem), you can actually handle errors in JS after without the app dying… if your site is in an environment where you are mutating the DOM by grabbing classes and IDs on the fly, if something breaks, giving the user feedback and handling that error is far more difficult / uglier for the user…

The best tool for a job is the one you know how to use IMO, and a lot of people don’t know how to properly write JS web apps (the Internet is full of bad JS advice and literally hundreds of thousands broken JS libraries), but done right, you can provide a beautiful, flexible, easily maintained UI using JS – especially if you are saving or loading data in realtime.

Also, it is important to note that not everything should be a web app or SPA, and some companies create poor experiences due to poor implementation (someone mentioned Twitter routing earlier in the thread…)

Great example of a JS web app: Gitlab. Gitlab’s .com not only provides a great UX for a JS app, Gitlab instances are also trivial to spin up in your own environment. (GitLab is VueJS.)

FWIW, Microsoft has also built some very interesting, complex web app infrastructure with React (https://developer.microsoft.com/en-us/fabric). I wouldn’t throw any funerals just yet…

1 Like

@LostKobrakai can you unpack the EEX components in 1.9 thread?

perhaps a new thread?

I agree, EEX components would be VERY SIGNIFICANT

1 Like

I fully agree that writing an application with an SPA means that you have to maintain two apps (as well as the interface between them) and that there are many instances in which this extra effort is not justified.

On the other hand, I do really like the direction Elm is going (and I believe the author of the article is not aware of it), which reduces a lot of his concerns (Architecture/Brittleness and Initial Load Time are all questions Elm has strong answers to).

Of course, Elm is not a silver bullet: It definitely is more difficult (maybe that will change some time?) to find people who know (or are willing to learn) Elm, and there are definitely things like the serialization/deserialization approaches and interaction with the outer JS-world that could (in my own humble opinion) be improved.

1 Like

Thanks for the clarification! I always had the offline availability high up on the list of requirements. But I guess you can also implement a Service worker to achieve the same level of offline availability for a server rendered app, haven’t done so myself though.

Load various pages in the PWA with an airplane mode enabled. Ensure the app presents some content even when offline. Use Lighthouse to verify the start URL responds with a 200 when offline .

My problem with the post is mainly that it just says that this mixing is bad, period. No argument, nothing - it’s left to the reader to imagine why this might be bad. And this is a design choice by those frameworks, which lots of people quite like.

Specifically for layout problems I’ll also argue that it’s way superior than normal server rendered web apps. Through css-in-js you nowadays follow a philosophy where every component gets its unique class to not be reliant on the nesting level and hence different components influencing each other. They’re meant to be self-contained.

Furthermore, because you explicitly import the classes to use it’s easy to track down which component uses what classes etc.

It just seems arbitrary to me that the ongoing invention in React and co. is portrayed as being a bad thing (“Every year, new frameworks, patterns, and framework revisions appear that change programming models quite a bit. You will have to write and maintain a ton of code based on your architectural choices”) but then when stimulus with its innovations comes around it’s good.

To be fair it’s not portrayed as bad, just something to be wary off. I miss that wariness when talking about stimulus.

@dimitarvp also thanks for showing your disagreements, I like a good discussion where everyone can learn :slight_smile: I also think we agree in general, it’s much easier to disagree on details after all :smiley:

1 Like

From what I can tell it is easier to implement offline for server rendered pages because you can simply stash the whole response in the cache and then just pull the whole page out when needed.

With an SPA things can become more complicated - especially if data for offline doesn’t come in via request/response but websocket or server sent events - likely leading to using IndexedDB API as a backing store. WS and SSE support for service worker seems to have happened by accident. The real service worker focus is on request/response with the Fetch API and Streams API.

See also: Streams? Or app shells?

It is a work computer so that’s entirely likely. It does load faster at home but I’m mostly on the forums while at work so… It is very noticeable though. ^.^;

Entirely agree here. Just experienced that this morning while reading news… >.>

Brothers? ^.^

Huh, really? I thought those were pretty standard now with how almost ever tool generates them for you now… Interesting…

Or use bucklescript(-tea), which generates smaller code, module code (so webpack can split it up for speed and updating reasons, where elm output a monolithic huge file), and runs faster. ^.^

2 Likes

Recently there seems to have been a push to include them, you know discoverability of the web etc. At least that’s what happened at rails a couple of weeks back (source maps on is now the production default again)

The thread also just theorizes why it’s not the default in the JS eco system (at least in 2017) and people seem to think because of code obfuscation :man_shrugging:

1 Like

Ah that’s super good to hear!

>.>
I guess they don’t know that even chrome and firefox themselves can reformat the javascript to be ‘readable’, at which point it’s just simple renaming as things are figured out what they do unless you don’t mind doing things like this, which runs much slower and can still be reversed? ^.^;