marciol

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.

First 10 of 90 Posts Switch mode

LTheGreats

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

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

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

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

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

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

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

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

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

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.

Where Next?

Trending in Discussions Top

AstonJ
As the title says, please share what you’ve been up to with Elixir. Whether that’s been learning it, looking into it, making stuff with i...
2977 91561 914
New
byu
@chrismccord : I just saw the Extract AGENTS.md from Phoenix.new into phx.new generator commit to the phoenix project. My initial shotgu...
New
arcanemachine
I was working on an Ecto migration and I needed a timestamp. So, for the nth time, I looked up the different data types for timestamps, a...
New
AstonJ
Just a general thread to post chat/news/info relating to AI/ML stuff that may be relevant for Nx now or in the future. Got anything to sh...
New
type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
juhalehtonen
There has been a thread to discuss the Stack Overflow Developer Survey on this forum every year since 2018, so here’s yet another one for...
New
alexslade
Fly’s CEO posted this recently - Turn And Face The Strange · The Fly Blog It says that Fly is going all-in on sprites, which is a worry ...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New
bjorng
We want to introduce a new native datatype to Erlang: native records. Although replacing all tuple records with native records is not our...
New

We're in Beta

About us Mission Statement