Live data from Hacker News

A single-page app is almost always worse than a multi-page app

gregnavis.com

121–130 of 152 posts

Re: A single-page app is almost always worse than a multi-page app

#121
post #6

So, the OP argues that SPAs introduce unnecessary frontend state: "I think this is a very underappreciated aspect of SPAs. Stateful software is always more difficult to work with than stateless. The frontend state is added on top of the already-existing backed state. This requires more development time, increases the risk of bugs, and makes troubleshooting more difficult." But the thing is, almost as soon as you have…

But the thing is, almost as soon as you have any kind of significant user input to handle (multipart forms, date pickers, autocomplete elements, conditional input elements) you are instantly dealing with complex frontend state. And then your choice is not "SPA vs plain HTML forms," it becomes "SPA vs (ad hoc jQuery tangle + ad hoc server side endpoints that know to speak to random jQuery UI libraries)." In my experie…

>In the last two years I've built five very complex forms for the healthcare industry that not only had crazy looking flow-charts...

Can you maybe elaborate a little bit more? I've had to do some pages for configuring industrial machinery, some having over 100 parameters, many of which would affect what other parameters could then be used or selected. Used Vue.js which worked pretty good, but I'm curious of other ways...

Re: A single-page app is almost always worse than a multi-page app

#122
I didn't really learn web development seriously until the age of SPAs, so I find SPAs much easier to reason about than multi-page. That said, I'm not really sure that a UI which is mostly fields and forms really warrants a front-end framework unless its an extremely complex, stateful flow.

Re: A single-page app is almost always worse than a multi-page app

#123
post #69

Earlier quoted context omitted.

That's like saying that if you have to kill a fly, why opt for swatter when you can use a bazooka? After spending some years building an SPA webapp, I'm really missing the simplicity of stateless HTML. The front-end framework my colleagues picked really likes to carry state around, like between pages, which has caused numerous hard-to-find bugs. These bugs are triggered when you do certain sequence of actions across…

Legitimate question: if you have multiple pages, are you still actually creating an SPA ? That may be the problem that you're encountering, and I can sympathize. Nobody wants to transfer state across page loads, it's a mess...

The reason we chose to make an SPA for the big project is that we wanted the back-end to work for multiple different types of front-ends, some potentially adding automations from the client side via the API. Who knows, were it not for that, we may have chosen a simpler HTML+jQuery design.

Re: A single-page app is almost always worse than a multi-page app

#124
post #6

So, the OP argues that SPAs introduce unnecessary frontend state: "I think this is a very underappreciated aspect of SPAs. Stateful software is always more difficult to work with than stateless. The frontend state is added on top of the already-existing backed state. This requires more development time, increases the risk of bugs, and makes troubleshooting more difficult." But the thing is, almost as soon as you have…

shrug That feels like a straw man, you can obviously also use modern js and a decent framework (vue react whatever) to make the portions of the page that need state, transitions and complex interactions very user friendly and easy to reason about without pulling the entire site or section of site up into an SPA. I have seen far too many implementations pull whole sites or large sections of sites up to SPA to mitigate…

The author recommends that as an option as well

> Third, if you’re implementing a very complicated component then you can use React just for that component. For instance, if you’re building a chat box then there’s really no need to implement your login page in React. The same applies to Vue.js and the rest of the pack.

Re: A single-page app is almost always worse than a multi-page app

#125
post #77

Earlier quoted context omitted.

But the thing is, almost as soon as you have any kind of significant user input to handle (multipart forms, date pickers, autocomplete elements, conditional input elements) you are instantly dealing with complex frontend state. And then your choice is not "SPA vs plain HTML forms," it becomes "SPA vs (ad hoc jQuery tangle + ad hoc server side endpoints that know to speak to random jQuery UI libraries)." In my experie…

If you didn't use JS for date pickers, you didn't have very inclusive browser support - especially for something like a healthcare website. [1] Were the designs and layout of these SPA and HTML5/CSS3 website also identical? [1] https://caniuse.com/#search=input%20date

It's more than a little absurd that there isn't a passable date picker implemented across the major browsers. I have wasted far, far too much of my life fighting with different half-baked JS datepicker components already in my life.

Re: A single-page app is almost always worse than a multi-page app

#126

Earlier quoted context omitted.

> stateless API Does it not access any data?

Most JSON/data APIs for SPAs are similar to SQL database servers: maintaining a persistent connection is useful for performance reasons, but there's nothing about the API that dictates that it's required. The only state that is required across API calls is an authenticated session, and that is maintained on the server side.

and even authentication can be done stateless. Makes load balancing easy since each request can go to a different server

Re: A single-page app is almost always worse than a multi-page app

#127
post #121

Earlier quoted context omitted.

But the thing is, almost as soon as you have any kind of significant user input to handle (multipart forms, date pickers, autocomplete elements, conditional input elements) you are instantly dealing with complex frontend state. And then your choice is not "SPA vs plain HTML forms," it becomes "SPA vs (ad hoc jQuery tangle + ad hoc server side endpoints that know to speak to random jQuery UI libraries)." In my experie…

>In the last two years I've built five very complex forms for the healthcare industry that not only had crazy looking flow-charts... Can you maybe elaborate a little bit more? I've had to do some pages for configuring industrial machinery, some having over 100 parameters, many of which would affect what other parameters could then be used or selected. Used Vue.js which worked pretty good, but I'm curious of other way…

Some of our forms have 150+ fields with a rule engine that hides/shows various sections of the forms or hides items from particular drop downs, even auto populating fields with custom data via 60+ rules. All using jQuery, and it's impossible to work on.

Re: A single-page app is almost always worse than a multi-page app

#128
post #6

So, the OP argues that SPAs introduce unnecessary frontend state: "I think this is a very underappreciated aspect of SPAs. Stateful software is always more difficult to work with than stateless. The frontend state is added on top of the already-existing backed state. This requires more development time, increases the risk of bugs, and makes troubleshooting more difficult." But the thing is, almost as soon as you have…

But the thing is, almost as soon as you have any kind of significant user input to handle (multipart forms, date pickers, autocomplete elements, conditional input elements) you are instantly dealing with complex frontend state. And then your choice is not "SPA vs plain HTML forms," it becomes "SPA vs (ad hoc jQuery tangle + ad hoc server side endpoints that know to speak to random jQuery UI libraries)." In my experie…

Were you able to stop page refresh after form submit without JS? That's something I've been looking for, for a long time.

Re: A single-page app is almost always worse than a multi-page app

#129
I'm a long time server-side developer who've been working on the front-end for the past 6 months.

I don't agree with this article. I think its author has a significant misunderstanding of SPAs and overstates some of the potential issues. Having built both type of applications at varied level of complexity I absolutely don't agree with the notion that SPAs are necessarily more expensive than MPAs. I'll address a few of his points, but most, if not all, of his claims can similarly be refuted.

Statefulness: Few people would build an SPA on top of a stateful backend? Most SPAs query an API which nowadays will more than likely be hypertext driven (read stateless). The user authenticates, gets an access key, then serves that access key along with each subsequent request to the API that needs it. The server does not keep a session around. It receives the query, does its job in the confines of what is requested and serves back a response (likely in JSON). That's more or less it. There's very little state involved here.

Testing: Vague unsubstantiated claims. Why make backend and frontend talk to each other when mocking would do just fine.

Performance and network latency: Has anyone been using an SPA recently and had this as their main problem? If your client is incessantly polling your API, then it's a sign that either your API is not designed well enough to address the problem domain, or you need to employ a caching mechanism on the front. There's no cookie cutter way to architect an API. If your client is more likely to query and use 10 items from a collection, don't force it to make 10 requests, provide a facility to bundle them up into one. On the front-end most frameworks have satisfactory libraries to handle state and cache management.

Slow first time load, multiple times per day? Stop updating your live bundle multiple times in a single day.

Authentication with JWTs: JWTs are not an SPA requirement, they're just one of many approaches to authentication. I don't use them and don't see the point of them in most apps that I've built. If you do use them and need to keep track of them (maybe because you'd like to be able to invalidate them), store them in something fast like Redis on the server.

State updates: The JavaScript ecosystem has excellent caching facilities, that can automatically poll and update resources upon a timeout. It's indeed not rocket science.

Error Handling: You catch the error from the http response and call your handler. That's practically like muscle memory whenever one does an http request.

        client.get({url}).then(resp=>{
            // handle response
        }).catch(error=>{
            errorhandler(error)
        })

No busywork there and probably much more user-friendly than that default error message that will be served by nginx (if one truly wants to stick to such a "no busywork" philosophy).

The rest of the article can similarly be addressed.

My conclusion is simply that if you want to maximize your cost efficiency, build a team that is familiar with their tools. If all your developers have done and are familiar with are MPAs, then yes, it might be more costly to build an SPA for them at first. I should know. I went through that phase at the beginning of my recent JS foray. Doing anything was slow and would've taken me a fraction of the time by simply playing around with Jinja on the backend. But fast-forward a few months, after immersing myself a bit more with the ecosystem, I cannot imagine reverting to that approach to build anything more complex than a simple data driven app. Emphasis on the simple.

Re: A single-page app is almost always worse than a multi-page app

#130
post #77

Earlier quoted context omitted.

If you didn't use JS for date pickers, you didn't have very inclusive browser support - especially for something like a healthcare website. [1] Were the designs and layout of these SPA and HTML5/CSS3 website also identical? [1] https://caniuse.com/#search=input%20date

If it's public facing, that's a huge concern. If it's intended for business users, particularly if on an intranet site, it's often very easy to limit the number of browsers and versions you need to support to just a handful.

The Web has been collecting dates from users in forms long before date-pickers existed.
Post reply on HN