<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="371766" data-post-id="371766">
  <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="bartblast" data-post="10" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/48/17647_2.png" class="avatar"> bartblast:</div>
<blockquote>
<p>What do you think would be the clearest terminology?</p>
</blockquote>
</aside>
<p>If you’re going to refer to the pattern I’d just call it a “controlled input” like React because that terminology is widely used and understood.</p>
<p>The point I was trying to make, though, is that pattern might well be so widely understood that many webdevs probably don’t actually recognize the contrast which it draws.</p>
<aside class="quote no-group" data-username="LostKobrakai" data-post="11" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lostkobrakai/48/3072_2.png" class="avatar"> LostKobrakai:</div>
<blockquote>
<p>The <code>value</code> attribute of inputs in html is used to set the default value of that input, the value reverted to e.g. when you reset a form (<code>&lt;input type="reset"&gt;</code>).</p>
</blockquote>
</aside>
<p>And this is just the thing. React JSX (and presumably Hologram templates) are <em>not actually HTML</em>, they are a tool which looks a lot <em>like</em> HTML and which causes similar HTML to appear on the page, but if you squint there are things like this which are <em>totally different</em>.</p>
<p>But if you were to ask the average React dev about how the <code>value</code> attribute works I’d bet they would reflexively describe the React behavior (which is far more intuitive anyway) rather than the HTML behavior, <em>if they are aware of the HTML behavior at all</em>.</p>
<p>For reference, <a href="https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable" rel="noopener nofollow ugc">here is how the React docs describe this behavior</a>. Note that they draw no contrast with the HTML behavior (despite explicitly defining their own <code>defaultValue</code> attribute).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371766" 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/does-hologram-support-two-way-data-binding/72121/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-371766" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371766"
                     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="371767" data-post-id="371767">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="LostKobrakai" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/LostKobrakai/120/3072_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  LostKobrakai
                  </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="12" data-topic="72121">
<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>And this is just the thing. React JSX (and presumably Hologram templates) are <em>not actually HTML</em>, they are a tool which looks a lot <em>like</em> HTML and which causes similar HTML to appear on the page, but if you squint there are things like this which are <em>totally different</em>.</p>
</blockquote>
</aside>
<p>That’s one path to take for sure. LV does the same. I’m using solid.js at work and they recently had a discussion on the design of v2, where they were looking for removing such special cases – which is the less brittle option. But my point was less in favor of one or another solution, but the fact that one needs to be aware of that stuff as a maintainer for an abstraction over html and where there’s deviation from the norm (usually those templates do not set properties) it needs to be well documented.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371767" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/does-hologram-support-two-way-data-binding/72121/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-371767" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371767"
                     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="371769" data-post-id="371769">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>IMO, “controlled input” is unclear. I would go with something that is more on the descriptive side, maybe your 2nd idea.</p>
<p>You can always have a little callout if you want to cater to React devs, e.g. <code>(if you’re coming from React, you may know this as “controlled input”)</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371769" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/does-hologram-support-two-way-data-binding/72121/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-371769" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371769"
                     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="371770" data-post-id="371770">
  <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="LostKobrakai" data-post="13" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lostkobrakai/48/3072_2.png" class="avatar"> LostKobrakai:</div>
<blockquote>
<p>But my point was less in favor of one or another solution, but the fact that one needs to be aware of that stuff as a maintainer for an abstraction over html and where there’s deviation from the norm</p>
</blockquote>
</aside>
<p>The <code>value</code> and <code>defaultValue</code> thing is a small deviation, but of course React’s model is an <em>enormous</em> deviation from a normal HTML page. As is SolidJS. The reason these frameworks are so aggressively overwriting the input values is that they are <em>specifically designed</em> to transfer that control to the JS code (“controlled” component). This is essentially React’s raison d’etre, and likewise for all of its derivatives.</p>
<p>But the question is what the “norm” really is; a lot of people’s introduction to webdev <em>was</em> React, and the actual HTML behavior is the one that will be alien to them.</p>
<p>For the record, it seems like <a href="https://hexdocs.pm/phoenix_live_view/form-bindings.html" rel="noopener nofollow ugc">LiveView’s docs don’t mention this explicitly</a> either.</p>
<p>SolidJS has no mention of inputs in their docs from what I saw, but <a href="https://github.com/solidjs/solid/discussions/416" rel="noopener nofollow ugc">this discussion</a> suggests they don’t actually have this behavior, and many seem to be surprised and confused by the normal HTML behavior, which is kind-of my point.</p>
<p>Edit: I don’t know much about Vue but it seems like they <a href="https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings" rel="noopener nofollow ugc">have a special binding syntax</a> for this which deviates slightly (<code>:value="myValue"</code>). There also seems to be <a href="https://vuejs.org/guide/essentials/forms" rel="noopener nofollow ugc">some other input binding behavior</a> which I don’t really understand. Maybe someone familiar can explain?</p>
<p>Either way they kind-of gloss over the HTML behavior too, though they are at least using a different syntax. I still like React’s approach more as it reinforces the idea that you are declaratively specifying the page state rather than imperatively updating it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371770" 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/does-hologram-support-two-way-data-binding/72121/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-371770" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371770"
                     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="371807" data-post-id="371807">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group quote-modified" data-username="LostKobrakai" data-post="11" data-topic="72121" 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/lostkobrakai/48/3072_2.png" class="avatar"> LostKobrakai:</div>
<blockquote>
<aside class="quote no-group" data-username="bartblast" data-post="10" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/48/17647_2.png" class="avatar"> bartblast:</div>
<blockquote>
<p>I totally agree that most developers won’t care about implementation details and just want <code>value={@my_value}</code> to work.</p>
</blockquote>
</aside>
<p>This is a topic full of footguns though. The <code>value</code> attribute of inputs in html is used to set the default value of that input, the value reverted to e.g. when you reset a form (<code>&lt;input type="reset"&gt;</code>). The value of the input itself is the <code>input.value</code> property of the dom node (vs. <code>input.getAttribute("value")</code>). You can ignore that distinction – LV by my understanding does so – but it’ll mean you might break expectations for people who understand and use that distinction.</p>
</blockquote>
</aside>
<p>I hear what you’re saying <a class="mention" href="/u/lostkobrakai" rel="nofollow">@LostKobrakai</a> about the HTML behavior distinctions and potential footguns.</p>
<p>I’m leaning towards optimizing for the most intuitive developer experience as of 2025, which probably aligns with the React approach. I agree with <a class="mention" href="/u/garrison" rel="nofollow">@garrison</a>’s observations - many developers today aren’t aware of the native HTML behavior and treat React’s behavior as the default one.</p>
<p>For example, most React developers don’t know that for the “change” event on text-based inputs, React actually uses the native “input” event under the hood. That’s actually the most intuitive approach in my opinion, and it’s what Hologram uses too.</p>
<p>I’m aware of the native “reset” behavior you mentioned, but I’ve consciously ignored it for the reasons I’m outlining here. While it would be technically possible to include this behavior, most people wouldn’t be aware of it and would still prefer the declarative/functional approach of managing everything through state changes rather than relying on implicit HTML form behaviors.</p>
<p>I think deviating from strict HTML semantics is worth it if it creates a better DX, but you’re absolutely right that it needs to be well documented. I want to be transparent about where Hologram differs from vanilla HTML behavior.</p>
<p>What other potential footguns do you think I should take into account and document? I’d rather identify these upfront and handle them thoughtfully than discover them later through user confusion.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371807" 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/does-hologram-support-two-way-data-binding/72121/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-371807" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371807"
                     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="371808" data-post-id="371808">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="jam" data-post="14" data-topic="72121" 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/jam/48/36266_2.png" class="avatar"> jam:</div>
<blockquote>
<p>IMO, “controlled input” is unclear. I would go with something that is more on the descriptive side, maybe your 2nd idea.</p>
<p>You can always have a little callout if you want to cater to React devs, e.g. <code>(if you’re coming from React, you may know this as “controlled input”)</code>.</p>
</blockquote>
</aside>
<p>Yeah, makes sense!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371808" 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/does-hologram-support-two-way-data-binding/72121/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-371808" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371808"
                     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="371898" data-post-id="371898">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="bartblast" data-post="10" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/48/17647_2.png" class="avatar"> bartblast:</div>
<blockquote>
<p>The core concept is that Hologram maintains unidirectional data flow while solving the DOM synchronization problem that LiveView can’t address.</p>
</blockquote>
</aside>
<p>Can you please expand on this?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371898" 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/does-hologram-support-two-way-data-binding/72121/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-371898" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371898"
                     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="371922" data-post-id="371922">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I assume you’re asking about the second part of that quote - “solving the DOM synchronization problem that LiveView can’t address.”</p>
<p>The fundamental issue is that <strong>the DOM is inherently stateful</strong> and LiveView’s architecture creates an unavoidable <strong>state consistency problem</strong> between DOM and server that requires ongoing reconciliation.</p>
<p>Here’s what happens in <strong>LiveView</strong>:</p>
<ol>
<li>User types “A” → DOM state becomes “A” (immediate)</li>
<li>Event sent to server → server state becomes “A” (delayed)</li>
<li>Server sends update back → client reconciles DOM with server state (delayed)</li>
</ol>
<p>This creates all the fundamental <strong>distributed systems challenges</strong>: consistency problems, latency, ordering issues, partition tolerance, and failure modes (server restarts, connection drops, deployments, etc.). The DOM maintains its own internal state (what the user sees and interacts with), while the server maintains application state. Fast typing, network issues, or server processing delays create windows where these stateful systems are inconsistent, and the failure modes described above can result in complete state loss. During steps 2-3, you have <strong>two sources of truth</strong> that can diverge. LiveView’s client-side hooks are constantly working to reconcile these differences across the network boundary.</p>
<p>In <strong>Hologram</strong>:</p>
<ol>
<li>User types “A” → DOM state becomes “A” (immediate)</li>
<li>Hologram updates component state → component state becomes “A” (immediate)</li>
<li>DOM and component state remain synchronized (always)</li>
</ol>
<p>There’s never a consistency gap because the DOM’s inherent statefulness is managed within the same execution context as the component state - <strong>one source of truth</strong> that gets updated atomically.</p>
<p>The key difference: LiveView must continuously <strong>resolve</strong> state inconsistencies between the inherently stateful DOM and server, while Hologram <strong>prevents</strong> state inconsistencies from occurring in the first place.</p>
<p>While LiveView’s hooks provide some mitigation, they’re fundamentally limited by the distributed architecture - solving a problem that Hologram’s architecture simply doesn’t have. You can’t have DOM/server synchronization issues when the DOM’s stateful nature and application state are managed in the same execution context.</p>
<p>That’s what I meant by “can’t address” - LiveView can’t eliminate the fundamental architectural challenge of coordinating two separate stateful systems, only manage it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371922" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/does-hologram-support-two-way-data-binding/72121/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-371922" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371922"
                     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="371924" data-post-id="371924">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="bartblast" data-post="19" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/48/17647_2.png" class="avatar"> bartblast:</div>
<blockquote>
<p>There’s never a consistency gap because the DOM’s inherent statefulness is managed within the same execution context as the component state - <strong>one source of truth</strong> that gets updated atomically.</p>
</blockquote>
</aside>
<p>Thank you, so I assume the above and then this:</p>
<aside class="quote no-group" data-username="bartblast" data-post="19" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/48/17647_2.png" class="avatar"> bartblast:</div>
<blockquote>
<p>You can’t have DOM/server synchronization issues when the DOM’s stateful nature and application state are managed in the same execution context.</p>
</blockquote>
</aside>
<p>…means that your entire app in this case will be Elixir transpiled to Javascript, living in the browser in its entirety and thus avoiding to sync up with a server in the first place?</p>
<p>I am very not sure I am getting this right – likely not – but your analysis intrigued me, though I have near-zero context on Hologram. Still, if you are willing to expand on the “same execution context” and why does it avoid the sync / distribution problems exactly, it would be illuminating.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371924" 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/does-hologram-support-two-way-data-binding/72121/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-371924" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371924"
                     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="371926" data-post-id="371926">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="bartblast" data-post="19" data-topic="72121">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/48/17647_2.png" class="avatar"> bartblast:</div>
<blockquote>
<p>The key difference: LiveView must continuously <strong>resolve</strong> state inconsistencies between the inherently stateful DOM and server, while Hologram <strong>prevents</strong> state inconsistencies from occurring in the first place.</p>
</blockquote>
</aside>
<p>That’s not fully true though. Yes there’s no network boundry and latency, but hologram is also a separate stateful system next to the dom trying to ensure the dom looks to it’s liking – just like the very same is true for react or whatever else sits in the same category. None of those can prevent the dom from changing underneight their feet, they can only correct it to match their state. If you go and e.g. do <code>someElement.innerHTML = "abc"</code> in the console – the more common case of that would be browser plugins – that won’t be corrected until some other side effect triggers the reconsiler in react or changes the signal in solid.js again. I haven’t looked at hologram that deeply yet, but I would also expect you’d only adjust the dom again if the hologram state changes again to some degree.</p>
<p>I do agree that LVs method of reconciliation is not optimal, but it’s certainly not just a matter of network boundary.</p>
<p>You can look at electric-closure it’s compiling reactive applications across both server and client. The react reconciler inspired the usegpu library, which does reactive/declarative programming for webgpu, a domain usually handled quite differently – so it’s not some trivial piece of code either.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="371926" 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/does-hologram-support-two-way-data-binding/72121/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-371926" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="371926"
                     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/72121/load_more?page=3">Load more posts</a>
</div></template></turbo-stream>