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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josevalim" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/120/1787_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josevalim
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Elixir</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="tmbb" data-post="21" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>It’s a natural consequence of trying to do things at compile time, because we can take advantage of the fact that <code>for</code> is a special form that can’t be overriden, so it can be analyzed statically.</p>
</blockquote>
</aside>
<p>Weren’t you looking at compile time all along? So you should have seen the optimization. <img src="https://forum.elixirforum.com/images/emoji/apple/stuck_out_tongue.png?v=15" title=":stuck_out_tongue:" class="emoji" alt=":stuck_out_tongue:" loading="lazy" width="20" height="20"></p>
<p>Seriously though, that’s only part of the solution. The fact the comprehension is communicated via a struct, similar to the Rendered struct, arose from the fact we are also tackling runtime. The current implementation can easily nest templates (<code>&lt;%= render ... %&gt;</code>) without traversing or nesting ASTs and we could extend that to comprehensions too. So we are mixing both approaches instead of one or the other.</p>
<aside class="quote no-group" data-username="tmbb" data-post="21" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>You had <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a>’s example from the LiveView talk and and maybe optimizing such dynamic highly dynamic templates was a priority for you.</p>
</blockquote>
</aside>
<p>I am focusing rather on what comes generated on <code>phx.gen.html</code>, and you see both nested templates and comprehensions in there.</p>
<aside class="quote no-group" data-username="tmbb" data-post="21" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>I’m the first to praise the simplicity of your implementation but I think <em>most</em> of the complexity with my approach is unavoidable.</p>
</blockquote>
</aside>
<p>It is unavoidable only if you assume it HAS to be done. Most likely it doesn’t and there are probably other ways we can optimize things like forms, looking at its domain in particular and not necessarily at the template engine as a whole. Edit: But of course, doing Vampyre is a great exercise in itself. <img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105232" 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/livecoding-eex-template-improvements-twitch-livestream/18116/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-105232" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105232"
                     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="105269" data-post-id="105269">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                    <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 group-livebook_core_team" data-username="josevalim" data-post="22" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>Weren’t you looking at compile time all along? So you should have seen the optimization. <img src="https://forum.elixirforum.com/images/emoji/apple/stuck_out_tongue.png?v=15" title=":stuck_out_tongue:" class="emoji" alt=":stuck_out_tongue:" loading="lazy" width="20" height="20"></p>
</blockquote>
</aside>
<p>I agree, that’s what makes me feel so stupid about this <img src="https://forum.elixirforum.com/images/emoji/apple/stuck_out_tongue.png?v=15" title=":stuck_out_tongue:" class="emoji" alt=":stuck_out_tongue:" loading="lazy" width="20" height="20"> I’ve stumbled upon the idea of flattening the highly nested EEx templates as a way to separate the static and dynamic parts, had all this work reimplementing Phoenix.HTML as macros (as you can see by line count of the Vampyre project this was <em>not</em> a trivial effort), built an optimizing compiler around the idea of merging the static parts <em>and then missed a really obvious optimization which you thought of on day 2 of working on this</em> <img src="https://forum.elixirforum.com/images/emoji/apple/stuck_out_tongue.png?v=15" title=":stuck_out_tongue:" class="emoji" alt=":stuck_out_tongue:" loading="lazy" width="20" height="20"> So yeah, feeling pretty stupid right now.</p>
<aside class="quote group-livebook_core_team" data-username="josevalim" data-post="22" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>The fact the comprehension is communicated via a struct, similar to the Rendered struct, arose from the fact we are also tackling runtime.</p>
</blockquote>
</aside>
<p>Yes, the moment you mentioned your comprehensions optimization I noticed it was a natural consequence of your work with template fingerprinting, and I assume you thout of that optimization because of that. The fingerprinting idea can be taken pretty far, namely optimizing different branches of a case statement. The <code>&lt;%= render ... %&gt;</code> thing is not very important to me, because I believe I can have a <code>&lt;%= vrender ... %&gt;</code> macro which dumps the inner template inside the outer one in a way I that it can be inlined, but it’s a great idea anyway.</p>
<aside class="quote group-livebook_core_team" data-username="josevalim" data-post="22" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>But of course, doing Vampyre is a great exercise in itself. <img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" loading="lazy" width="20" height="20"></p>
</blockquote>
</aside>
<p>Yes, I know it is. There are still things from Vampyre which I think you can implement for further performance gains. The main one is something I’ve stolen from Drab (from which I plan on stealing more stuff, of course).</p>
<p>And I like the conceptual elegance of sending only the absolute minimum of dynamic data, so I’m likely to continue working on Vampyre for some time.</p>
<p>But since you’re thinking about breaking compatibility in the <code>form_for/4</code> function, I will now break compatibility with the <code>tag()</code> function (in my case, the <code>tag</code> macro) so that it works in a more semantic way. Hopefully, I’ll be able to reuse my reimplementation of the tab macro if I ever want to go the way of a VDOM (Vampyre DOM, of course <img src="https://forum.elixirforum.com/images/emoji/apple/smile.png?v=15" title=":smile:" class="emoji" alt=":smile:" loading="lazy" width="20" height="20">), as <a class="mention" href="/u/overminddl1" rel="nofollow">@OvermindDL1</a> is always saying I should do (and more or less like Drab already does in its own way).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105269" 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/livecoding-eex-template-improvements-twitch-livestream/18116/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-105269" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105269"
                     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="105288" data-post-id="105288">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josevalim" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/120/1787_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josevalim
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Elixir</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="tmbb" data-post="23" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>But since you’re thinking about breaking compatibility in the <code>form_for/4</code> function, I will now break compatibility with the <code>tag()</code> function</p>
</blockquote>
</aside>
<p>We wouldn’t break compatibility, rather we would introduce new arities. Which changes you had in mind for <code>tag</code>?</p>
<aside class="quote no-group" data-username="tmbb" data-post="23" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>The fingerprinting idea can be taken pretty far, namely optimizing different branches of a case statement.</p>
</blockquote>
</aside>
<p>Yes, exactly. It is a possibility… but I am not sure if we will leverage it there. That’s also another way we could optimize <code>form_for</code>: <code>form_for</code> would receive a <code>fn</code> that returns a Rendered struct and the <code>form_for</code> could attach new static and dynamic information to the Rendered struct and return it.</p>
<aside class="quote no-group" data-username="tmbb" data-post="23" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>Yes, I know it is. There are still things from Vampyre which I think you can implement for further performance gains. The main one is something I’ve stolen from Drab (from which I plan on stealing more stuff, of course).</p>
</blockquote>
</aside>
<p>Any of them do not rely on macros? If so, I would love to hear them. <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="105288" 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/livecoding-eex-template-improvements-twitch-livestream/18116/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-105288" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105288"
                     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="105290" data-post-id="105290">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josevalim" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/120/1787_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josevalim
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Elixir</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>There is also the other idea which is to introduce something like <code>&lt;%| |%&gt;</code> as optimization case of something you know that won’t change, even if they are dynamic (such as labels, inputs, etc). But I would wait a bit before introducing user fine-grained control.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105290" 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/livecoding-eex-template-improvements-twitch-livestream/18116/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-105290" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105290"
                     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="105291" data-post-id="105291">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                    <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 group-livebook_core_team" data-username="josevalim" data-post="25" data-topic="18116" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>There is also the other idea which is to introduce something like <code>&lt;%| |%&gt;</code> as optimization case of something you know that won’t change, even if they are dynamic (such as labels, inputs, etc). But I would wait a bit before introducing user fine-grained control.</p>
</blockquote>
</aside>
<p>That is precisely the non-macro-dependent optimization I had in mind. It’s great for things like CSRF tokens.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105291" 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/livecoding-eex-template-improvements-twitch-livestream/18116/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-105291" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105291"
                     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="105292" data-post-id="105292">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                    <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 group-livebook_core_team" data-username="josevalim" data-post="24" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>We wouldn’t break compatibility, rather we would introduce new arities.</p>
</blockquote>
</aside>
<p>Yeah, you’re right. That doesn’t break backward compatibility.</p>
<aside class="quote group-livebook_core_team" data-username="josevalim" data-post="24" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>Which changes you had in mind for <code>tag</code> ?</p>
</blockquote>
</aside>
<p>I’d like it if tag worked like <code>content_tag</code> when given a list of arguments. Something like:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">tag(name, attrs, children)
</code></pre>
<p>That would make templates more “semantically correct”, I think. That would be the way forward if I wanted to transition Vampyre’s inner workings into a VDOM. Currently, the <code>tag/2</code> function incentivizes template authors to dump unclosed opening tags (like you’re doing with form). But it’s a pretty minor issue, and maybe not worth breaking backward compatibility over…</p>
<aside class="quote group-livebook_core_team" data-username="josevalim" data-post="25" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>There is also the other idea which is to introduce something like <code>&lt;%| |%&gt;</code></p>
</blockquote>
</aside>
<p>You probably mean something like <code>&lt;%| ... %&gt;</code>, because the thing you’ve written is not valid EEx.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105292" 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/livecoding-eex-template-improvements-twitch-livestream/18116/27">Post #26</a>
	                </div>
	            </div>
              <div id="likers-container-105292" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105292"
                     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="105293" data-post-id="105293">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josevalim" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/120/1787_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josevalim
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Elixir</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="tmbb" data-post="27" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>You probably mean something like <code>&lt;%| ... %&gt;</code> , because the thing you’ve written is not valid EEx.</p>
</blockquote>
</aside>
<p>Yeah, that’s what I meant. <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>
<aside class="quote no-group" data-username="tmbb" data-post="26" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/77aa72/48.png" class="avatar"> tmbb:</div>
<blockquote>
<p>That is precisely the non-macro-dependent optimization I had in mind. It’s great for things like CSRF tokens.</p>
</blockquote>
</aside>
<p>FWIW, LiveEEx assumes that any code without assigns is never reloaded. So we kinda get the <code>&lt;%| %&gt;</code> behaviour for “free”. We will force devs to push their changes through assigns.</p>
<p>Also, huge thanks to <a class="mention" href="/u/grych" rel="nofollow">@grych</a> for braving a lot of this more than a year ago and <a href="https://github.com/elixir-lang/elixir/issues/6391" rel="nofollow">forcing us to improve the template engine</a>. One of the reasons we can do this now so trivially is because of <code>handle_begin</code> and custom terminators and other stuff that we wouldn’t have added to EEx without him pushing EEx to its limits at the time.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105293" 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/livecoding-eex-template-improvements-twitch-livestream/18116/28">Post #27</a>
	                </div>
	            </div>
              <div id="likers-container-105293" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105293"
                     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 #27"></div>
  </section>
</div>
    <div class="postbit" id="105295" data-post-id="105295">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                    <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 group-livebook_core_team" data-username="josevalim" data-post="28" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>FWIW, LiveEEx assumes that any code without assigns is never reloaded. So we kinda get the <code>&lt;%| %&gt;</code> behaviour for “free”. We will force devs to push their changes through assigns.</p>
</blockquote>
</aside>
<p>Sorry, I was still thinking in “Vampyre”… In your architecture that doesn’t make as much sense. I can see it being used in the name for input tags: <code>&lt;input name="&lt;%| form.name %&gt;[field1]" ...&gt;</code>.</p>
<p>The <code>[fieldI1]</code> suffix is already purely static in Vampyre, as long as you supply a compile-time constant (like the <code>:field1</code> atom). I’m not declaring the <code>form.name</code> as “fixed” in Vampyre yet because it seems a little too risky: what if the user wants to replace that with a form with a different name? But I think declaring that as fixed (i.e., something that doesn’t change after the initial render) is the right choice.</p>
<p>Currently in Vampyre, I have 4 kinds of segments:</p>
<ul>
<li><em>static</em>, which never change (normal template text)</li>
<li><em>dynamic</em>, which change each time the assigns change (<code>&lt;%= ... %&gt;</code>)</li>
<li><em>support</em>, which are executed but aren’t rendered (<code>&lt;% ... %&gt;</code>)</li>
<li><em>fixed</em>, which are rendered once and then never change (<code>&lt;%/ ... %&gt;</code>); this is good for CSRF tokens and static translations (which never change after the initial page render)</li>
<li><em>container</em> (<code>&lt;%= content %&gt;</code>, where <code>content</code> is a macro that is expanded into a certain format). Container segments can be flattened into the outer template and have their static bits merged.</li>
</ul>
<p>I think that adding the <em>fixed</em> type to LiveEEx is worth it because of some translations that will never change. In a completely localized page, maybe most of the text will be translations. But if those translations don’t depend on the assigns, that’s not a problem to you, I guess.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105295" 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/livecoding-eex-template-improvements-twitch-livestream/18116/29">Post #28</a>
	                </div>
	            </div>
              <div id="likers-container-105295" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105295"
                     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 #28"></div>
  </section>
</div>
    <div class="postbit" id="105305" data-post-id="105305">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                    <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>On further thought, if your “change” to <code>form_for</code> maintains compatibility, I guess i’ll maintain it too. That way, Vampyre will continue to be a drop-in replacement for Phoenix.HTML and can remain available for the total speed junkies who want to try it without changing their templates (assuming I can keep up with al your awesome oprimizations, of course!)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105305" 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/livecoding-eex-template-improvements-twitch-livestream/18116/30">Post #29</a>
	                </div>
	            </div>
              <div id="likers-container-105305" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105305"
                     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 #29"></div>
  </section>
</div>
    <div class="postbit" id="105473" data-post-id="105473">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                    <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 group-livebook_core_team" data-username="josevalim" data-post="28" data-topic="18116">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/48/1787_2.png" class="avatar"> josevalim:</div>
<blockquote>
<p>Also, huge thanks to <a class="mention" href="/u/grych" rel="nofollow">@grych</a> for braving a lot of this more than a year ago and <a href="https://github.com/elixir-lang/elixir/issues/6391" rel="noopener nofollow ugc">forcing us to improve the template engine </a>.</p>
</blockquote>
</aside>
<p>IMO, <a class="mention" href="/u/grych" rel="nofollow">@grych</a> did pretty much everything that LiveView claims it will do, just with different tradeoffs which naturally led to a different design in the templates.</p>
<p>The main difference is that LiveView (and Vampyre, which derives from the proto-vaporware LiveView demo) are letting the browser handle the entirety of the DOM with the morphdom library.</p>
<p>If one decides not to use the morphdom library (which offloads complexity to the client), them onr mist implement something like Drab. It’s possible that Drab could be enhanced with morphdom with interesting effects too.</p>
<p>The main problem with something like Drab, which tries to preserve the semantic meaning of the HTML is that there are some restrictions on where you can put some HTML tags. Id you had a “neutral” HTML tag which you could nest literally everywhere (say, a <code>&lt;template&gt;</code> tag), then Drab would be clearly superior to LiveView and Vampyre (and a partial server-side VDOM solution might have been even better).</p>
<p>Basically, what LiveView and Vampyre are doing is just a reinvention of Drab in the morphdom world. It’s not clear that our aproach will lead to better performance or a better API than Drab.</p>
<p>I should write about some of the ideas I have fot the API of live controllers.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="105473" 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/livecoding-eex-template-improvements-twitch-livestream/18116/31">Post #30</a>
	                </div>
	            </div>
              <div id="likers-container-105473" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="105473"
                     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 #30"></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/18116/load_more?page=4">Load more posts (5 remaining)</a>
</div></template></turbo-stream>