5 ms·

Panic at the SPA

14 points by betap 2y ago

temporallobe 2y ago
Modern Angular w/ SSR is pretty nice. Angular may be overkill for some folks (and a PIA to learn) but it really does solve a lot of common problems.
- pier25 2y ago
  They've been implementing some really cool features with partial hydration etc. Amazing Angular of all frameworks is taking the lead here and the innovative ones like Vue or Svelte.
WD-42 2y ago
I’m currently migrating a fairly large Vue.js 2 + django rest framework app by moving all the front end to the django backend templates using apline.js and htmx where necessary. I’m loving evey moment. It’s thousands of lines of code and dependencies removed. It’s faster. I feel like I’m waking up from a bad fever dream that was web development for the last 10+ years. What were we thinking?
- Swizec 2y ago
  > What were we thinking? You can make a mess or not a mess in any framework. The tech is not the problem. I bet in a few years you’ll have just as big a mess with alpine+htmx as you do right now with vue+rest. Ultimately the only thing that matters is having clear interfaces, well defined modules, and the discipline to keep it clean. The rest is all window dressing. PS: SPAs were invented for a world where server compute and bandwidth are expensive and/or you need highly interactive low-latency UX. They were never meant for mostly static websites that are cheap to generate and cache.
  - WD-42 2y ago
    I don't think it's going to be the same situation at all. First of all, the reason why I'm doing it in the first place is because Vue2 is completely deprecated. It's not even getting security updates, and migrating to Vue3 is such a hassle it's not worth it. This is a major maintainability issue. Now the new "stack" has about 5 JS dependencies total, all of which are very low surface area. It doesn't even require a build step. And Django is not going anywhere.
  - aaronbrethorst 2y ago
    You can definitely make a mess with any technology. The key issues I have with SPAs are: 1. You have to build your app twice. I don't have a team large enough to write it once in Python and again in JS or TS. 2. The state of the art in SPAs moves so quickly it feels to me like you have to spend a significant amount of your productive time staying in place on the treadmill before you can even consider creating value for your end users. 3. The web browser does a lot of work for us in SSRs. SPAs make (have historically made) us reinvent a lot of this from scratch. I recognize that this has improved in some ways in recent years. It's still not as brain-dead simple as just having different web pages that render HTML. SPAs were invented for a world where server compute and bandwidth are expensive and/or you need highly interactive low-latency UX Agree completely. I think there is a ton of value in treating technologies like Svelte, React, and the like as terrific ways to create 'islands of reactivity' within mostly static pages. I can do a ton with Stimulus.js and htmx to simulate much of the behavior I'd get out of a well-designed Svelte component, but sometimes I really do need that extra 20% of polish I'll get out of Svelte or React—and I'm very glad that they exist for that. (and with that I'm going to get back to building a SvelteKit app, which you can find here: https://github.com/onebusaway/wayfinder https://github.com/onebusaway/wayfinder)
    - pier25 2y ago
      What happens when there's overlap between the islands and /or Stimulus and/or htmx? I've never tried this but a priori it does feel mixing all those approaches could become messy.
      - aaronbrethorst 2y ago
        The only situation I've run into that is a bit of a mess is trying to reconcile loading a React dashboard chart thingy (https://tremor.so https://tremor.so) in a Rails web app where I'm using Turbo Drive to mediate page transitions—and that just required some careful reading of the documentation to reconcile.
    - jemmyw 2y ago
      > 2. The state of the art in SPAs moves so quickly it feels to me like you have to spend a significant amount of your productive time staying in place on the treadmill before you can even consider creating value for your end users. I think this is no longer true, not how it used to be. Of course, you CAN chase the latest cool. However, if you stick with one of the more popular libraries then things should be stable. My react code now doesn't look very different to my react code in 2019. They've added new things but I haven't used them.
- aaronbrethorst 2y ago
  I'm doing something similar, except with Stimulus.js and htmx. (Alpine's CSP support story is too weird for me to want to deal with.) If you're using Django Template Language, I highly, highly recommend using https://django-cotton.com https://django-cotton.com to create high level UI components to encapsulate common functionality.
  - WD-42 2y ago
    I chose Alpine mostly because the exiting code is in Vue, and Alpine maps really closely to Vue. For the few components where I need to reach for it (lots of client side state) I can copy over verbatim many of the Vuejs components into Alpine, which is a huge boon to the whole refactoring process. Cotton is really nice!
  - pier25 2y ago
    I really like the idea of Stimulus but I wish it was a bit more reactive and less verbose.
peterldowns 2y ago
I don't understand what the author is trying to say. Not hating; to me it was completely incoherent.
- jemmyw 2y ago
  yah it's really weird writing. I didn't get the point either. > the unbearable weight of the DOM and state love story begins to make you wish that they could end up drinking alone Whether you write an SPA or not, web applications are about taking some kind of state and turning it into an html document using the DOM.
nosefurhairdo 2y ago
Tl;dr: single page apps (react) are bad, perform badly, have bad tooling, and have a bad ecosystem. This is a tired critique which fails to mention even one reason why one might choose React (or other SPA framework) in the first place. I work on a big, complex React application and it is a great tool for the job. All of the issues mentioned are easily resolved with a modest amount of research or experience.
lelanthran 2y ago
I'm using a self-developed framework (proprietary for now) for my SaaS that almost completely eliminated backend code[1]. The downside is that quite a lot has to be done on the front-end because all the backend can provide are static hosted files and a query-executor[2]. So I looked at quite a lot of front-end frameworks for SPA, nope-ing my way out of each one. I'm still in the process of settling on one of the (very poor, IMHO) options for front-end SPA. For now I'm still using a bunch of little JS functions on the client because that was faster than learning some framework that might all have to be thrown away some day anyway. [1] I say "almost", but for my current product it has eliminated all backend code. The only "backend" code I write are PostgreSQL parameterised queries. No Java, C#, Go, Python, JS or anything else. While the framework does have the ability to schedule periodic execution of programs written in anything, for the current product all I have is a script to periodically truncate truncate the log file. [2] There are no security problems with this: I don't execute queries sent from the client; you can see it in action using `demo.skillful-training.com`, username `one@example.com` .. `ten@example.com` with password set to `1` for all of the users. Just a note, the demo site version is quite far behind the deployments for actual clients. [EDIT: My `ROADMAP.md` file has actually had `Add in Lua support` for the last year, but I have not had any need yet for coded logic on the backend that cannot be handled by an SQL query. At some point I may add in the ability to handle requests using Lua/$OTHER_PROGRAMMING_LANGUAGE, but for now there is no use-case]
- kikimora 2y ago
  I dunno how you authorize user actions. Especially complex cases that involve shared data. E.g. some user can see all materials, another can edit materials belonging to her group and also shared with him by others.
  - lelanthran 2y ago
    > I dunno how you authorize user actions. Especially complex cases that involve shared data. E.g. some user can see all materials, another can edit materials belonging to her group and also shared with him by others. It works just fine for those types of use-cases, including that specific one. I am planning to open-source it one day, but not soon (As an independent developer this gives me a very large edge over my competition for custom SaaS-type apps).
haburka 2y ago
This is a weird article. It feels like an LLM was promoted with a few points about how to critique frontend. They don’t really make any substantial claims nor do they back up their claims with real world evidence, instead just referencing general pain. If this is a real author: There are definitely valid complaints towards SPA but you need to be more specific and not just throw shade on the FE ecosystem as a whole. Talk about your specific failures and how the tooling got in the way of quality engineering. Generalities don’t really help anyone.
smitty1e 2y ago
> The truth is that the web was built around the idea of every page being an independent file. So Perhaps Abusing Stateless Protocols As Solo Pane Actors Screams: "Preventable Angst"

14 points by betap 2y ago

Modern Angular w/ SSR is pretty nice. Angular may be overkill for some folks (and a PIA to learn) but it really does solve a lot of common problems.

pier25 2y ago
They've been implementing some really cool features with partial hydration etc. Amazing Angular of all frameworks is taking the lead here and the innovative ones like Vue or Svelte.

WD-42 2y ago

I’m currently migrating a fairly large Vue.js 2 + django rest framework app by moving all the front end to the django backend templates using apline.js and htmx where necessary. I’m loving evey moment. It’s thousands of lines of code and dependencies removed. It’s faster. I feel like I’m waking up from a bad fever dream that was web development for the last 10+ years. What were we thinking?

Swizec 2y ago
> What were we thinking? You can make a mess or not a mess in any framework. The tech is not the problem. I bet in a few years you’ll have just as big a mess with alpine+htmx as you do right now with vue+rest. Ultimately the only thing that matters is having clear interfaces, well defined modules, and the discipline to keep it clean. The rest is all window dressing. PS: SPAs were invented for a world where server compute and bandwidth are expensive and/or you need highly interactive low-latency UX. They were never meant for mostly static websites that are cheap to generate and cache.
- WD-42 2y ago
  I don't think it's going to be the same situation at all. First of all, the reason why I'm doing it in the first place is because Vue2 is completely deprecated. It's not even getting security updates, and migrating to Vue3 is such a hassle it's not worth it. This is a major maintainability issue. Now the new "stack" has about 5 JS dependencies total, all of which are very low surface area. It doesn't even require a build step. And Django is not going anywhere.
- aaronbrethorst 2y ago
  You can definitely make a mess with any technology. The key issues I have with SPAs are: 1. You have to build your app twice. I don't have a team large enough to write it once in Python and again in JS or TS. 2. The state of the art in SPAs moves so quickly it feels to me like you have to spend a significant amount of your productive time staying in place on the treadmill before you can even consider creating value for your end users. 3. The web browser does a lot of work for us in SSRs. SPAs make (have historically made) us reinvent a lot of this from scratch. I recognize that this has improved in some ways in recent years. It's still not as brain-dead simple as just having different web pages that render HTML. SPAs were invented for a world where server compute and bandwidth are expensive and/or you need highly interactive low-latency UX Agree completely. I think there is a ton of value in treating technologies like Svelte, React, and the like as terrific ways to create 'islands of reactivity' within mostly static pages. I can do a ton with Stimulus.js and htmx to simulate much of the behavior I'd get out of a well-designed Svelte component, but sometimes I really do need that extra 20% of polish I'll get out of Svelte or React—and I'm very glad that they exist for that. (and with that I'm going to get back to building a SvelteKit app, which you can find here: https://github.com/onebusaway/wayfinder https://github.com/onebusaway/wayfinder)
  - pier25 2y ago
    What happens when there's overlap between the islands and /or Stimulus and/or htmx? I've never tried this but a priori it does feel mixing all those approaches could become messy.
    - aaronbrethorst 2y ago
      The only situation I've run into that is a bit of a mess is trying to reconcile loading a React dashboard chart thingy (https://tremor.so https://tremor.so) in a Rails web app where I'm using Turbo Drive to mediate page transitions—and that just required some careful reading of the documentation to reconcile.
  - jemmyw 2y ago
    > 2. The state of the art in SPAs moves so quickly it feels to me like you have to spend a significant amount of your productive time staying in place on the treadmill before you can even consider creating value for your end users. I think this is no longer true, not how it used to be. Of course, you CAN chase the latest cool. However, if you stick with one of the more popular libraries then things should be stable. My react code now doesn't look very different to my react code in 2019. They've added new things but I haven't used them.
aaronbrethorst 2y ago
I'm doing something similar, except with Stimulus.js and htmx. (Alpine's CSP support story is too weird for me to want to deal with.) If you're using Django Template Language, I highly, highly recommend using https://django-cotton.com https://django-cotton.com to create high level UI components to encapsulate common functionality.
- WD-42 2y ago
  I chose Alpine mostly because the exiting code is in Vue, and Alpine maps really closely to Vue. For the few components where I need to reach for it (lots of client side state) I can copy over verbatim many of the Vuejs components into Alpine, which is a huge boon to the whole refactoring process. Cotton is really nice!
- pier25 2y ago
  I really like the idea of Stimulus but I wish it was a bit more reactive and less verbose.

peterldowns 2y ago

I don't understand what the author is trying to say. Not hating; to me it was completely incoherent.

jemmyw 2y ago
yah it's really weird writing. I didn't get the point either. > the unbearable weight of the DOM and state love story begins to make you wish that they could end up drinking alone Whether you write an SPA or not, web applications are about taking some kind of state and turning it into an html document using the DOM.

nosefurhairdo 2y ago

Tl;dr: single page apps (react) are bad, perform badly, have bad tooling, and have a bad ecosystem. This is a tired critique which fails to mention even one reason why one might choose React (or other SPA framework) in the first place. I work on a big, complex React application and it is a great tool for the job. All of the issues mentioned are easily resolved with a modest amount of research or experience.

lelanthran 2y ago

I'm using a self-developed framework (proprietary for now) for my SaaS that almost completely eliminated backend code[1]. The downside is that quite a lot has to be done on the front-end because all the backend can provide are static hosted files and a query-executor[2]. So I looked at quite a lot of front-end frameworks for SPA, nope-ing my way out of each one. I'm still in the process of settling on one of the (very poor, IMHO) options for front-end SPA. For now I'm still using a bunch of little JS functions on the client because that was faster than learning some framework that might all have to be thrown away some day anyway. [1] I say "almost", but for my current product it has eliminated all backend code. The only "backend" code I write are PostgreSQL parameterised queries. No Java, C#, Go, Python, JS or anything else. While the framework does have the ability to schedule periodic execution of programs written in anything, for the current product all I have is a script to periodically truncate truncate the log file. [2] There are no security problems with this: I don't execute queries sent from the client; you can see it in action using `demo.skillful-training.com`, username `one@example.com` .. `ten@example.com` with password set to `1` for all of the users. Just a note, the demo site version is quite far behind the deployments for actual clients. [EDIT: My `ROADMAP.md` file has actually had `Add in Lua support` for the last year, but I have not had any need yet for coded logic on the backend that cannot be handled by an SQL query. At some point I may add in the ability to handle requests using Lua/$OTHER_PROGRAMMING_LANGUAGE, but for now there is no use-case]

kikimora 2y ago
I dunno how you authorize user actions. Especially complex cases that involve shared data. E.g. some user can see all materials, another can edit materials belonging to her group and also shared with him by others.
- lelanthran 2y ago
  > I dunno how you authorize user actions. Especially complex cases that involve shared data. E.g. some user can see all materials, another can edit materials belonging to her group and also shared with him by others. It works just fine for those types of use-cases, including that specific one. I am planning to open-source it one day, but not soon (As an independent developer this gives me a very large edge over my competition for custom SaaS-type apps).

haburka 2y ago

This is a weird article. It feels like an LLM was promoted with a few points about how to critique frontend. They don’t really make any substantial claims nor do they back up their claims with real world evidence, instead just referencing general pain. If this is a real author: There are definitely valid complaints towards SPA but you need to be more specific and not just throw shade on the FE ecosystem as a whole. Talk about your specific failures and how the tooling got in the way of quality engineering. Generalities don’t really help anyone.

smitty1e 2y ago

> The truth is that the web was built around the idea of every page being an independent file. So Perhaps Abusing Stateless Protocols As Solo Pane Actors Screams: "Preventable Angst"