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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>am keen to understand how this effects the rest of the ecosystem</p>
<p>how one might migrate a CRUD app ?</p>
<p>I saw someone asking about LiveQuery, I wonder how it will effect JSON api also</p>
<p>lots of questions</p>
<p>I am so thankful I never bought into the Javascript Frontend JSON API koolaid</p>
<p>dhs convinced me a couple of years ago with his screeds</p>
<p>chris_mccord has really shifted the paradigm</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="102898" 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-info/16569/83">Post #82</a>
	                </div>
	            </div>
              <div id="likers-container-102898" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="102898"
                     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 #82"></div>
  </section>
</div>
    <div class="postbit" id="102908" data-post-id="102908">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is cool indeed, but what I really want to see controlled inputs and how <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a> plans (and if) to implement it. Like, when you type, events are being sent to server, server does something with the text and sends update back.</p>
<p>Good use case is for example input that converts entered text to lowercase, or an input that formats phone number.</p>
<p>Longer text inputs (text areas) with a lot of text in it is going to be another problem. Also, pasting text, entering / deleting text in the middle of input etc. is going to be hard without some smart diff algorithm.</p>
<p>I did some experiments with server-side updates, and form inputs were the thing that seemed to be the hardest to handle.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="102908" 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-info/16569/84">Post #83</a>
	                </div>
	            </div>
              <div id="likers-container-102908" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="102908"
                     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 #83"></div>
  </section>
</div>
    <div class="postbit" id="103315" data-post-id="103315">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m wondering how interop with JS could work with LiveView.. I have a bunch of React components and currently am happily using <a href="https://github.com/geolessel/react-phoenix" rel="noopener nofollow ugc">react-phoenix</a> to render them.</p>
<p>A lot of use cases will work great in pure Elixir with LiveView but frequently I will need to client-side render a React component (that’s already loaded in JS scope on the page) with props in the middle of a LiveView component/module.  Not sure how that would/could work with the DOM diffing strategy but it would be totally awesome.  I think Chris mentioned in a podcast (or video, not sure) he was thinking about 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="103315" 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-info/16569/85">Post #84</a>
	                </div>
	            </div>
              <div id="likers-container-103315" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="103315"
                     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 #84"></div>
  </section>
</div>
    <div class="postbit" id="103321" data-post-id="103321">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As long as the javascript components follow the webcomponents spec then I wouldn’t see much issue unless the DOM swaps things out or mutates a property when it meant for an attribute or vice-versa or so (Drab handles this <em>really</em> 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="103321" 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-info/16569/86">Post #85</a>
	                </div>
	            </div>
              <div id="likers-container-103321" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="103321"
                     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 #85"></div>
  </section>
</div>
    <div class="postbit" id="103366" data-post-id="103366">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>typo: dhh<br>
Stimulus and Rails<br>
server side html with sprinkles of Javascript</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://signalvnoise.com/svn3/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have/">
  <header class="source">
      <img src="https://signalvnoise.com/assets/svn3/images/2019/01/cropped-svn-icon.gif" class="site-icon" alt="" width="512" height="512">

      <a href="https://signalvnoise.com/svn3/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have/" target="_blank" rel="noopener nofollow ugc" title="08:42PM - 30 January 2018">Signal v. Noise – 30 Jan 18</a>
  </header>

  <article class="onebox-body">
    <img width="512" height="512" src="https://signalvnoise.com/assets/svn3/images/2019/01/cropped-svn-icon.gif" class="thumbnail onebox-avatar" alt="">

<h3><a href="https://signalvnoise.com/svn3/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have/" target="_blank" rel="noopener nofollow ugc">Stimulus 1.0: A modest JavaScript framework for the HTML you already have</a></h3>

  <p>Modern JavaScript doesn’t have to mean single-page, client-side MVC&nbsp;apps. We write a lot of JavaScript at Basecamp, but we don’t use it to create “JavaScript applications” in the contemporary …</p>

  <p>
    <span class="label1">Est. reading time: 8 minutes</span>
  </p>

  </article>

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

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

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="103366" 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-info/16569/87">Post #86</a>
	                </div>
	            </div>
              <div id="likers-container-103366" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="103366"
                     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 #86"></div>
  </section>
</div>
    <div class="postbit" id="107682" data-post-id="107682">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a> has posted this on the DockYard blog</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript">
  <header class="source">

      <a href="https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript" target="_blank" rel="noopener nofollow ugc" title="02:06AM - 12 December 2018">DockYard – 12 Dec 18</a>
  </header>

  <article class="onebox-body">
    <img width="690" height="690" src="https://assets.dockyard.com/images/20181212_phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript.jpg" class="thumbnail onebox-avatar" alt="">

<h3><a href="https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript" target="_blank" rel="noopener nofollow ugc">Phoenix LiveView: Interactive, Real-Time Apps. No Need to Write JavaScript. -...</a></h3>

  <p>Phoenix LiveView is an exciting new library which enables rich, real-time user experiences with server-rendered HTML.</p>


  </article>

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

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

<p>Has lots of useful info and cool examples - can’t wait to check it out <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="107682" data-batch-url="/posts/batch_likers">
                        14
                      </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-info/16569/88">Post #87</a>
	                </div>
	            </div>
              <div id="likers-container-107682" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="107682"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="107698" data-post-id="107698">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Something I’ve been missing is information of whether or not history alteration will be a first class citizen.<br>
To be able to truly replace react we’ll need to be able to construct rich urls that can be updated by the liveviewing.</p>
<p>Any idea if this is coming? <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</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="107698" 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-info/16569/89">Post #88</a>
	                </div>
	            </div>
              <div id="likers-container-107698" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="107698"
                     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 #88"></div>
  </section>
</div>
    <div class="postbit" id="107712" data-post-id="107712">
  <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
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Exciting stuff!!!</p>
<blockquote>
<h2>What’s Next?</h2>
<p>We’re close to an initial release, and we can’t wait to see the kinds of applications the community builds with LiveView. Our next step is building testing tools similar to  <code>Phoenix.ChannelTest,</code> which will allow testing live views and client interaction purely in Elixir without a browser. We will also be shipping LiveView generators that will allow bootstrapping CRUD UIs like the existing  <code>phx.gen.html</code>  generator, but fully real-time out-of-the-box. Stay tuned!</p>
</blockquote>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/sunglasses.png?v=15" title=":sunglasses:" class="emoji only-emoji" alt=":sunglasses:" 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="107712" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-liveview-info/16569/90">Post #89</a>
	                </div>
	            </div>
              <div id="likers-container-107712" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="107712"
                     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 #89"></div>
  </section>
</div>
    <div class="postbit" id="107768" data-post-id="107768">
  <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>Push state is definitely something I will explore once other areas settle, but I think standard URL navigation should still be the default. We supports redirects today, so I imagine there will be a <code>transition</code> primitive that would use pushstate, but not a goal for our initial release.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="107768" data-batch-url="/posts/batch_likers">
                        6
                      </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-info/16569/91">Post #90</a>
	                </div>
	            </div>
              <div id="likers-container-107768" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="107768"
                     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 #90"></div>
  </section>
</div>
    <div class="postbit" id="107775" data-post-id="107775">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looks awesome - can’t wait!</p>
<p>Nice to see error and reconnection handled..</p>
<p>One thing I worry about is outdated js/html running against updated server code - eg my 3 day old tab which now has outdated js/html, or a just deployed release when I’m still connected, and gets reconnected to “new” code that may contain changes - maybe need a manual min_version constant that one can set and if the client is too old phx-must-reload event happen, or something…</p>
<p>but I may just be overthinking 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="107775" 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-info/16569/92">Post #91</a>
	                </div>
	            </div>
              <div id="likers-container-107775" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="107775"
                     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 #91"></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/16569/load_more?page=3">Load more posts (53 remaining)</a>
</div></template></turbo-stream>