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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m already working on an alpha version of phoenix application.</p>
<p>We were waiting for Phoenix Live view. Since it was not on github. So we created our own structure to update UI based on socket, as can be seen in action here</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://placeit.net/">
  <header class="source">
      <img src="https://placeit.net/favicon.ico" class="site-icon" alt="" width="48" height="48">

      <a href="https://placeit.net/" target="_blank" rel="noopener nofollow ugc">placeit.net</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://placeit.net/" target="_blank" rel="noopener nofollow ugc">Placeit | Create Amazing Mockups, Logos, Videos &amp; Designs</a></h3>

  <p>Get Unlimited Downloads Across 150K+ Templates! Create &amp; Customize Logos, Videos, Mockups, Flyers, Business Cards in Seconds With Placeit!</p>


  </article>

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

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

<p>And recently I have integrated Phoenix live view.<br>
After Phoenix Live view all our dependencies with javascripts have gone away <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"></p><aside class="onebox allowlistedgeneric" data-onebox-src="https://placeit.net/">
  <header class="source">
      <img src="https://placeit.net/favicon.ico" class="site-icon" alt="" width="48" height="48">

      <a href="https://placeit.net/" target="_blank" rel="noopener nofollow ugc">placeit.net</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://placeit.net/" target="_blank" rel="noopener nofollow ugc">Placeit | Create Amazing Mockups, Logos, Videos &amp; Designs</a></h3>

  <p>Get Unlimited Downloads Across 150K+ Templates! Create &amp; Customize Logos, Videos, Mockups, Flyers, Business Cards in Seconds With Placeit!</p>


  </article>

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

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

<p>Thanks Chris and team for such an awesome package.</p>
<p>We will be experimenting with some complex UI with phoenix live view. Will share any updates on that or raise issue if found one on github.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="120829" data-batch-url="/posts/batch_likers">
                        9
                      </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/phoenix-liveview-is-now-live/20889/63">Post #62</a>
	                </div>
	            </div>
              <div id="likers-container-120829" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120829"
                     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 #62"></div>
  </section>
</div>
    <div class="postbit" id="120906" data-post-id="120906">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yes, we need it desperately, as our heroku(free dyno with least resources) demo sometimes crashes when editing forums. How about have something like a phx-blur so that changeset is not triggered every <code>ms</code>.</p>
<p>phx-debouce will surely fix this. Also will be use full on search suggestions.</p>
<p>Also what are your thoughts on rxjs. Can it be used or be helpfull in any way to you.<br>
We use it with angular. It really helps us in controlling/workupon stream of data coming in from socket.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="120906" 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/phoenix-liveview-is-now-live/20889/64">Post #63</a>
	                </div>
	            </div>
              <div id="likers-container-120906" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120906"
                     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 #63"></div>
  </section>
</div>
    <div class="postbit" id="121012" data-post-id="121012">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>phx-debounce will support a <code>blur</code> value. I have no experience with rxjs so can’t speak to that</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121012" 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/phoenix-liveview-is-now-live/20889/65">Post #64</a>
	                </div>
	            </div>
              <div id="likers-container-121012" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121012"
                     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 #64"></div>
  </section>
</div>
    <div class="postbit" id="121041" data-post-id="121041">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote group-Phoenix-Core-Team" data-username="chrismccord" data-post="65" data-topic="20889">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/chrismccord/48/24233_2.png" class="avatar"> chrismccord:</div>
<blockquote>
<p>phx-debounce will support a <code>blur</code> value</p>
</blockquote>
</aside>
<p>will be a nice addition.</p>
<aside class="quote group-Phoenix-Core-Team" data-username="chrismccord" data-post="65" data-topic="20889">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/chrismccord/48/24233_2.png" class="avatar"> chrismccord:</div>
<blockquote>
<p>I have no experience with rxjs so can’t speak to that</p>
</blockquote>
</aside>
<p>Here is small code snippet for tyahead search written using rxjs observable pattern.</p>
<pre data-code-wrap="typescript"><code class="lang-typescript">const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) =&gt; e.target.value),
  filter(text =&gt; text.length &gt; 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() =&gt; ajax('/api/endpoint'))
);
</code></pre>
<p>This will only call endpoint when all the pipeline from <code>map</code> to <code>distinctUntilChanged</code> is clear.<br>
And <code>switchMap</code> will also give additional functionality to discard any previous request if new one comes. Like let’s say you type a word <code>phoenix </code> and it reached the endpoint call, and at the few <code>ms</code> delay you have typed <code>live</code> then switchMap would discard <code>phoenix </code> and take <code>phoenix live</code> as the new endpoint parameter.</p>
<p>In short <code>switchMap</code>  could cancel a request if the source emits quickly enough.</p>
<p>This is quite usefull when working with typeadhed search on websites with high search traffic.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121041" 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/phoenix-liveview-is-now-live/20889/66">Post #65</a>
	                </div>
	            </div>
              <div id="likers-container-121041" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121041"
                     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 #65"></div>
  </section>
</div>
    <div class="postbit" id="121045" data-post-id="121045">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looks neat! RxJS is 120k minified, so it’s not something we would include ourselves, but you’re free to use it if it meets your needs <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="121045" 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/phoenix-liveview-is-now-live/20889/67">Post #66</a>
	                </div>
	            </div>
              <div id="likers-container-121045" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121045"
                     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 #66"></div>
  </section>
</div>
    <div class="postbit" id="121048" data-post-id="121048">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote group-Phoenix-Core-Team" data-username="chrismccord" data-post="67" data-topic="20889">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/chrismccord/48/24233_2.png" class="avatar"> chrismccord:</div>
<blockquote>
<p>Looks neat! RxJS is 120k minified</p>
</blockquote>
</aside>
<p>No, so RxJS supports micro feature imports too. You can only import what you need. So the size of general usable operators are as little under 10K.</p>
<p>imports look like this</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121048" 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/phoenix-liveview-is-now-live/20889/68">Post #67</a>
	                </div>
	            </div>
              <div id="likers-container-121048" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121048"
                     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 #67"></div>
  </section>
</div>
    <div class="postbit" id="121133" data-post-id="121133">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I briefly talked about LiveView at the bar yesterday. One of my friend said that this kind of server-driven stateful views looked like the stuff that was done in the old days in the Java world.</p>
<p>I haven’t touched a line of Java since college (doctor’s order) and frankly I was not really sure we were on the same concepts here.</p>
<p>But today I came across similar remarks on the internet from people who just heard about Phoenix LiveView. It made them think about JSF (Java Server Faces) and they were pretty pessimistic about this approach :</p>
<p><a href="https://twitter.com/leisurelefty/status/1107118130055299072" class="onebox" target="_blank" rel="noopener nofollow ugc">https://twitter.com/leisurelefty/status/1107118130055299072</a></p>
<p><a href="https://news.ycombinator.com/item?id=19407456" class="onebox" target="_blank" rel="noopener nofollow ugc">https://news.ycombinator.com/item?id=19407456</a></p>
<p><a href="https://news.ycombinator.com/item?id=19173605" class="onebox" target="_blank" rel="noopener nofollow ugc">https://news.ycombinator.com/item?id=19173605</a></p>
<p>Maybe they’re comparing apples to oranges here, but could someone with a Java background (or maybe <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a> ?) make a comparison between the two approaches (JSF vs LiveView) ?</p>
<p>For a starter, I suppose JSF didn’t use websockets at all. I also suppose Erlang processes are much lighter.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121133" 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/phoenix-liveview-is-now-live/20889/69">Post #68</a>
	                </div>
	            </div>
              <div id="likers-container-121133" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121133"
                     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 #68"></div>
  </section>
</div>
    <div class="postbit" id="121137" data-post-id="121137">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>In the Java-World, there is also the Vaadin framework. Earlier versions (couple of years ago) seemed to have latency problems and did not perform well under load. I have just seen that there is now Vaadin Flow as a newer release. They claim:</p>
<blockquote>
<p>Vaadin Flow is a completely new Java web framework for automated bi-directional communication between the server and the browser. Forget REST, JSON parsing or DTOs between the browser and the server. With Vaadin Flow you have direct access to the DOM from the server.</p>
</blockquote>
<p>More can be found <a href="https://vaadin.com/docs" rel="noopener nofollow ugc">here</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121137" 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/phoenix-liveview-is-now-live/20889/70">Post #69</a>
	                </div>
	            </div>
              <div id="likers-container-121137" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121137"
                     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 #69"></div>
  </section>
</div>
    <div class="postbit" id="121140" data-post-id="121140">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Not sure if this is against the forum’s guideline, but <a href="http://jypepin.com/elixir-phoenix-liveview-with-a-real-world-example" rel="noopener nofollow ugc">here</a> I wrote about my experience in migrating a feature using ajax to live view.</p>
<p>A few people said it had been helpful for them, so I thought I’d share here too!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121140" 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/phoenix-liveview-is-now-live/20889/71">Post #70</a>
	                </div>
	            </div>
              <div id="likers-container-121140" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121140"
                     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 #70"></div>
  </section>
</div>
    <div class="postbit" id="121144" data-post-id="121144">
  <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="hurty" data-post="69" data-topic="20889">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hurty/48/7865_2.png" class="avatar"> hurty:</div>
<blockquote>
<p>Maybe they’re comparing apples to oranges here, but could someone with a Java background (or maybe <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a> ?) make a comparison between the two approaches (JSF vs LiveView) ?</p>
</blockquote>
</aside>
<p>So there are a couple important differences but some of the concerns are indeed shared.</p>
<p>One of the major differences is that LiveView is not trying to reinvent the wheel on the UI side of things. LiveView is not “UI running on the server”, it is not about accessing the DOM from the server, nor it requires a special client side notation. In LiveView, the server simply emits HTML and the LiveView state is not intrinsically tied to the UI in anyway.</p>
<p>This is an oversimplification but you can consider the previous approaches are closer to the MVC client-side framework side of things (i.e. with UI elements modelling the state) while LiveView is more on the React/Redux side of things (i.e. you keep the state on its own and use it to drive changes in the UI).</p>
<p>You also mentioned websockets and processes, which can lead to better performance, but the main importance of websockets is that a persistent connections implies you don’t need a storage for the “component state”. For example, if JSF uses AJAX, it means that every AJAX request can go to a different server, so you need to either persist the state in a shared storage or route requests through a cluster, both leading to overhead.</p>
<p>However, having a different model does not necessarily imply we won’t run into same limitations. One of the Hacker News comments posed a very good list of questions which I will try to answer below:</p>
<blockquote>
<ol>
<li>Freezes and needing a refresh/logout after the server-side “actor” or connection fails.</li>
<li>Refresh won’t actually work, you need to login again.</li>
</ol>
</blockquote>
<p>LiveView does not intend to fully replace your stateless actions. While you could do the login through LiveView and keep it as part of the connection state, that would indeed be a horrible idea! LiveView does not force you in anyway to drive all actions through the “actor”.</p>
<blockquote>
<ol start="3">
<li>Neither does back/forward, hence the big warnings not to hit back button, for example in a paginated list. Hitting back makes it freeze.</li>
</ol>
</blockquote>
<p>This is currently a limitation in LiveView. For example, if you have a paginated table and you are traversing the paginated table with LiveView, then you won’t have the back/forward buttons, you won’t be able to link to page 10, etc. We are aware of this and it is in the ROADMAP to provide tools to allow this. This is similar to SPA/JavaScript apps that do not leverage pushState accordingly. It can be addressed in JS and it will be addressable in LiveView too.</p>
<blockquote>
<ol start="4">
<li>Extreme latency.</li>
</ol>
</blockquote>
<p>I talked about this elsewhere but:</p>
<p>i. If you are using LiveView for things that can be addressed with CSS animations or do not involve the server at all (such as opening a menu), then yes, you are introducing latency when you wouldn’t have any latency before. But as said above, LiveView is not trying to hijack your UI in anyway, nor is it trying to replace HTML+CSS+JS.</p>
<p>ii. On the other hand, for applications with moderate latency, there is a chance that LiveView can reduce the amount of data sent over the wire thanks to the diff-tracking mechanism (and the upcoming binary serializer) and maybe even reduce latency altogether. For example, with a regular AJAX request, you have to do a HTTP request, then authenticate that request on the server, load the data from the database, etc. With LiveView, you have an established connection, so you skip the authentication and a lot of the data-loading on every action, so for a moderate latency, the application may be more responsive because there is generally less work to be done. This would of course have to be measured but it is a point worth considering.</p>
<p>iii. Finally, I think LiveView is in a very good position to tackle Optimistic UIs because any change that you do after a client action, such as clicking a button, will be undone on the next LiveView update. So it is straight-forward to do something like: click a button and enter into a loading state and the loading state is automatically undone when the update arrives. So we can provide feedback to the user on the client side as we wait for a reply and we will put more emphasis on those transitions as we move forward. And this feedback is important when latency is involved.</p>
<blockquote>
<ol start="5">
<li>No shareable urls or hyperlinks possible, two tabs in same browser will sync with each other.</li>
</ol>
</blockquote>
<p>About no shareable URLs, this is true for actions happening inside LiveView, such as in the paginated table, but solving this is part of the roadmap and remember that LiveView does not force all actions to go through the LiveView “actor”.</p>
<p>And two tabs in the same browser won’t sync with each other. Each LiveView session is distinct.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121144" data-batch-url="/posts/batch_likers">
                        16
                      </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/phoenix-liveview-is-now-live/20889/73">Post #72</a>
	                </div>
	            </div>
              <div id="likers-container-121144" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121144"
                     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 #72"></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/20889/load_more?page=8">Load more posts (26 remaining)</a>
</div></template></turbo-stream>