<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="336111" data-post-id="336111">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dsignr" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/120/5311_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dsignr
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>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.</p>
<p>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.</p>
<p>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! <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="336111" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-336111" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="336111"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="336132" data-post-id="336132">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yasoob" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yasoob/120/32016_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yasoob
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi! Just wanted to add my 2 cents. Look into the <a href="https://github.com/inertiajs/inertia-phoenix" rel="noopener nofollow ugc">inertiajs</a> 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 <a href="https://savvycal.com/" rel="noopener nofollow ugc">savvycal</a> and this phoenix/elixir adapter is also maintained by them mainly.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="336132" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-336132" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="336132"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="336133" data-post-id="336133">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dsignr" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/120/5311_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dsignr
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>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.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="336133" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-336133" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="336133"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="336232" data-post-id="336232">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dsignr" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/120/5311_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dsignr
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just a quick update, everyone. I tried the <code>inertia.js</code> using <a href="https://github.com/inertiajs/inertia-phoenix" rel="noopener nofollow ugc">inertia-phoenix</a> and I can confirm it’s pretty much doing 3. from my message above. Instead of a <code>&lt;data&gt;</code> 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.</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/1/3/139f7fca47a55720fdb313f7fbe2147a987bca77.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/139f7fca47a55720fdb313f7fbe2147a987bca77" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/1/3/139f7fca47a55720fdb313f7fbe2147a987bca77.jpeg" alt="image" data-base62-sha1="2NANr2kwIQ0mOZZyoTUwtCIKeyP" width="690" height="482" data-dominant-color="373F4D"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">984×688 74.5 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="336232" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-336232" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="336232"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="350912" data-post-id="350912">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sreyansjain" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sreyansjain/120/16464_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sreyansjain
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="dsignr" data-post="15" data-topic="65153">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/48/5311_2.png" class="avatar"> dsignr:</div>
<blockquote>
<p>er, 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.</p>
</blockquote>
</aside>
<p>Hello, How is it going?<br>
Can you please share updates about your experience.</p>
<p>How would you compare inertiajs with liveview.<br>
Thanks. Please respond when you have free time.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="350912" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-350912" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="350912"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="350914" data-post-id="350914">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dsignr" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/120/5311_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dsignr
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hello! Thanks for the tag. I actually shared <a href="https://www.reddit.com/r/elixir/comments/1hdugha/my_favourite_frontend_stack_phoenix_inertiajs/" rel="noopener nofollow ugc">my views on Reddit</a>. TLDR; I’m currently on InertiaJS with SVELTE 5.</p>
<p>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.<br>
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.</p>
<p>Some drawbacks I found, but not directly tied to InertiaJS:</p>
<ol>
<li>Sometimes there are memory leaks and it’s hard to find out.</li>
<li>Debugging could be better, but this has to do with SVELTE 5 more than Inertia. Inertia lives up to its promise.</li>
<li>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.</li>
</ol>
<p>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.</p>
<p>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!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="350914" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-350914" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="350914"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="350919" data-post-id="350919">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sreyansjain" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sreyansjain/120/16464_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sreyansjain
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="dsignr" data-post="17" data-topic="65153">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/48/5311_2.png" class="avatar"> dsignr:</div>
<blockquote>
<p>e has a larger ecosystem</p>
</blockquote>
</aside>
<p>It really helps. Thank you so much for sharing your experience.<br>
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).<br>
Its a great strategy for your use case.</p>
<p>Thanks again for sharing all the knowledge and experience.<br>
– My Best.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="350919" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-350919" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="350919"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="350942" data-post-id="350942">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dsignr" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/120/5311_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dsignr
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Glad I could be helpful.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="350942" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-350942" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="350942"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="351136" data-post-id="351136">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dsignr" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/120/5311_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dsignr
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>There is one more library I came across - Live Vue which is for VueJS. <a href="https://github.com/Valian/live_vue" class="inline-onebox" rel="noopener nofollow ugc">GitHub - Valian/live_vue: End-to-end reactivity for Phoenix LiveView and Vue · GitHub</a><br>
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.</p>
<p>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.</p>
<p>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 <code>npm install</code>, will blow up eventually. I will try the Live Vue library and update my experience here soon.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351136" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-351136" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351136"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="351137" data-post-id="351137">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sreyansjain" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sreyansjain/120/16464_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sreyansjain
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="dsignr" data-post="20" data-topic="65153">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dsignr/48/5311_2.png" class="avatar"> dsignr:</div>
<blockquote>
<p>s adamant on using Svelte</p>
</blockquote>
</aside>
<p>Hmm. No javascript is always better than any javascript (until you absolutely need it).<br>
I am hopeful about <a href="https://github.com/bartblast/hologram" rel="noopener nofollow ugc">hologram</a>, which might eliminate the need for any javascript frameworks/libraries.</p>
<p>Until then we got to use whats available.<br>
All the best for your launch. <img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351137" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-svelte-integration-how-to-handle-forms/65153/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-351137" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351137"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/65153/load_more?page=3">Load more posts</a>
</div></template></turbo-stream>