dsignr

dsignr

Yeah, I used 1. in a large media company, it was my bad because enterprise CMS’es are complex and there are lot of workflows. Isolation of frontend and backend works best for it and you have the headache of having to deal with legacy frontend code as well.

LiveSvelte by itself looks really cool and I would probably try it in my next project. The only issue in my case is frontend code changes need backend changes as well, this maybe a unique problem to me because I have frontend only devs in my team to whom I would need to provide access to backend source code access as well, otherwise I become the bottle neck. It is more of an organisational hierarchy thing than the code itself.

Also, a lot seems to have changed since the last time I looked into LiveSvelte, looks a bit mature now. Either way, let’s see where this goes. Please do update us of your journey if you chose to work with LiveSvelte! :slight_smile:

1
Post #11
yasoob

yasoob

Hi! Just wanted to add my 2 cents. Look into the inertiajs project. It allows you to use React/Vue/Svelte and has a lot of nice goodies that make 2 a much more viable approach. It is also used by savvycal and this phoenix/elixir adapter is also maintained by them mainly.

2
Post #12
dsignr

dsignr

It’s really late where I live but, damn, this seems like exactly what I was missing out. Thank you very much! Will spend the weekend trying it and update here.

1
Post #13
dsignr

dsignr

Just a quick update, everyone. I tried the inertia.js using inertia-phoenix and I can confirm it’s pretty much doing 3. from my message above. Instead of a <data> element, it stuffs data into data attributes. However, if you look past this and the slightly tedious initial setup, it is actually so far pleasant to use. Will update more later once my integration is complete.

image
image984×688 74.5 KB

2
Post #14
sreyansjain

sreyansjain

Hello, How is it going?
Can you please share updates about your experience.

How would you compare inertiajs with liveview.
Thanks. Please respond when you have free time.

0
Post #15
dsignr

dsignr

Hello! Thanks for the tag. I actually shared my views on Reddit. TLDR; I’m currently on InertiaJS with SVELTE 5.

It is overall a joy to work with. Why not LiveView? Well, if your frontend is heavy with complexity, LiveView isn’t best suited for it. Eg. Lots of contextual menus, drop downs, tabbed content and the like.
Having said that, my philosophy is to always start with a problem from LiveView’s POV. If It cannot be easily done with LiveView, then I go with InertiaJS + SVELTE.

Some drawbacks I found, but not directly tied to InertiaJS:

  1. Sometimes there are memory leaks and it’s hard to find out.
  2. Debugging could be better, but this has to do with SVELTE 5 more than Inertia. Inertia lives up to its promise.
  3. I would start with Vue3 instead of Svelte 5 if possible. Again, due to very mediocre debugging experience and Vue has a larger ecosystem In general.

Should you give InertiaJS a try? Sure, try it out in a small project first. But, then again, always remember there is a penalty for maintainability when using JS codebases vs just pure LiveView. 6 months from now, you will have to allocate an hour or more to updating all the NPM packages and if there are version compatibility issues, then good luck.

So, my point is, try LiveView first if you can solve it using it. If not, then right now the best way to do JS frontend heavy work is using InertiaJS (for Phoenix). Hope this helps!

3
Post #16
sreyansjain

sreyansjain

It really helps. Thank you so much for sharing your experience.
I read the reddit post. I understand that you like to keep the frontend and the backend separate (for more control, flexibility and better teamwork).
Its a great strategy for your use case.

Thanks again for sharing all the knowledge and experience.
– My Best.

1
Post #17
dsignr

dsignr

Glad I could be helpful.

0
Post #18
dsignr

dsignr

There is one more library I came across - Live Vue which is for VueJS. GitHub - Valian/live_vue: End-to-end reactivity for Phoenix LiveView and Vue · GitHub
I feel this has the best of both worlds - VueJS + LiveView. In the inertiaJS example I shared, there is no live view integration (unless I’m doing it wrong). My understanding is Inertia is for full on JS based frontends. Live Vue and Live Svelte are for mix of both and in case of Live Svelte, it is slightly opinionated on where your Svelte files should go. I still love the inertiaJS integration. It has the best DX.

I was adamant on using Svelte 5 with InertiaJS and now I kind of regret using Svelte 5. In my opinion, it is not production ready and I have some memory leak somewhere in the interface. On brief surface level checks, I’m not doing anything fancy. I suspect it’s coming from the framework itself or somewhere from the state management side. I’m quite annoyed because I’m closer to launch with my product and this will set me back be a few days. I’m most likely going to just dump this and go try something like Live Vue.

If you can solve your problem with just LiveView, better to go for that. Javascript libraries, no matter how pretty they look outside are a burden on the developer over time in my experience. Dependencies are many and eventually one of them will be abandoned and your frontend pipeline, say npm install, will blow up eventually. I will try the Live Vue library and update my experience here soon.

1
Post #19
sreyansjain

sreyansjain

Hmm. No javascript is always better than any javascript (until you absolutely need it).
I am hopeful about hologram, which might eliminate the need for any javascript frameworks/libraries.

Until then we got to use whats available.
All the best for your launch. :+1:

2
Post #20