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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I like Elm. It’s a functional language like Elixir.</p>
<p>The compiler is super quick, it’s error messages are really helpful and friendly, and if it compiles it runs without error. There are a few edge cases where you can still get JS runtime errors, but not anything to really worry about.</p>
<p>It’s pretty simple to set up with Phoenix, just a couple of lines of JS in <code>app.js</code>.</p>
<p>I find it a joy to work with.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="163380" 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/whats-your-favorite-way-to-use-phoenix-without-node/28969/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-163380" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="163380"
                     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="163399" data-post-id="163399">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Right now I like to put my front-end application in a separated project and let my phoenix projects be 100% API driven. I kinda like the hot new React front-end stack, but I’d rather separate into another project that only consumes the phoenix API.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="163399" 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/whats-your-favorite-way-to-use-phoenix-without-node/28969/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-163399" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="163399"
                     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="163422" data-post-id="163422">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You can do that with Elm, it doesn’t <strong>need</strong> to be part of the Phoenix project. Elm compiles to JS, so you can load your Elm app the same way you would load any JS library. You just need a one liner of JS to instantiate the Elm app, and tell it which HTML node to take over.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;script&gt;
  var app = Elm.Main.init({node: document.getElementById("elm-app")})
&lt;/script&gt;
</code></pre>
<p>One nice thing with Elm, is that you can introduce it gradually if you want. Converting small areas of your page to Elm, until you’re happy and decide to have a single Elm app for each page, or a complete Elm SPA for the whole Phoenix back end.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="163422" 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/whats-your-favorite-way-to-use-phoenix-without-node/28969/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-163422" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="163422"
                     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="163666" data-post-id="163666">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Strofcon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Strofcon/120/21842_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Strofcon
                    <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>I’m not sure why I was trying to over-complicate Unpoly in my head. <img src="https://forum.elixirforum.com/images/emoji/apple/man_facepalming.png?v=15" title=":man_facepalming:" class="emoji" alt=":man_facepalming:" loading="lazy" width="20" height="20"></p>
<p>After having glanced at Elm, I’m not sure I need the level of “everything-ness” it brings, so I’ll tinker with Unpoly some more.</p>
<p>Thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="163666" 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/whats-your-favorite-way-to-use-phoenix-without-node/28969/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-163666" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="163666"
                     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="169446" data-post-id="169446">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just had a quick look at Unpoly - and the first thing that struck me was the reliance on CSS, and the fact that it’s all just JS - with the usual JS ‘null is not an object’ type errors on the horizon?</p>
<p>Since using Elm, I have been able to rid myself of the problem of managing CSS altogether - no need for CSS at all. And if it compiles, it runs without error. As a functional language it has a lot in common with Elixir, which I like. The cognitive load of switching from front end to back end is reduced. There are differences, obviously, but I’d rather use Elm/Elixir than JS/Elixir.</p>
<p>Not suggesting you’re wrong, I’ve been more of a hobbyist, using Ruby/Rails/JS and now Elixir/Phoenix/Elm to build apps to help run my company. I’m sure I don’t have the commercial experience you have.</p>
<p>I guess I should be an Elm envangelist <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"> I have yet to find a front end problem I can’t solve with Elm.</p>
<p>Oh, and Elm and Phoenix Websockets are a great combination <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="169446" 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/whats-your-favorite-way-to-use-phoenix-without-node/28969/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-169446" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="169446"
                     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="169461" data-post-id="169461">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>For small projects that target modern browsers, you can get away with TypeScript without Node/NPM (except for maybe installing the <code>tsc</code> binaries globally). I do that in <a href="https://gitlab.com/Nicd/tilastokeskus" rel="noopener nofollow ugc">this Elixir project</a> and <a href="https://gitlab.com/Nicd/sodexo-menu" rel="noopener nofollow ugc">this no-backend project</a>. If you don’t have deps (or only a couple), and are comfortable writing some things (like my <code>dom.ts</code>) yourself, then this works pretty well. <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>
<p>It works because TypeScript compiles your code down to JS modules and modern browsers can nowadays directly use those modules without bundling. So you just <code>tsc</code> and off you go! <img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" 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="169461" 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/whats-your-favorite-way-to-use-phoenix-without-node/28969/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-169461" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="169461"
                     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>