4 ms·

It took SPAs something like 5 years of popularity to get to a place where they are basically fine. I‘m thinking of things like routing, open new tab, back butto

by kall 5y ago

It took SPAs something like 5 years of popularity to get to a place where they are basically fine. I‘m thinking of things like routing, open new tab, back button working, back button state/scroll restoration, sane loading indicators, accessibility, keyboard interaction and feeling generally snappy+reliable. If a movie theater creates their website using next.js today, I probably won‘t notice or mind. A few years ago, when that kind of website went SPA, it made me shudder. If this style gains traction, are we in for the same range of teething issues for a few years?

mcintyre1994 5y ago
This is definitely a good point. FWIW I think some of these became issues because SPAs were re-inventing a lot more than what these systems are. These are still server-rendered pages so they should feel more like that than they do an SPA, generally. On routing, I know Phoenix LiveView for instance does have a way to do navigation over the websocket but I don't know enough about it to know if it makes the same mistakes/introduces the same issues that SPAs did. Looking at this article though I'm guessing the Laravel Livewire one doesn't address routing at all (because what would you hydrate on the server?) and you'd be routing in a normal server-rendered way.
di4na 5y ago
Phoenix liveview already handle most of these. 1) Routing is handled 2) open new tab is not handled maybe, i am not sure what the problem is 3) back button work on phoenix liveview, we just use the normal push 4) back button state restoration is easy, it is made for it 5) scroll restoration depends of what you did 6) Sane loading indicators are built in and introduced already 7) accessibility is a non problem, this is just normal HTML, not generated div that create a mess 8) keyboard interaction are better than default SPA but probably could be better ? Idk 9) Feeling snappy/reliable... well idk, i feel it is far better than SPA already, but we will see long term
- mcintyre1994 5y ago
  > 2) open new tab is not handled maybe, i am not sure what the problem is If you middle click (or right click > Open in new tab) a link on HN then it'll open that link in a new tab. Loads of SPAs break this and it's really annoying if you're used to using it. I'm not sure if Phoenix live navigation helpers break it or not, do you know?
  - di4na 5y ago
    They would probably not break it, i would have to check, but it is just a `a` link under the hood. You may lose some of the state, depending of how much the url and backend store.
- kall 5y ago
  That's good to hear. I did not mean to say these are actual problems, since I have never used these tools, only that a new approach needs some care. As long as you don't take over routing most problems fall away. Once you do, it becomes harder. Examples like multi-level routing with tabs/subtabs. If I "open in background tab" the "Performance" tab inside the "Mobile" tab, will it work (e.g. send me to myapp.com/admin/mobile/performance)? Just out of ignorant curiosity, if I "open in background tab" from a LiveView app, will I get the same server state session or a fresh one?
  - di4na 5y ago
    It would be fresh, but the url will probably give some information to the app about your state, depending of how it is implemented, so it will probably bring up the state that was already stored for that URL.

by kall 5y ago

mcintyre1994 5y ago

This is definitely a good point. FWIW I think some of these became issues because SPAs were re-inventing a lot more than what these systems are. These are still server-rendered pages so they should feel more like that than they do an SPA, generally. On routing, I know Phoenix LiveView for instance does have a way to do navigation over the websocket but I don't know enough about it to know if it makes the same mistakes/introduces the same issues that SPAs did. Looking at this article though I'm guessing the Laravel Livewire one doesn't address routing at all (because what would you hydrate on the server?) and you'd be routing in a normal server-rendered way.

di4na 5y ago

Phoenix liveview already handle most of these. 1) Routing is handled 2) open new tab is not handled maybe, i am not sure what the problem is 3) back button work on phoenix liveview, we just use the normal push 4) back button state restoration is easy, it is made for it 5) scroll restoration depends of what you did 6) Sane loading indicators are built in and introduced already 7) accessibility is a non problem, this is just normal HTML, not generated div that create a mess 8) keyboard interaction are better than default SPA but probably could be better ? Idk 9) Feeling snappy/reliable... well idk, i feel it is far better than SPA already, but we will see long term

mcintyre1994 5y ago
> 2) open new tab is not handled maybe, i am not sure what the problem is If you middle click (or right click > Open in new tab) a link on HN then it'll open that link in a new tab. Loads of SPAs break this and it's really annoying if you're used to using it. I'm not sure if Phoenix live navigation helpers break it or not, do you know?
- di4na 5y ago
  They would probably not break it, i would have to check, but it is just a `a` link under the hood. You may lose some of the state, depending of how much the url and backend store.
kall 5y ago
That's good to hear. I did not mean to say these are actual problems, since I have never used these tools, only that a new approach needs some care. As long as you don't take over routing most problems fall away. Once you do, it becomes harder. Examples like multi-level routing with tabs/subtabs. If I "open in background tab" the "Performance" tab inside the "Mobile" tab, will it work (e.g. send me to myapp.com/admin/mobile/performance)? Just out of ignorant curiosity, if I "open in background tab" from a LiveView app, will I get the same server state session or a fresh one?
- di4na 5y ago
  It would be fresh, but the url will probably give some information to the app about your state, depending of how it is implemented, so it will probably bring up the state that was already stored for that URL.