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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Cool stuff! Thank you all for your hard work on this project and so much more.</p>
<p>Here are my impressions and thoughts after two hours of fiddling with the library and <a href="https://github.com/chrismccord/phoenix_live_view_example" rel="noopener nofollow ugc">demo project</a> and (mainly) thinking about its use cases. I think it’s impressive but also have some questions and observations. I assume that you are looking for feedback, so here it goes.</p>
<p>User CRUD example</p>
<p>The way the user <a href="https://github.com/chrismccord/phoenix_live_view_example/tree/master/lib/demo_web/templates/user" rel="noopener nofollow ugc">CRUD templates</a> in the demo almost looks like they could have been copy/pasted from the regular HTML version is very nice. The differences are most about routing and form options. Leaves you wondering what agnostic code exactly could eventually replace <code>Routes.live_path(@socket, UserLive.Edit, user)</code> and <code>Routes.user_path(@conn, :edit, user)</code>? But you chose to give these templates another file extension to keep them out of the eex compile step I guess? The (inevitable) coupling between phoenix_html_form and phoenix_live is very visible here. This could be a strength if you can keep them working together.</p>
<p>Image Editor/Autocomplete Form</p>
<p>Throttling and debouncing of client side events is so obvious that it should be built-in, good to hear that you are working on that, perhaps with something like <code>&lt;form phx-change="suggest" phx-submit="debounce(search, 200)"&gt;</code> in the <a href="https://github.com/chrismccord/phoenix_live_view_example/blob/master/lib/demo_web/live/search_live.ex#L6" rel="noopener nofollow ugc">search with autocomplete</a> demo. But my guess it that you’re heading for a more declarative approach like <code>&lt;input type="range" min="10" max="630" name="width" value="&lt;%= @width %&gt;" phx-debounce="200" /&gt;</code>. I noticed that the <code>phx-submit-every</code> should already work for form submits, but not for value changes within a view.<br>
How configurable or extensible are these attributes/behaviours?</p>
<p>Boom<br>
<a href="https://github.com/chrismccord/phoenix_live_view_example/blob/master/lib/demo_web/live/image_live.ex#L26" rel="noopener nofollow ugc"><code>&lt;img phx-click="boom"&gt;</code></a> started me searching where <code>boom</code> was defined, but of course it was just the name for an unkown event that made the server crash and recover to an <strong>empty form</strong>. It made me wonder what state you want to present to the user when things go wrong on the server. It would need a hellofalotta bookkeeping on the server side to mimic exactly what all those connected browsers keep as their own <em>last known state</em>. A full page reload is just too harsh, so creating a full SPA is probably out of the picture for phoenix_live?</p>
<p>Rainbow</p>
<p>Performancewise, the <a href="https://github.com/chrismccord/phoenix_live_view_example/blob/master/lib/demo_web/live/rainbow_live.ex" rel="noopener nofollow ugc">Rainbow demo</a> did not convince me, sorry. With the browser devtools open it crashed my Chrome tab hard, but that’s understandable. With devtools closed it worked fine in the browser but gave me a 10%+ server cpu load (on an ubuntu vm with lots of headroom). So, while I get that this example is a bit of an extremity, it was definitely not a super showcase for connecting many concurrent users with up-beat computational requirements.</p>
<p>Where to now?</p>
<p>I can see that phoenix_live has a lot of potential, but what can become it’s real strengths?<br>
Can you offer developers more than <em>magic to socketify a CRUD resource</em>, or is that what you are aiming for? Because (in this first/short review) I don’t see a lot of possibilities for <em>quick extensions</em> or <em>escape hatches</em> when it comes to fine-tuning client-side behaviour. Of course that can be a good thing, a goal, I don’t know. It’s definitely a certain state of mind when dealing with HTML forms and views. There have been many previous endeavours to <em>ajaxify</em> forms and views in all shapes and languages, I’m sure there is a lot to learn from that while <em>socketifying</em>.</p>
<p>So before everybody dives in and tries to rewrite their Meteor application into something phoenix_live (sorry <a class="mention" href="/u/simon" rel="nofollow">@simon</a>), think about how completely different the two are.<br>
I’m not saying that one is better than the other, but phoenix_live is definitely not leveraging full <em>JavaScript</em> potential to the webapp developer as I see it now. It’s about writing code in one language (Elixir) and keeping state on the server. Which can be nice.</p>
<p>I’m really sorry if this sounded all too harsh because I enjoy thinking about this kind of stuff and I love the Phoenix framework. Let this late-hour rambling of mine drive you to higher heights! <img src="https://forum.elixirforum.com/images/emoji/apple/green_heart.png?v=15" title=":green_heart:" class="emoji" alt=":green_heart:" 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="120137" 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/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-120137" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120137"
                     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="120138" data-post-id="120138">
  <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>Thanks for the feedback!</p>
<aside class="quote no-group quote-modified" data-username="zwippie" data-post="12" 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/zwippie/48/7143_2.png" class="avatar"> zwippie:</div>
<blockquote>
<p>Throttling and debouncing of client side events is so obvious that it should be built-in, good to hear that you are working on that… How configurable or extensible are these attributes/behaviours?</p>
</blockquote>
</aside>
<p>There won’t be anything to configure debouncing wise, as it will only be annotating the DOM like you mentioned – <code>phx-debounce="1000"</code> or similar. Our greater JS interop story is still TBD. Today your only option is to wire up event handlers directly like <code>onclick="myFunc(event")</code>. There’s a lot explore here, but I’m intentionally punting on this for now until usecases help present a generalized solution.</p>
<aside class="quote no-group" data-username="zwippie" data-post="12" 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/zwippie/48/7143_2.png" class="avatar"> zwippie:</div>
<blockquote>
<p>So, while I get that this example is a bit of an extremity, it was definitely not a super showcase for connecting many concurrent users with up-beat computational requirements.</p>
</blockquote>
</aside>
<p>The only purpose of this contrived example is to show the <em>server</em> can handle re-rendering and sending diffs such that 60fps animations are possible. It’s not a real usecase, but it’s a fun example to showcase our general performance. I disagree about not being a good showcase for many users causing many renders ¯_(ツ)_/¯</p>
<aside class="quote no-group" data-username="zwippie" data-post="12" 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/zwippie/48/7143_2.png" class="avatar"> zwippie:</div>
<blockquote>
<p><a href="https://github.com/chrismccord/phoenix_live_view_example/blob/master/lib/demo_web/live/image_live.ex#L26" rel="nofollow"> <code>&lt;img phx-click="boom"&gt;</code> </a> started me searching where <code>boom</code> was defined, but of course it was just the name for an unkown event that made the server crash and recover to an <strong>empty form</strong> .</p>
</blockquote>
</aside>
<p>the “boom” is arbitrary. It could also be “this-will-explore” since it will cause a function clause error and intentional crash on the server. The purpose there was me testing the failure and recovery modes of parent/children/etc.</p>
<p>State wise, the same rules apply on the live view process as any other elixir process. The live view recovers to a <em>known good state</em>, which is an empty form in this example. For durable server specific state, you’d handle it the same way you handle it in Elixir today, which is to say it’s up to you to store outside the process as needed. This may sound like a hand-wavy answer, but I’ll repeat it’s the same story that we have in elixir processes today and restarting to a known good state is one of the things we want in recovery. For client specific state, we do have the live view session, and we will expose primitives that allow you to update the session with state programmatically. So things like <code>last_seen_id</code> for a chat app, or in your example, specific user inputs could be ‘persisted’ in the live view session and recovered on crash.</p>
<aside class="quote no-group" data-username="zwippie" data-post="12" 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/zwippie/48/7143_2.png" class="avatar"> zwippie:</div>
<blockquote>
<p>I can see that phoenix_live has a lot of potential, but what can become it’s real strengths?<br>
Can you offer developers more than <em>magic to socketify a CRUD resource</em> , or is that what you are aiming for? Because (in this first/short review) I don’t see a lot of possibilities for <em>quick extensions</em> or <em>escape hatches</em> when it comes to fine-tuning client-side behaviour.</p>
</blockquote>
</aside>
<p>As I’ve mentioned in my talks, our goals are to start small and see where we programming model breaks down. I think we can go farther than a lot of people think. Strength wise as it exists today, I can confidently say LiveView will be <em>great</em> for:</p>
<ul>
<li>
<p>bits of required rich interaction in your app. Think notifications, async job statuses, progress bars, dashboards, widgets, etc</p>
</li>
<li>
<p>interactive forms. Think ‘client-side’ validations, dynamic forms that update inputs/options based on selections, must-step wizards, etc</p>
</li>
<li>
<p>any realtime updates you wish to push out to users or have users’ page info update based on things happening in the system. I’m going to flip your comment back at you:</p>
<pre><code> more than  *magic to socketify a CRUD resource*
</code></pre>
<p>think of how many pages our web applications render where otherwise static data <em>could</em> be live if the cost to support it was sufficiently low. Today that cost is too high for most tooling without buying into a ton of complexity, even for pages that are ultimately dumb “CRUD” data. LiveView makes it trivial to enhance these “CRUD” pages with realtime updates that deliver instant UX increases, so don’t be too quick to discount this side of things, after all how many of us are building glorified spreadsheets, SPA or not? <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>
</li>
<li>
<p>any rich interaction where the server is required to be there. Think autocomplete and search results – things that are impossible or impractical to cache on the client and don’t make sense in any optimistic UI context. (google can’t cache their search index in an SPA for example)</p>
</li>
</ul>
<p>So to close, we know the areas LiveView isn’t a good fit – highly latent clients, usecases where optimistic UI is required, desktop-like interfaces, offline support. What specific usecases we venture into in this brave new world… we’ll find out together <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="120138" data-batch-url="/posts/batch_likers">
                        26
                      </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/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-120138" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120138"
                     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="120140" data-post-id="120140">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="AstonJ" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/AstonJ/120/15_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  AstonJ
                  </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="13" 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>
<ul>
<li>bits of required rich interaction in your app. Think notifications, async job statuses, progress bars, dashboards, widgets, etc</li>
<li>interactive forms. Think ‘client-side’ validations, dynamic forms that update inputs/options based on selections, must-step wizards, etc</li>
<li>any realtime updates you wish to push out to users or have users’ page info update based on things happening in the system.</li>
</ul>
</blockquote>
</aside>
<p><img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6859d251eb1d30084c330dd451119e07820d3619.gif?v=15" title=":007:" class="emoji emoji-custom" alt=":007:" loading="lazy" width="20" height="20"> <img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6859d251eb1d30084c330dd451119e07820d3619.gif?v=15" title=":007:" class="emoji emoji-custom" alt=":007:" loading="lazy" width="20" height="20"> <img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6859d251eb1d30084c330dd451119e07820d3619.gif?v=15" title=":007:" class="emoji emoji-custom" alt=":007:" loading="lazy" width="20" height="20"> <img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6859d251eb1d30084c330dd451119e07820d3619.gif?v=15" title=":007:" class="emoji emoji-custom" alt=":007:" loading="lazy" width="20" height="20"> <img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6859d251eb1d30084c330dd451119e07820d3619.gif?v=15" title=":007:" class="emoji emoji-custom" alt=":007:" loading="lazy" width="20" height="20"></p>
<p>That list covers pretty much everything I wanted to use it for …and more! <img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6c3193d1dd46244da3c8c6f719c9f5e2abdd5ae8.gif?v=15" title=":003:" class="emoji emoji-custom" alt=":003:" 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="120140" data-batch-url="/posts/batch_likers">
                        5
                      </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/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-120140" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120140"
                     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="120141" data-post-id="120141">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I only want to thank you for LiveView. It is a gift for people like me that are <a href="https://forum.elixirforum.com/t/tired-of-developing-single-page-applications/19623" rel="nofollow">tired of developing SPAs</a>.</p>
<p>Thank you Chris! Receive a big hug!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="120141" data-batch-url="/posts/batch_likers">
                        8
                      </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/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-120141" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120141"
                     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="120152" data-post-id="120152">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>What I just thought to ask about, is already there. Thank you guys! (<a class="mention" href="/u/josevalim" rel="nofollow">@josevalim</a>, <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a> and other contributors)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="120152" 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/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-120152" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120152"
                     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="120154" data-post-id="120154">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="zwippie" data-post="12" 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/zwippie/48/7143_2.png" class="avatar"> zwippie:</div>
<blockquote>
<p>It’s about writing code in one language (Elixir) and keeping state on the server. Which can be nice.</p>
</blockquote>
</aside>
<p>This is exactly what I thought when I saw the demo. It’s great. I don’t want to do full blown SPA. Often time then not I just want a web app, SPA application for me is rare. The few I think are best cases are admin tools, gmail, word doc online, etc.. Most of the time I want a web app that is SEO friendly so I can bring in traffic to authoritative website.</p>
<p>It’s a perfect use case for a full stack like myself that don’t have time to go deep in every aspect of front end (even though I did VueJS).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="120154" data-batch-url="/posts/batch_likers">
                        5
                      </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/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-120154" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120154"
                     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="120159" data-post-id="120159">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="zwippie" data-post="12" 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/zwippie/48/7143_2.png" class="avatar"> zwippie:</div>
<blockquote>
<p>So before everybody dives in and tries to rewrite their Meteor application into something phoenix_live (sorry <a class="mention" href="/u/simon" rel="nofollow">@simon</a>), think about how completely different the two are.</p>
</blockquote>
</aside>
<p>Thanks <a class="mention" href="/u/zwippie" rel="nofollow">@zwippie</a>, that was all good stuff and <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a>’s reply helped me realise that I probably need to stop saying that I’m hoping that I can replace a Meteor application with a Phoenix and LiveView one because I think that a lot of the heavy lifting can be done using channels and Postgres’s Listen/Notify commands (but this is something I need to verify).</p>
<p>LiveView interests me from the angle of interactive forms, giving feedback from async tasks (one example is that we use Google’s geocoding APIs to fetch addresses from coordinates so showing a progress indicator and then the results would be handy), etc.</p>
<p>Where I’m currently unclear is whether updating lists of data being shown to the user when database changes occur is best done via the aforementioned channels and Postgres’s Listen/Notify or whether LiveView will do that more simply too. I need to find some time to have a proper play with it all now.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="120159" 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/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-120159" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120159"
                     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="120187" data-post-id="120187">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just when you thought life couldn’t get better.</p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Probably blasphemy but I tested out using the Live View demo app with a custom vuejs based webcomponent (as a widget, not an spa) and it worked well.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="120255" data-batch-url="/posts/batch_likers">
                        5
                      </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/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-120255" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="120255"
                     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="120266" data-post-id="120266">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Awesome great work <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a>, <a class="mention" href="/u/josevalim" rel="nofollow">@josevalim</a> and everybody else who is contributing! Thanks!</p> 
	            </div>

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