<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="7662" data-post-id="7662">
  <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">
								<p><em><a class="mention" href="/u/andre1sk" rel="nofollow">@andre1sk</a>  I’ve merged your thread with the existing one <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"></em></p>
<p>With regards to Turbolinks, I actually quite like it (with Rails anyway) - it helps give the site an app feel.  You can see it in action on a Rails site <a href="http://www.breedia.com/dogs/boxer" rel="nofollow">here</a> (only on info, photos, and want more pages - the forum is not Rails) and some cat pages like <a href="http://www.breedia.com/dogs/a" rel="nofollow">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="7662" 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/turbolinks-with-phoenix/1091/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-7662" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="7662"
                     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="7807" data-post-id="7807">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’ve been toying around with a turbolinks/react apps lately.   So far it seems quite solid.  Turbolinks makes all the crud stuff seem snappy and react allows for the higher fidelity UI to be well designed and sprinkled throughout the app.  It has pain points, but far fewer pain points then going full SPA.</p>
<p>If enough folks are interested in this I would be more than happy to extract a demo app out of my project.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="7807" data-batch-url="/posts/batch_likers">
                        7
                      </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/turbolinks-with-phoenix/1091/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-7807" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="7807"
                     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="7809" data-post-id="7809">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This sounds pretty cool. Currently I’m playing with vue.js because it plays well with the rendered DOM.<br>
But I’m very interested in a demo app, or more information <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="7809" 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/turbolinks-with-phoenix/1091/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-7809" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="7809"
                     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="7818" data-post-id="7818">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="nerdyworm" data-post="14" data-topic="1091">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/nerdyworm/48/359_2.png" class="avatar"> nerdyworm:</div>
<blockquote>
<p>If enough folks are interested in this I would be more than happy to extract a demo app out of my project.</p>
</blockquote>
</aside>
<p>Would be really cool</p>
<p>[quote=“nerdyworm, post:14, topic:1091”]<br>
It has pain points<br>
[/quote] What would you consider to be the biggest pain points?</p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I would also like to see a demo how you integrated turbolinks and react into phoenix without having a SPA.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="7823" 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/turbolinks-with-phoenix/1091/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-7823" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="7823"
                     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="7833" data-post-id="7833">
  <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">
								<p>Is it live anywhere <a class="mention" href="/u/nerdyworm" rel="nofollow">@nerdyworm</a>? I’d love to see it on a production site <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="7833" 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/turbolinks-with-phoenix/1091/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-7833" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="7833"
                     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="7924" data-post-id="7924">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I added a turbolinks branch to a demo forum app that I made just to see what it would be like. You can view it <a href="https://github.com/alaister/phoenix-simple-forum/tree/turbolinked" rel="noopener nofollow ugc">here</a> if you want <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="7924" 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/turbolinks-with-phoenix/1091/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-7924" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="7924"
                     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="7958" data-post-id="7958">
  <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>How does it perform with phoenix?  Done any timings with Chrome’s network graph or so?  Any integration issues?  Any CSRF issues?  Etc…?</p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As promised a Phoenix, Turbolinks, React, Redux, and Immutable.js example.   Redux and Immutable are not a requirement for this setup, but they make frontend work a tad more enjoyable for me <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>
<p>source: <a href="https://github.com/nerdyworm/returb" class="inline-onebox" rel="noopener nofollow ugc">GitHub - nerdyworm/returb: Phoenix, Turbolinks, React.js, Redux, Immutable.js example app. · GitHub</a><br>
demo: <a href="https://sleepy-shore-92135.herokuapp.com" rel="noopener nofollow ugc">https://sleepy-shore-92135.herokuapp.com</a> (disclaimer: user editable content on the internets)</p>
<p>Pain Points/Things I haven’t figured out:</p>
<ol>
<li>Mix of html, server side js, and json serialization are required to get everything working in a real app.  Full SPA would only require json.</li>
<li>I’d really like to override the redirect function instead of: <a href="https://github.com/nerdyworm/returb/blob/master/web/turbolinks.ex#L2" class="inline-onebox" rel="noopener nofollow ugc">returb/web/turbolinks.ex at master · nerdyworm/returb · GitHub</a></li>
<li>Turbolinks caching and react components that change state cause some screen flickering.  My current solution is to basically just bust the cache on state changes.</li>
<li>Remote forms are a bit tricky to get right when react.js components are involved.</li>
<li>Flash messages are not working, not sure why.  Probably simple.</li>
<li>You have to go all in with Turbolinks if you have any components that depend on global state.  I actually have not run into this yet, but I can see it happening in a full featured app.</li>
</ol>
<p>I do not have that much experience with React and elixir.  I could be doing it totally wrong.  If I am please help <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>
<p>If there are any questions just ping me and I’ll be happy to help.</p>
<p>Cheers,<br>
Ben</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="8037" 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/turbolinks-with-phoenix/1091/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-8037" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="8037"
                     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="9213" data-post-id="9213">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Any one tried Morphdom?  <a href="https://github.com/patrick-steele-idem/morphdom" class="inline-onebox" rel="noopener nofollow ugc">GitHub - patrick-steele-idem/morphdom: Fast and lightweight DOM diffing/patching (no virtual DOM needed) · GitHub</a></p>
<p>Supposedly simple way to update parts of DOM preserving states like input cursor positions</p>
<p>As described in this well written blog post: <a href="https://0x2a.sh/replacing-react-with-rails-66e25cd23777#.yuwzpcj6m" class="inline-onebox" rel="noopener nofollow ugc">Accelerate your developer workflow | Namespace</a></p>
<p>It feels like I’m seeing more of the “replaced react with traditional rails/turbo-links” type of posts suggesting web-dev is coming round full circle:</p>
<p>Early 2000’s.<br>
Full page refresh is the standard.  Works great.<br>
Sprinkle in a little js.  Works good.<br>
Add more js, jquery mess.  Not so good.<br>
SPA everything.  Explosion of frameworks and tools.  Total confusion, increased development time.<br>
Now:<br>
No more SPA.  Go back to full traditional full page refresh.  Hey, still works great!<br>
Now add back a little js…  <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"><br>
(continue…)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="9213" data-batch-url="/posts/batch_likers">
                        10
                      </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/turbolinks-with-phoenix/1091/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-9213" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="9213"
                     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>
</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/1091/load_more?page=3">Load more posts (17 remaining)</a>
</div></template></turbo-stream>