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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Morzaram" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Morzaram/120/24522_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Morzaram
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey guys, thank you very much for all of your responses. I’ve decided to do my best to accomplish things in Live View. I have attempted learning this side multiple times but I’ve read much more and am willing to try again.</p>
<p>I think once I get it down I think <a class="mention" href="/u/dewetblomerus" rel="nofollow">@dewetblomerus</a> is right that I will be able to iterate and build faster.</p>
<p>Thanks to everyone for their responses. I’ve read all of them and each one made me think about how I will proceed.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="256705" data-batch-url="/posts/batch_likers">
                        5
                      </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/best-workflow-between-js-frontend-w-elixir-backend-as-a-solo-dev/48946/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-256705" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256705"
                     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 #21"></div>
  </section>
</div>
    <div class="postbit" id="256716" data-post-id="256716">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sounds wise!</p>
<p>I used a lot of front-end technologies before: PHP, Java, a lot of Rails, Phoenix + React, and I never felt so productive as with LiveView.</p>
<p>I think the learning curve can be a bit steep, but totally worth it!</p>
<p>Start with raw LiveView and then start learning PETAL stack. You’ll eventually find yourself even more productive if you leverage on components.</p>
<p>Good luck <img src="https://forum.elixirforum.com/images/emoji/apple/muscle.png?v=15" title=":muscle:" class="emoji" alt=":muscle:" 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="256716" data-batch-url="/posts/batch_likers">
                        4
                      </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/best-workflow-between-js-frontend-w-elixir-backend-as-a-solo-dev/48946/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-256716" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256716"
                     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 #22"></div>
  </section>
</div>
    <div class="postbit" id="347085" data-post-id="347085">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I wanted to use LiveView but after experimenting a bit I’m not sure it’s the best fit due to the latency aspect. I used JS commands and hooks to overcome some of that latency but hooks in their current form don’t feel great. It would feel much better with colocated hooks, which I think are on the roadmap, but even then it feels a bit like I’m fighting against LiveView if I want things like optimistic UI.</p>
<p>So now I’m experimenting with a SvelteKit SPA on the frontend and Phoenix Channels for the backend. My proof of concept seems to work nicely with the default setup for each. I’m not sure what the best approach is to deploying this setup though. It seems like it’d be easier to deploy it as one app rather than deploying the backend and frontend separately but maybe I’m wrong. If anyone reading has any tips, I’d appreciate it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347085" 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/best-workflow-between-js-frontend-w-elixir-backend-as-a-solo-dev/48946/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-347085" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347085"
                     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 #23"></div>
  </section>
</div>
    <div class="postbit" id="347095" data-post-id="347095">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="jam" data-post="24" data-topic="48946">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jam/48/36266_2.png" class="avatar"> jam:</div>
<blockquote>
<p>So now I’m experimenting with a SvelteKit SPA on the frontend and Phoenix Channels for the backend. My proof of concept seems to work nicely with the default setup for each. I’m not sure what the best approach is to deploying this setup though. It seems like it’d be easier to deploy it as one app rather than deploying the backend and frontend separately but maybe I’m wrong. If anyone reading has any tips, I’d appreciate it.</p>
</blockquote>
</aside>
<p>Build your JS project as artifacts and serve it with phoenix static plug? I never got to doing that in practice, however it should be much more manageable compared to having backend/frontend as separated instances.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347095" 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/best-workflow-between-js-frontend-w-elixir-backend-as-a-solo-dev/48946/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-347095" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347095"
                     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 #24"></div>
  </section>
</div>
    <div class="postbit" id="347098" data-post-id="347098">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You can do both…</p>
<p>If You choose to host in the same project You won’t need to worry about CORS, but it is less flexible, because frontend and backend do not evolve at the same pace, but they are linked in the same repo. You don’t need a dev-server, because Phoenix will host the frontend</p>
<p>If You choos to separate the frontend, You’ll have to setup CORS and websocket cross origin</p>
<p>As I like to test different frontend solutions, I prefer to separate backend and frontend. That would work too if You have separate teams</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347098" 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/best-workflow-between-js-frontend-w-elixir-backend-as-a-solo-dev/48946/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-347098" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347098"
                     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 #25"></div>
  </section>
</div>
    <div class="postbit" id="347912" data-post-id="347912">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Kabawo" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Kabawo
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi Morzaram. Would you be able to share what have you chosen at the end and how was the development experience? Would you do anything different? Was it easy to bring in and collaborate with other developers? Thanks in advance</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347912" 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/best-workflow-between-js-frontend-w-elixir-backend-as-a-solo-dev/48946/27">Post #26</a>
	                </div>
	            </div>
              <div id="likers-container-347912" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347912"
                     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 #26"></div>
  </section>
</div>
    <div class="postbit" id="353173" data-post-id="353173">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Morzaram" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Morzaram/120/24522_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Morzaram
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry it took so long to answer you. I actually went with Inertia, and React SPA for my apps.</p>
<p>For the react frontend and some inertia-based requests, I use OpenApiSpex to generate a schema, and on the front, I use Heyapi to do all the heavy lifting of generating requests. It allows me to stay in the flow so I don’t have to think about coupling my code. I write backend or frontend code with low overhead. It feels good, and having that front-end type of safety is nice.</p>
<p>As much as I like live view, I shoot myself in the foot because I’m not the brightest developer. That and I don’t feel confident bringing on other people because I don’t have a confident way to write live view updates cleanly.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="353173" 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/best-workflow-between-js-frontend-w-elixir-backend-as-a-solo-dev/48946/28">Post #27</a>
	                </div>
	            </div>
              <div id="likers-container-353173" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="353173"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>