Advice needed: Choose between LiveView and Vue

Hi. I need some advice on choosing between LiveView and Vue.

My team’s current tech stack is Elixir, Phoenix, LiveView, and Vue. I find it increases the cognitive load of each of the team members to maintain LiveView and Vue together. IMO, we don’t fully utilize each of the technologies. Therefore, I have the idea to focus on either LiveView or Vue. Personally, I love to write in Elixir and choose LiveView means reducing the learning curve.

However, I have one concern about choosing LiveView. There are many libraries we can use with Vue. But, with LV, we require additional efforts to develop.

Does anyone have experience on fully using LiveView on your development? Would love to learn from your real-life experience.

Thanks in advance.

3 Likes

I think it really depends on what the requirements of your project are.

if you only need some custom form elements or validations, etc. then LiveView requires a lot less boilerplate than Vue to do the same things.

However if you want to build a Single-Page-Application, require interactions with complex JS APIs like the canvas, video or audio elements, or need pages to keep on working if the user goes offline, then this falls outside of the feature set that LiveView provides.

2 Likes

Drab is another library that predates LiveView. Take a look at it.

I also think it depends on your project requirements. Try to think of something you need that LiveView is not able to solve, then you have your answer.

1 Like

I would say it does not require interactions with complex JS APIs, but we do require to integrate with different 3rd party services, like Storyblok (Headless CMS), LaunchDarkly (Feature Flag Mgmt), etc.

I think this is a good way to validate the options. Thanks, man!

Vue.JS and only Vue.JS.

It would be much appreciated if you could explain your reasoning :slightly_smiling_face:.

I wouldn’t use both together. Keep in mind that with LiveView connection latency will effect user experience if server is far away from user. It will also demand more from server because more code is running on server also it’s keeping state in memory for every connected user. I think client apps are more scalable.

I would go client app route if you are creating normal user facing app. If you are creating intranet app for some company or app that is only used inside one country LiveView could work.

Are set on Vue? I think React is more popular and it will make easier to hire people who are experienced with it.

I also watched video about Svelte the new fast UI hotness. Looked quite interesting how it does minimal DOM changes and at least from that video it seemed you could create UIs very fast with it. Video about Svelte is here https://youtu.be/OyFI-zOrKSk

You should also look into creating API with GraphQL. There is excellent toolkit for GraphQL in Elixir called Absinthe. Its website is here http://absinthe-graphql.org/

I have extensively used Vue and I would not pick it again for apps frontend. I wouldn’t pick React or Angular either, though, since more or less the cognitive complexity is the same.

LiveView is great but has some limitations: your app won’t work offline, so if you want to use LiveView and target a mobile platorm with offline capabilities as well, you’ll need to make an app with either Kotlin, Flutter, SwiftUI or similar tools, because LiveView also negates the possibility to port or share part of the JS frontend code with things like Ionic, etc.

In these cases, where you know two tools are too much, but you are unsure which one to pick, I find it’s often a sign that neither is the right answer and you need to look for something else that is more specific to your use case.

Personally, I’d pick LiveView only for very well scoped where you can be sure it’s going to be ok and I’d pick a JS framework only if it’s absolutely necessary.