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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I would say that the only difference is when you are working in a bigger team and there is a big change in design or something like that. As a team leader you may prefer to separate page templates from <code>LiveView</code> logic. It’s easier to track changes made only in the logic or template if they are separated.</p>
<p>This has nothing to do with components and live components as they are supposed to be used on multiple pages. Therefore only pages should have templates in separate <code>.heex</code> files, so you can search using <code>git</code> for a specific type of changes simply by logging all <code>.heex</code> or <code>.ex</code> files.</p>
<p>Of course as said technically there is no big difference and therefore people especially in their own projects are fully free to pick their favourite solution. The bet things in <code>Phoenix</code> is that it’s technically a library and not a <code>framework</code> as there is not much stuff required by some convention and developers have lots of flexibility in how they prefer to organise their code.</p>
<p>However for me if there is specific reason for adding <code>.heex</code> files even if it’s limited to very specific cases and there is no specific cases for the opposite way then I prefer to “standardise” it and simply do so in all my projects. After all even I can’t say how big team may be working on the pet project I’m working on right now. It’s especially better since once decision is made it doesn’t take any extra time and I don’t lose further time on investigating “what I prefer” for every project.</p>
<p>The only exception here are scripts, but scripts have their own rules. Obviously a small script is preferred to have a single file source, so they usually don’t use <code>.heex</code> files. As said scripts are not projects, so they live on their own rules.</p>
<hr>
<p>For me that’s all and I never saw <code>.heex</code> files as introducing any kind of “:discomfort”. I believe it’s rather a personal perspective i.e. how you are used to work with templates. This is the only thing that can introduce a “discomfort” as we simply do the usual thing in a way we are not used to. I would say that the “discomfort” feeling is often wrongly taken.</p>
<p>People should try various things and see on themselves what work for them. Everyone should create their own standards based on nothing else than a practice. If a feeling is not based on it then it often turns into a false assumptions which depending on person may be hard to figure out, admin and/or change in future.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375591" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-375591" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375591"
                     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="375622" data-post-id="375622">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Eiji" data-post="12" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/eiji/48/36743_2.png" class="avatar"> Eiji:</div>
<blockquote>
<p>It’s easier to track changes made only in the logic or template if they are separated.</p>
</blockquote>
</aside>
<p>You were not replying to me, but I want to highlight this particular part because I think it’s a good example of what I disagree with here. (I agree with the rest of your post.)</p>
<p>The distinction between logic and template is not real. Allow me to demonstrate.</p>
<p>Here is logic in the template:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;div&gt;Current count: {@first_count + @second_count}&lt;/div&gt;
</code></pre>
<p>And here is template in the logic:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">socket = assign(socket, :color_class, "color-red")
</code></pre>
<p>The correct approach, in my opinion, is to demolish this barrier and excise the <em>concept</em> of a template from the equation entirely. I have no idea if this could or should even be <em>done</em> with Phoenix or if a new framework would be needed.</p>
<aside class="quote no-group" data-username="Eiji" data-post="12" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/eiji/48/36743_2.png" class="avatar"> Eiji:</div>
<blockquote>
<p>Everyone should create their own standards based on nothing else than a practice.</p>
</blockquote>
</aside>
<p>I wholeheartedly agree with this and I am not a big fan of “what standard should we follow”-type discussions, which is why I went out of my way <em>not</em> to answer the question in my reply <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>For the record, I also make judicious use of separate <code>.heex</code> templates for larger components.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375622" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-375622" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375622"
                     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="375625" data-post-id="375625">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="garrison" data-post="13" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/g/3bc359/48.png" class="avatar"> garrison:</div>
<blockquote>
<p><code>&lt;div&gt;Current count: {@first_count + @second_count}&lt;/div&gt;</code></p>
</blockquote>
</aside>
<p>“Hello world” is not good as a example. Recently people also say that “Lorem ipsum” is not the best. There is no class (see my point about huge changes in design) and the code is so simple that it could be in fact a component and not a page. This only proves my point. <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>
<aside class="quote no-group" data-username="garrison" data-post="13" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/g/3bc359/48.png" class="avatar"> garrison:</div>
<blockquote>
<p>I wholeheartedly agree with this and I am not a big fan of “what standard should we follow”-type discussions, which is why I went out of my way <em>not</em> to answer the question in my reply <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>
</blockquote>
</aside>
<p>For sure there are some “common” standards. I call them “community standards”. A simple example here is using <code>Phoenix</code> context. Such practices are proved in production by thousands of devs, so such commonly used “standards” are always worth to consider or at least start with. <img src="https://forum.elixirforum.com/images/emoji/apple/light_bulb.png?v=15" title=":light_bulb:" class="emoji" alt=":light_bulb:" loading="lazy" width="20" height="20"></p>
<p>However my preference have changed over years and so I’m organising my files in completely different way. First of all I prefer <code>context/context.ex</code> naming over <code>context.ex</code> and <code>context</code> (directory) structure (especially important in large codebase). So on top of said “community standards” I define my own which is placing all files in context lib and divided by ecto schema (logic, db, templates and even tests), so for example I’m not using <code>my_app_web</code> at all and I have everything in <code>lib/my_app/accounts</code> and <code>lib/my_app/accounts/user</code>. <img src="https://forum.elixirforum.com/images/emoji/apple/exploding_head.png?v=15" title=":exploding_head:" class="emoji" alt=":exploding_head:" loading="lazy" width="20" height="20"></p>
<p>I listen to others and on top of “good practices” I build my own preferences. I believe such approach is well balanced between working on too generic rules and “design everything on my own” ways. <img src="https://forum.elixirforum.com/images/emoji/apple/thinking.png?v=15" title=":thinking:" class="emoji" alt=":thinking:" 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="375625" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-375625" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375625"
                     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="375629" data-post-id="375629">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kuon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kuon/120/36090_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kuon
                    <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">
								<aside class="quote no-group" data-username="garrison" data-post="13" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/g/3bc359/48.png" class="avatar"> garrison:</div>
<blockquote>
<p>I wholeheartedly agree with this and I am not a big fan of “what standard should we follow”-type discussions, which is why I went out of my way <em>not</em> to answer the question in my reply <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>For the record, I also make judicious use of separate <code>.heex</code> templates for larger components.</p>
</blockquote>
</aside>
<p>For me what really matters is experience in maintaining and working with or without templates. I am not really looking for a standard. I plan of ditching most of my <code>.heex</code> because I feel friction with it. It might not be standard, but I think I’ll do it. But I had some “wonderment” about it being a good idea in the long run.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375629" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-375629" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375629"
                     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="375631" data-post-id="375631">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I am operating under the assumption that you, as an experienced developer, are more than capable of expanding my one-line examples into real-world code in your head.</p>
<p>If not then forget about it, but I feel like if you tried you would have no problem understanding my intent!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375631" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-375631" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375631"
                     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="375632" data-post-id="375632">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Early abstraction is always bad regardless of what you’re writing, an old developer once said: put everything in one file, until you’re forced to abstract. At that point it will be clearer and you avoid over-abstracting. This is obviously an iterative approach and you’ll rewrite your code over and over again, much like writing a book and getting your sentence and paragraphs more concise.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375632" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-375632" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375632"
                     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 #16"></div>
  </section>
</div>
    <div class="postbit" id="375636" data-post-id="375636">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kuon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kuon/120/36090_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kuon
                    <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>Yes, that is quite my feeling. I was always creating a separate template for my live views, and always had the feeling that it was not really separated for a good reason. I guess I kept doing it because I was influenced by the default generators.</p>
<p>I’m happy and reassured of our discussion, seeing I’m not alone and also, having a good explanation of the app/web framework thing made a lot of sense to me.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375636" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-375636" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375636"
                     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="375638" data-post-id="375638">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>The point of my last reply was that it’s not a private message only for me, but only on forum. People (especially in “AI-era”) absolutely love to copy-paste stuff without thinking. Some time ago I believed that developers are a group of smart people that would not allow push themselves into any edge, but I was proved wrong as people either are scared or fascinated about “AI” - almost all I see “I fear that I would lose a job” or “how to do literally everything in AI” type of posts/responses/blogs and so on …</p>
<aside class="quote no-group" data-username="garrison" data-post="16" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/g/3bc359/48.png" class="avatar"> garrison:</div>
<blockquote>
<p>I am operating under the assumption that you, as an experienced developer, are more than capable of expanding my one-line examples into real-world code in your head.</p>
</blockquote>
</aside>
<p>Emm … how to say that … Firstly thanks for your trust, but it’s not how it works … It’s your point and you have to prove it. You can’t just ask people to prove your point for you.</p>
<p>As said for me <code>counter</code> more fits component than page and all you show is <code>assign</code> of some class. I said that I would rather split the page on a logic and a template files for better tracking <code>git</code> changes. Therefore I would rather <strong>not write such code</strong> anyway. I would assign for example a boolean for a dark version of element or a <code>theme</code> atom and set the proper class in the template.</p>
<p>So no, I can’t see your point and it’s not because I’m not enough experienced. We just talk about completely different approaches. I don’t know or prefer yours, so I would not provide better example than you. Am I wrong somehow?</p>
<p>For sure not saying that your approach is wrong. Even if I would judge (which I don’t want to) I can’t do it properly not seeing your point.</p>
<aside class="quote no-group" data-username="garrison" data-post="13" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/g/3bc359/48.png" class="avatar"> garrison:</div>
<blockquote>
<p>The correct approach, in my opinion, is to demolish this barrier and excise the <em>concept</em> of a template from the equation entirely.</p>
</blockquote>
</aside>
<p>Oh, you want to make it like a <code>document.createElement(…)</code> in <code>JavaScript</code>? Well … you would end up with some kind of <code>DSL</code> like in <a href="https://hex.pm/packages/temple" rel="nofollow">temple</a> package, but you would immediately loose all <code>LiveView</code> features and “end” in:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">    end
  end
end
</code></pre>
<p>hell … For now <code>HEEx</code> is best and I don’t see how it could be even improved. Maybe if <code>Hologram</code> would support calling any <code>JavaScript</code> API from <code>Elixir</code> then you could do it with functions, but they would require to write much more code than a <code>DSL</code> or template which is rather against <code>Elixir</code>’s 10x less LOC rule, so after all most people would see it as bad practice anyway.</p>
<p>If you agree with before at best you would have to write a complete <code>HTML</code> framework which is rather not worth especially if you would end up <strong>only</strong> with a bunch of functions to generate something that other projects like <code>LiveView</code> have with tons of features. Simply almost nobody would pay attention to a framework that only don’t support templates i.e. something most people are already used to. You would need a real alternative which requires a lot of time and resources and therefore most people don’t see it worth.</p>
<p>Even if you do so you would end up with tons of naming problems as <code>HTML</code> naming is very generic … For example how would you call a <code>div</code> function?</p>
<ol>
<li><code>div</code> - is terribly bad as people would be confused with arithmetic operation</li>
<li><code>element</code> or <code>elem</code> - like a <code>elem/2</code> for taking element from <code>Tuple</code>?</li>
</ol>
<p>In fact your framework would be good only if people would always <code>alias</code> your module instead of <code>import</code> it. I don’t complain as it’s my preference, but look for all the code generated by <code>phx</code> generators. They use <code>import</code> all the time for <code>templates</code>, for <code>ecto</code> API and so on … There is lots of people just used to it and people who would not prefer other style - at least not easily …</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">alias MyLib.HTML

some_data
|&gt; HTML.div(…)
# more code …
</code></pre>
<p>No matter if we like it or not <code>template</code> become a “community standard”. You would need a very, very solid API to change the way of thinking of all developers used to it and accepted it as something “normal”. As said I like aliasing more than importing as I like explicit naming in my code, so if you would work on it I may be interested.</p>
<p>However I’m not sure if I would change my opinion on splitting logic and template for pages. I may do a similar thing for a <code>deisgn</code> helper modules, so at the very end I may or may not end up doing something similar using a different API. I would say that you would have to be very, very creative to do something good on top of such old <code>HTML</code> naming. Unfortunately for me it does not look realistic and/or worth working on full-time for the above reasons.</p>
<p>For me said “barrier” was never a problem. I’m curious and so I investigated other ways, but didn’t found anything that would give me something “special”, so I would change my way of writing the code … In fact for the same reason mentioned above I rather want to have logic and template to be separated. Maybe it’s because I’m just too used to templates, but for now I don’t see anything promising enough to change my mind …</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375638" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-375638" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375638"
                     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="375639" data-post-id="375639">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Eiji" data-post="19" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/eiji/48/36743_2.png" class="avatar"> Eiji:</div>
<blockquote>
<p>Therefore I would rather <strong>not write such code</strong> anyway</p>
</blockquote>
</aside>
<p>Are you saying that you have never performed any logic in a HEEx template? No function calls or anything like that? If so, fair enough I guess, but you must understand this is abnormal.</p>
<p>In practice most components and templates exhibit a mixing of concerns, and I believe this is not a failure of developers to separate their concerns into “logic” and “templates” but rather a failure of the framework to recognize that <em>there is no such distinction</em>.</p>
<p>I understand that it is on me to make my case here but I felt your response was unnecessarily dismissive. I do not want to bikeshed on this further; it’s a waste of our time.</p>
<aside class="quote no-group" data-username="Eiji" data-post="19" data-topic="72879">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/eiji/48/36743_2.png" class="avatar"> Eiji:</div>
<blockquote>
<p>but you would immediately loose all <code>LiveView</code> features</p>
</blockquote>
</aside>
<p>Yes I do mean something like Temple, and I am aware it would not work with LiveView. I did mention a new framework may be a better path.</p>
<p>You would not want <code>div</code> to be a function; it would be data. Elements are a representation of DOM (and other components but let’s not get ahead of ourselves). An analog to <code>React.createElement('div')</code> would be <code>HTML.create_element("div")</code> and so on. The problem is that this is very ugly and repetitive, aesthetically, so with React they fixed this with JSX which simply compiles HTML-like syntax back into the <code>createElement()</code> calls.</p>
<p>Perhaps we could get away with something like this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def my_component do
  ~H"""
  &lt;ol&gt;
    {for i &lt;- 1..100, do: &lt;li&gt;{i}&lt;/li&gt;}
  &lt;/ol&gt;
  """
end
</code></pre>
<p>Which compiles to:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def my_component do
  create_element("ol",
    children: for(i &lt;- 1..100, do: create_element("li", text: to_string(i)))
end
</code></pre>
<p>The difference here is that the contents of the sigil are actually <em>Elixir code</em>, not a template. They just have HTML mixed in. With a compiler perhaps we could do away with the sigil entirely, like JSX.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375639" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-375639" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375639"
                     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="375641" data-post-id="375641">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>A further visual example of what I mean by “Elixir code”:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def my_component(%{error_message: error_message, count: count}) do
  zero_message = &lt;div&gt;No count!&lt;/div&gt;

  if error_message do
    &lt;div&gt;{error_message}&lt;/div&gt;
  else
    count = (count * 2) - 1
    case count do
      0 -&gt; zero_message
      n -&gt; &lt;ol&gt;{for i &lt;- n, do: &lt;li&gt;{i}&lt;/li&gt;}&lt;/ol&gt;
    end
  end
end
</code></pre>
<p>This example is contrived to demonstrate a complex case. It’s meant to be <em>demonstrative</em>, not beautiful.</p>
<p>Note that the separation between “logic” and “template” has completely blended away. It’s all just <em>code</em>.</p>
<p>This is what JSX does. There is no reason we could not do exactly the same thing.</p>
<p>However, I’m not sure if this would be a good path for LiveView specifically. The entire engine is built around string fragments; which is almost certainly a mistake, but that water is long under the bridge.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="375641" 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/h-sigil-everywhere-vs-heex-files-any-real-world-experience/72879/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-375641" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="375641"
                     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/72879/load_more?page=3">Load more posts (35 remaining)</a>
</div></template></turbo-stream>