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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/harmon25" rel="nofollow">@harmon25</a> <a class="mention" href="/u/webdeb" rel="nofollow">@webdeb</a> I started a channel <a class="hashtag-cooked" href="/tag/livedata/3516" data-type="tag" data-slug="livedata" data-id="3516" data-style-type="icon" data-icon="tag" rel="nofollow"><span class="hashtag-icon-placeholder"><svg class="fa d-icon d-icon-square-full svg-icon svg-node"><use href="#square-full"></use></svg></span><span>livedata</span></a> on Elixir Slack, let’s connect there and kick it off <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="190445" 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/json-with-liveview/33992/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-190445" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="190445"
                     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="191767" data-post-id="191767">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looks like I am pursing a similar idea over at <a href="https://github.com/justinmcp/taper" class="inline-onebox" rel="noopener nofollow ugc">GitHub - justinmcp/taper: Taper is a React (with SSR) and server-side-redux-like environment for Elixir+Phoenix. · GitHub</a>. You can render react components directly from a template (.html.jsx) and they can connect to a server-side version of redux (basically the same API as redux). It can also render jsx server side only, skipping hydration on the client. There is currently one  example at <a href="https://github.com/justinmcp/taper-examples" class="inline-onebox" rel="noopener nofollow ugc">GitHub - justinmcp/taper-examples: Examples for the Taper project · GitHub</a>.</p>
<p>Still really early days. I want to put back a “remote call” hook that could call out to any gen_server, handle store loading/persistence in a reasonable way, etc, etc.</p>
<p>Shaping up nice though.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="191767" 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/json-with-liveview/33992/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-191767" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="191767"
                     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="191777" data-post-id="191777">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That is awesome!</p>
<p>Looks like a lot of the same thoughts we are pursuing. Join us on the <a class="hashtag-cooked" href="/tag/livedata/3516" data-type="tag" data-slug="livedata" data-id="3516" data-style-type="icon" data-icon="tag" rel="nofollow"><span class="hashtag-icon-placeholder"><svg class="fa d-icon d-icon-square-full svg-icon svg-node"><use href="#square-full"></use></svg></span><span>livedata</span></a> slack group if you haven’t already, and we can collab on these ideas!</p>
<p>Thinking there is room for both a lower level API that could be dropped into a phoenix app for server-side state in your JS client, and something that integrates them together more, for a fullstack next.js(ish) Elixir framework - which does server-side react rendering, and wires it all up - which is what taper is shaping up to be…</p>
<p>One thing we have implemented is sending json-diffs, akin to live_view diffs. Taper is just sending the entire state each time from the looks of it. Think there is room for some testing to determine if the json diffing actually helps at scale. I could imagine if the json is not very big - the diff might actually be more bytes than just sending the full json. It also of course comes at a cost of calculating the diff, also on the client applying 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="191777" 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/json-with-liveview/33992/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-191777" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="191777"
                     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="191822" data-post-id="191822">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<blockquote>
<p>Thinking there is room for both a lower level API hat could be dropped into a phoenix app for server-side state in your JS client<br>
One thing we have implemented is sending json-diffs, akin to live_view diffs. Taper is just sending the entire state each time from the looks of it.</p>
</blockquote>
<p>100%. Sounds like a good idea. I have vaguely worked  out having the reducers return a ecto.changeset instead of the entire new state, and then sending the changeset across the wire.. I’m still not 100% on the idea though, maybe just a json-diff thing is better as you say.</p>
<p>I’ll pop into the channel and we can chat about it all.</p> 
	            </div>

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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="webdeb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/webdeb/120/17706_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  webdeb
                    <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>Guys, I started working my initial state as a service idea, which should be a simple way to share state. I call it <strong>livestate</strong> (<a href="http://livestate.io" rel="noopener nofollow ugc">livestate.io</a>) And I would love you to check it.</p>
<p>The code is open source, and very basic <a href="https://github.com/livestate" class="inline-onebox" rel="noopener nofollow ugc">livestate.io · GitHub</a></p>
<p><a class="mention" href="/u/methyl" rel="nofollow">@methyl</a> I liked your solution for special purpose state very much, as it made possible to use type generation for TS, and custom methods. And it was actually your ideas which inspired me to go with the json-patch method <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" 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="208969" 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/json-with-liveview/33992/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-208969" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208969"
                     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="252638" data-post-id="252638">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’ll throw my hat into the ring too, I guess.</p>
<p>Just pushed an alpha of this:</p>
<p><a href="https://github.com/Miserlou/live_json" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/Miserlou/live_json</a></p>
<p>Built for my own needs, but maybe it’ll be handy for you as well.</p>
<p>It’s very simple and works with existing LiveViews - just use <code>LiveJson.push_patch</code> the way you’d use <code>assign</code> or <code>push_event</code>. It has two modes, <code>jsondiff</code> and <code>rfc</code> mode, which use Jsondiff and JSON-Patch, respectively. jsondiff mode is very fast, and rfc mode is compatible everywhere.</p>
<p>As an example you can:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def handle_info({:new_data_to_visualize, new_data} = _event, socket) do
  {:noreply, 
    socket
    |&gt; push_patch("viz_data", new_data)
  }
end
</code></pre>
<p>Then, in your JS console:</p>
<pre data-code-wrap="javascript"><code class="lang-javascript">window.viz_data
// {1: ["a"], 2: ["b"] ... 99999: ["zzzzz"]}
</code></pre>
<p>Only deltas are sent over the wire, so it’s quite fast!</p>
<p>More details soon, but works for me.</p> 
	            </div>

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

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>