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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>not a bad idea - not at all;</p>
<p>but all I initially wanted - was to afford the user some “hangers” / wrappers to apply their classes (and attributes) to, and perhaps offer Surface <span class="mention">@click</span> effects - but my stupid decision to attach a screendump of one of the Tailwind<strong>UI</strong> designs totally sidetracked this entire idea;</p>
<p>guess I’ll just <em>crawl back to my little stone in Detroit</em> (Beverly Hills Cop) <img src="https://forum.elixirforum.com/images/emoji/apple/grinning_face_with_smiling_eyes.png?v=15" title=":grinning_face_with_smiling_eyes:" class="emoji" alt=":grinning_face_with_smiling_eyes:" 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="228647" 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/surface-vs-liveview/40655/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-228647" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228647"
                     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 #21"></div>
  </section>
</div>
    <div class="postbit" id="228724" data-post-id="228724">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>The problem you’ll have there is that there is no tailwind UI npm package. Well there is one called that but it’s deprecated by tailwindcss 2.</p>
<p>The idea of a Surface tailwind was discussed <a href="https://github.com/surface-ui/surface_tailwind/issues/1" rel="noopener nofollow ugc">on GitHub</a> previously.</p>
<p>You can go ahead and make your own component library (like <a href="http://tailkit.com" rel="noopener nofollow ugc">tailkit.com</a>) for Surface but you gotta make it without looking at your tailwind UI purchase for inspiration <img src="https://forum.elixirforum.com/images/emoji/apple/angel.png?v=15" title=":angel:" class="emoji" alt=":angel:" 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="228724" 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/surface-vs-liveview/40655/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-228724" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228724"
                     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 #22"></div>
  </section>
</div>
    <div class="postbit" id="229514" data-post-id="229514">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/msaraiva" rel="nofollow">@msaraiva</a> Phoenix Component with Slots is released with LiveView 0.17.  LiveView calls them Function Components - and - encourages to group multiple components into one module. The reason given is reduction of compilation time. Instead of 100 modules - it is better to have 10 modules with 10 function components each. However, in Surface, we adopt one module per component. Though Surface provides a lot more features and DX  - For simple stateless components - what is the best possible way forward? Writing Function Components and using them in Surface or going ahead with Surface.Component?<br>
Not that I am handling a very big project where compilation time is a concern - it is just to pick your mind on the Future of Stateless Components in both LiveView and Surface!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229514" 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/surface-vs-liveview/40655/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-229514" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229514"
                     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 #23"></div>
  </section>
</div>
    <div class="postbit" id="229515" data-post-id="229515">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="cvkmohan" data-post="24" data-topic="40655">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/48/39944_2.png" class="avatar"> cvkmohan:</div>
<blockquote>
<p>The reason given is reduction of compilation time. Instead of 100 modules - it is better to have 10 modules with 10 function components each.</p>
</blockquote>
</aside>
<p>Why? I’d imagine most of the time the compiler is working on the templates, and it is the same amount of template one way or the other. If anything, large amount of smaller modules can be compiled in parallel, so it should favor smaller modules?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229515" 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/surface-vs-liveview/40655/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-229515" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229515"
                     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 #24"></div>
  </section>
</div>
    <div class="postbit" id="229521" data-post-id="229521">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>It is typically best to group related functions into a single module, as opposed to having many modules with a single <code>render/1</code> function.<br>
From <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html" rel="noopener nofollow ugc">https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html</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="229521" 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/surface-vs-liveview/40655/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-229521" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229521"
                     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 #25"></div>
  </section>
</div>
    <div class="postbit" id="229525" data-post-id="229525">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I don’t find any mentioning of reduction of compilation time there.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229525" 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/surface-vs-liveview/40655/27">Post #26</a>
	                </div>
	            </div>
              <div id="likers-container-229525" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229525"
                     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 #26"></div>
  </section>
</div>
    <div class="postbit" id="229555" data-post-id="229555">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Generally speaking compiling a module with 100 functions will be faster than compiling 100 modules with one function each. This is very easy to verify yourself and you can try locally. The multiple modules version is 80-90% slower in my quick experiment. And if we are talking about a project, each module is likely a separate file, so there are more disk reads, more mtime checks, etc.</p>
<p>That said, I don’t think folks should generally be worried about creating modules and files. But if most of your modules are single file functions, it may be that you are having the wrong abstraction.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229555" 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/surface-vs-liveview/40655/28">Post #27</a>
	                </div>
	            </div>
              <div id="likers-container-229555" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229555"
                     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="229750" data-post-id="229750">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="msaraiva" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/msaraiva/120/1214_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  msaraiva
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Broadway Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="cvkmohan" data-post="24" data-topic="40655">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/48/39944_2.png" class="avatar"> cvkmohan:</div>
<blockquote>
<p>For simple stateless components - what is the best possible way forward? Writing Function Components and using them in Surface or going ahead with Surface.Component?</p>
</blockquote>
</aside>
<p>Until we have a declarative API for LV (which we’re already working on), if you want compile-time checks and use features like named slots or context, you need to define a module as vanilla function components do not provide any metadata required for those features.</p>
<p>So my take for now is to define modules for larger components with many of props/data/slots (where compile-time checks are more valuable) and vanilla function components for either private or smaller/simpler components.</p>
<p>Regarding slots, the next version of Surface will replace its original custom slot implementation for the recently introduced built-in slots, so this is not going to be an issue anymore and as soon as we have a unified declarative API, there will be no more limitations as all metadata we need for most (or maybe all) of the other features will also be available.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229750" 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/surface-vs-liveview/40655/29">Post #28</a>
	                </div>
	            </div>
              <div id="likers-container-229750" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229750"
                     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">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>