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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>How about you try first to rewrite the frontend without all this junk, vast majority of this stuff is already available in html5 and css, and if you hit limits, then try something minimal like <a href="https://alpinejs.dev/" rel="noopener nofollow ugc">https://alpinejs.dev/</a></p>
<p>Of course you can also try to write the frontend with LiveView. It sounds like you want to try it and are looking for excuse <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"> So I do encourage you to try it <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"> It is additional complexity initially, but it might end up being better solution than the above, that really depends on specific details of the websites in question.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="244407" 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/achieve-high-frontend-performances-with-liveview/46293/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-244407" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="244407"
                     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="244418" data-post-id="244418">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jchatard" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jchatard/120/25865_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jchatard
                    <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>Yeah you’re right, I’ve been reading a lot recently about Elixir and Phoenix, and I’m really seduced, so I would love to try it out.</p>
<p>But of course, I want it to make sense, project wise.</p>
<p>Thank you all for your feedbacks. I’ll be keeping on digging, maybe make a poc to help me decide.</p>
<p>Cheers,<br>
Jérémy</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="244418" 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/achieve-high-frontend-performances-with-liveview/46293/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-244418" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="244418"
                     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 #12"></div>
  </section>
</div>
    <div class="postbit" id="256131" data-post-id="256131">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/jchatard" rel="nofollow">@jchatard</a> I’ve been through something completely similar. Have an e-commerce website that started on a PHP stack and had to change the front end for performance reason.<br>
It went through multiple iterations:</p>
<ul>
<li>Normal PHP + Riotjs ( Vue like JS framework )</li>
<li>PHP on the backend + Elixir for the frontend + Riotjs</li>
<li>PHP + Phoenix and Liveview<br>
I basically rebuilt the whole model layer of the PHP app on Elixir and I plug directly to the DB of the ecommerce platform. Cart operations are handled in liveview and then the elixir layer “simulate” the user session and communicate with the ajax api of the ecommerce layer.<br>
Only things still served directly by PHP to the end users is the payment page.</li>
</ul>
<p>Results: Between 95 to 100 pagespeed score on desktop and mobile. My rankings in terms of SEO have increased 4 fold.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="256131" 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/achieve-high-frontend-performances-with-liveview/46293/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-256131" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256131"
                     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="256140" data-post-id="256140">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jchatard" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jchatard/120/25865_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jchatard
                    <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>Wouah super nice!</p>
<p>I’m actually in a different zone, I’m keeping the back-end in PHP, and rebuilding the front-end using <a href="https://www.solidjs.com" rel="noopener nofollow ugc">SolidJS</a> ! It’s still early in the process, but I’m at 98 in Lighthouse as of writing. Which I’m super happy about.</p>
<p>Thanks for your feedback!</p>
<p>Cheers,<br>
Jérémy</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="256140" 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/achieve-high-frontend-performances-with-liveview/46293/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-256140" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256140"
                     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="256146" data-post-id="256146">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Great to hear <a class="mention" href="/u/jchatard" rel="nofollow">@jchatard</a> . I’m personally trying to keep JS to the bare minimum in my life <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" 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="256146" 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/achieve-high-frontend-performances-with-liveview/46293/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-256146" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256146"
                     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="256151" data-post-id="256151">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="jchatard" data-post="1" data-topic="46293">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jchatard/48/25865_2.png" class="avatar"> jchatard:</div>
<blockquote>
<p>Elixir and Phoenix are appealing to me, because, as it’s running as an application, I could have processes fetching data from the CMS, checking regularly for updates, build chunks of caches in the background. All the cool things we can implement with OTP.</p>
</blockquote>
</aside>
<p>I would vouch for you to do it, because in the long run will be a wise decision.</p>
<h3><a name="p-256151-deployment-1" class="anchor" href="#p-256151-deployment-1" aria-label="Heading link" rel="nofollow"></a>Deployment</h3>
<p>Its not that hard now, but it was a little more complex in the past, but some of the complexity its just people not being used to deploy an application built with a compiled language, at least it was for me (PHP Developer before).</p>
<p>You need to take your time to understand the differences between a compiled language and a dynamic compiled language:</p>
<ul>
<li>Compiled time configuration vs bootime and runtime configuration.</li>
<li>Code that you write in some parts are only exercised at compile time, not at runtime. This can bite you when trying to configure the application with runtime configuration.</li>
<li>More exist, and others may contribute to the list.</li>
</ul>
<p>After you understand this bit deployment will not bite you on configuration, thus you just can use <code>mix release</code> to build one and deploy. You can learn more with the book from <a class="mention" href="/u/miguelcoba" rel="nofollow">@miguelcoba</a>:</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://blog.miguelcoba.com/deploying-elixir-ebook">
  <header class="source">
      <img src="https://blog.miguelcoba.com/favicon.ico" class="site-icon" alt="" width="256" height="256">

      <a href="https://blog.miguelcoba.com/deploying-elixir-ebook" target="_blank" rel="noopener nofollow ugc" title="02:02PM - 22 November 2021">Miguel Cobá – 22 Nov 21</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/361;"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1637593235481/j1oUVeVA6.png" class="thumbnail" alt="" width="690" height="636"></div>

<h3><a href="https://blog.miguelcoba.com/deploying-elixir-ebook" target="_blank" rel="noopener nofollow ugc">Deploying Elixir eBook</a></h3>

  <p>The most comprehensive set of guides to deploy Elixir to production</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>You can also use the built-in Phoenix command to deploy to <a href="http://fly.io" rel="noopener nofollow ugc">fly.io</a> and have your app running distributed across the globe.</p>
<h3><a name="p-256151-elixir-2" class="anchor" href="#p-256151-elixir-2" aria-label="Heading link" rel="nofollow"></a>Elixir</h3>
<p>Elixir is a compiled language, but most of all is a functional programming language and your brain needs to make the switch on how to think about coding in a functional way, and the only course that clicked for me was this one:</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://codestool.coding-gnome.com/courses/elixir-for-programmers">
  <header class="source">
      <img src="https://codestool.coding-gnome.com/favicon.ico" class="site-icon" alt="" width="64" height="64">

      <a href="https://codestool.coding-gnome.com/courses/elixir-for-programmers" target="_blank" rel="noopener nofollow ugc">The Coding Gnome</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:500/280;"><img src="https://files.cdn.thinkific.com/courses/course_card_image_000/115/1761495586417.original.png" class="thumbnail" alt="" width="500" height="280"></div>

<h3><a href="https://codestool.coding-gnome.com/courses/elixir-for-programmers" target="_blank" rel="noopener nofollow ugc">Elixir for Programmers</a></h3>

  <p>Quick-start: Programmers can learn Elixir faster. Write functional, concurrent, and reliable applications. Learn Elixir, OTP, and Phoenix.</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>I have release the result of following it:</p>
<p><a href="http://hangman.exadra37.com" class="onebox" target="_blank" rel="noopener nofollow ugc">hangman.exadra37.com</a></p>
<p>The repo: <a href="https://github.com/Exadra37/elixir-for-programmers-2_learning" class="inline-onebox" rel="noopener nofollow ugc">GitHub - Exadra37/elixir-for-programmers-2_learning: The hangman game is the result of following this awesome course · GitHub</a></p>
<h3><a name="p-256151-live-view-3" class="anchor" href="#p-256151-live-view-3" aria-label="Heading link" rel="nofollow"></a>Live View</h3>
<p>Don’t dive into coding on it without understanding the programming model and how things work, and the free chapters on this course do an excellent job on it:</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://pragmaticstudio.com/phoenix-liveview">
  <header class="source">
      <img src="https://pragmaticstudio.com/favicon-32x32.png" class="site-icon" alt="" width="32" height="32">

      <a href="https://pragmaticstudio.com/phoenix-liveview" target="_blank" rel="noopener nofollow ugc">pragmaticstudio.com</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/359;"><img src="https://pragmaticstudio.com/open-graph-image.jpg" class="thumbnail" alt="" width="690" height="359"></div>

<h3><a href="https://pragmaticstudio.com/phoenix-liveview" target="_blank" rel="noopener nofollow ugc">The Pragmatic Studio</a></h3>

  <p>Premium video courses for software developers. Real apps. Real code. Really good stuff!</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>You can even go and subscribe the paid version to master LiveView.</p>
<h3><a name="p-256151-performance-and-liveview-websites-4" class="anchor" href="#p-256151-performance-and-liveview-websites-4" aria-label="Heading link" rel="nofollow"></a>Performance and LiveView websites</h3>
<p>I am always amazed how developers forget on very important bit in the performance equation of a website, the hardware and internet connection of the end user. It’s fast for you on localhost and even in production, but the chances of you using the latest hardware and a fast internet connection are great, plus you may be very near of your servers location (speed of light is slow for users in the other side of the world). I invite you to read this discussion:</p>
<aside class="onebox discoursetopic" data-onebox-src="https://forum.devtalk.com/t/server-location-vs-load-time-for-the-end-user/50689/">
  <header class="source">
      <img src="https://forum.devtalk.com/uploads/default/optimized/1X/dd5e3964010311d47a8d463fa690054615c9b28b_2_32x32.png" class="site-icon" alt="" width="32" height="32">

      <a href="https://forum.devtalk.com/t/server-location-vs-load-time-for-the-end-user/50689/" target="_blank" rel="noopener nofollow" title="05:00PM - 18 April 2022">Devtalk – 18 Apr 22</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:221/188;"><img src="https://forum.devtalk.com/uploads/default/original/1X/355f9e241b0f1255a1a2ba256f81d89ae5c66057.png" class="thumbnail" width="221" height="188"></div>

<div class="title-wrapper">
  <h3><a href="https://forum.devtalk.com/t/server-location-vs-load-time-for-the-end-user/50689/" target="_blank" rel="noopener nofollow">Server location vs load time for the end user</a></h3>
  <div class="topic-category">
      <span class="badge-wrapper bullet">
        <span class="badge-category-bg" style="background-color: #0;"></span>
        <span class="badge-category clear-badge">
          <span class="category-name">General Developer Forum</span>
        </span>
      </span>
      <span class="badge-wrapper bullet">
        <span class="badge-category-bg" style="background-color: #0;"></span>
        <span class="badge-category clear-badge">
          <span class="category-name">General Dev Chat</span>
        </span>
      </span>
    <div class="topic-header-extra">
      <div class="list-tags">
        <div class="discourse-tags">
          <svg class="fa d-icon d-icon-tag svg-icon svg-string"><use href="#tag"></use></svg>
            <span class="discourse-tag simple">hosting</span>
            <span class="discourse-tag simple">production</span>
        </div>
      </div>
    </div>
  </div>
</div>

  <p>Your users of the two forums are spread across the world, thus I am curious how did you solved it?</p>

  <p>
    <span class="label1">Reading time: 3 mins 🕑</span>
      <span class="label2">Likes: 35 ❤</span>
  </p>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>By the end of it some websites using live view are shared.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="256151" 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/achieve-high-frontend-performances-with-liveview/46293/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-256151" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256151"
                     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>