marciol
Phoenix LiveView vs SPA
Please, let me know if this kind of discussion already took place in another topic
.
Hi all, how do you consider if is better to build an app around SPA paradigm instead of use Server Side Rendering technologies.
I was thinking much about it and my first impressions is that familiarity with the stack has more weight than some objective criteria, given that a lot of apps can be developed with one or other approach, as we see with several apps in the wild.
Take for instance an app that I use everyday, Kanbanize. It is built around some server side rendering tech and it is awesome, but I know that some will tell that the UX is subpar, the same can be applied to Basecamp and Hey.
It’s get worse when you read the Twitter message from Chris, when they show that LiveView can exchange messages between frontend and backend more efficiently than a hand made SPA:
https://twitter.com/chris_mccord/status/1252997316103081984?s=20
So what do you think about it, how do you decide when thinking about start a new project with limited resources, as a indie hacker’s project for instance.
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Chat & Discussions>Discussions
Latest on Elixir Forum
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #performance











First 10 of 90 Posts
LTheGreats
Especially if you are an indie hacker, I would go with LiveView over a SPA, because it would simply allow for faster iteration on the front end and would likely significantly speed up the time to releasing production ready code. However, those benefits would only really apply if the people working on the project were capable of picking up LiveView, and they probably are. Also, there are very few web apps that cannot be implemented in LiveView, and to the point of an app being ugly it would not be due to it being a SPA or not, but rather one’s ability to write CSS.
pedromtavares
LiveView should be the default choice for most new Phoenix projects. Unless you’re doing some very intense UX work that requires constant realtime interactions as a core part of your project, LiveView will suffice. Even if your project needs instant feedback for isolated features, you can still get away with using Hooks. So yeah, for 99% of the cases, LiveView is viable and recommended.
WolfDan
In the example Chris created a basic twitter clone, but that makes me wonder… Is liveview a good choice for something like twitter? or in general a social network?
That makes me wonder exactly what are the use cases that liveview does not fit in
LTheGreats
One thing that LiveView would not work in would be something like Google Docs, or just in general desktop-like apps that are just using the browser as a type of extremely portable runtime.
WolfDan
oh that makes sense!
But getting back to the example of twitter for instance, social networks are quite big apps, could it be a good fit then? Taking into account all the interactions that came with it, sure the realtime side of liveview could be amazing but I’m not sure about the UX itself
valehelle
I don’t see why not. Twitter has a lot of interaction but not really that heavy on the UI/UX like for example a game. Most animation you should use CSS anyway and not dependent on LiveView.
gfviegas
well, many of this kind of conversation divert from a important topics: maintenability, code organization, tooling, etc.
You could have the same benefits of LiveView using WebSockets (even with something more advanced like GraphQL subscriptions) and thats not related of being a SPA or SSR.
With that said, I guess you should first pick SSR vs SPA for a given project, and there’s the pros and cons for each pick, and then, only then, analyze if you should use liveview or not.
gfviegas
Also, there’s a lot of CSS-in-JS nowadays, so you could also “avoid” writing CSS if that’s the reason why you pick LiveView.
For example, you can do it with react in a SPA application, or even in a SSR application with nuxt.js
dorgan
Twitter has indeed some degree of complexity in the timeline UI. With infinite scrolling, it has to keep potentially hundreds and hundreds of tweets in memory and only show a couple of them to avoid performance issues(similar to what Discourse does, except discord “cloaks” comments and twitter removes them and compensates the height differences). All of this while the user scrolls, and without messing the scroll position when hiding/showing tweets.
This is quite critical for this kind of ui’s performance and I’m not sure how it would be solved purely with LiveView, but definitely doable with hooks.
gfviegas
For me personally, I almost exclusively use Phoenix for APIs only. When I need this realtime updates stuff, I use GraphQL subscriptions.
As a fullstack developer that sometimes hire some frontenders to help building interfaces, it’s way more organized and flexible. With an API built, you dont need to share your business-backend code with frontend code directly. It also gives you a quick way of building mobile apps, external integrations, or even a complete rework of your web interface easily.
Of course one of this frontends can be a phoenix app, integrating with a backend app which is also an API, but I see little value there. At least not without using a JS framework anyway. You can SSR in phoenix with react, for example. But I’d still split the codebase in many scenarios.