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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="GenericJam" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/GenericJam/120/15495_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  GenericJam
                      <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>Sorry. That’s the wrong syntax. This is what’s working ‘so far’ but the planned syntax is below.</p>
<p>The actual syntax is very much inspired by LiveView / LVN. It was part of my goal that existing LVN code could go straight across with minor changes although I’m not bending over backwards to make that happen.</p>
<p>LVN did a lot of work on the layout and styling so I’m intending to copy what works well there and otherwise adapt it.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule HelloScreen do
  use Mob.Screen

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :greeting, "Hello, Mob!")}
  end

  def render(assigns) do
    ~M"""
    &lt;.column padding={16}&gt;
      &lt;.text size={24}&gt;&lt;%= @greeting %&gt;&lt;/.text&gt;
    &lt;/.column&gt;
    """
  end
end
</code></pre>
<p>I also have ‘planned’, although this may be pie in the sky thinking, that there will be a ‘common path’ approach that does close to the desired result on both platforms and a native ios / android only syntax and also a pass through syntax like sql snippets which is ‘trust me bro’ code. Hopefully this is the most robust way that developers can always deliver to the intended platform without waiting for the library to catch up.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386491" 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/mob-native-beam-elixir-on-native-mobile/74924/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-386491" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386491"
                     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="386492" data-post-id="386492">
  <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 actually prefer plain data structure instead of sigils pretending to be some knid of pesudo-HTML. Plain data structure, if designed properly, is quite readable and much easier to refactor.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def render(assigns) do
    {:column, {:text, assigns.greeting, size: 24}, padding: 16}
end
</code></pre>
<p>Ideas:</p>
<ul>
<li>use tagged tuple for elements. elements are 3-tuples (tag, children, prop} or 2 tuples {tag, children}</li>
<li>put prop last, as a keyword list</li>
<li>auto-promote bare element to list of elements for children</li>
<li>allow bare string as a element</li>
</ul>
<p>It is fairly easy to implement the above and make this relaxed AST easy to write.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386492" 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/mob-native-beam-elixir-on-native-mobile/74924/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-386492" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386492"
                     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="386494" data-post-id="386494">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That makes more sense now.</p>
<p>I think I understand your “heavy” point as: if the BEAM is already embedded locally, then adding a Phoenix endpoint + LiveView transport layer on top can feel like extra machinery compared with just sending events into local Elixir processes and driving native UI more directly.</p>
<p>That part seems fair.</p>
<p>I’m not shipping a separate browser runtime. On Android/desktop I’m reusing the platform’s built-in WebView/browser surface, so part of the tradeoff for me is that I get to reuse existing system components rather than owning a full native widget abstraction myself.</p>
<p>Still I think the distinction is a bit goal-dependent. If the goal is maximum reuse of the existing Phoenix/LiveView model, those layers are not wasted. If the goal is the thinnest possible local-native runtime, then they probably are.</p>
<p>I explored a similar direction myself: a small Rust project that defines a typed JSON UI schema + reducer/runtime, then renders that into Jetpack Compose over JNI. I actually liked that style a lot.</p>
<p>What I’m still not convinced about is the long-term maintenance boundary.</p>
<p>Here is a short video of the wrapper experiment:<br>
<a href="https://streamable.com/r6q3ld" rel="noopener nofollow ugc">https://streamable.com/r6q3ld</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="386494" 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/mob-native-beam-elixir-on-native-mobile/74924/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-386494" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386494"
                     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="386497" data-post-id="386497">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="GenericJam" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/GenericJam/120/15495_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  GenericJam
                      <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>So the other issue with reusing LiveView + Webview is that your app looks like a website now. This is an uphill battle that React Native has been fighting for a long time and I’m not sure they’re any closer. There are sets of libraries that look like native buttons, etc. but those can change per Android / iOS version so you’re still out of sync. They also have various attempts at tying into ‘actual native’ elements.</p>
<p>If you just want to build an app and are not trying to satisfy designers that want native feel then this approach can be fine. I think also the market penetration of React Native and cousins that are presenting a non native looking app is mostly accepted by the average users but some will actually notice the difference.</p>
<p>There was also a ton of effort put into making things like lists as performant on RN as they are native. By piggybacking on the system we get this for free essentially although there may be a bit of work down the line to do things like streaming to lists like LiveView does. That being said we are 90% of the way there just by using the system utils.</p>
<p>The shortest path for me is to just ride what the native OS is already delivering and work with that. This is very akin to the spirit of what LiveView is already doing combined with the general pragmatism that the device itself has to have processing power as network connections may not be good enough to support remote server access like LiveView is doing.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386497" 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/mob-native-beam-elixir-on-native-mobile/74924/27">Post #26</a>
	                </div>
	            </div>
              <div id="likers-container-386497" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386497"
                     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="386501" data-post-id="386501">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Nice.</p>
<aside class="quote no-group" data-username="GenericJam" data-post="24" data-topic="74924">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/genericjam/48/15495_2.png" class="avatar"> GenericJam:</div>
<blockquote>
<p><code>&lt;%= @greeting %&gt;</code></p>
</blockquote>
</aside>
<p>This would be much nicer as <code>{@greeting}</code>. I think the <code>&lt;%=</code> are an artifact of the initial phoenix templating approach. It’s a bit odd to me that they exist even with the recent move to curly braces. I think they should have been eliminated at that point for consistency across the board.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386501" 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/mob-native-beam-elixir-on-native-mobile/74924/28">Post #27</a>
	                </div>
	            </div>
              <div id="likers-container-386501" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386501"
                     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 #27"></div>
  </section>
</div>
    <div class="postbit" id="386511" data-post-id="386511">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="GenericJam" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/GenericJam/120/15495_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  GenericJam
                      <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>Agreed. I’ll update my plan.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386511" 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/mob-native-beam-elixir-on-native-mobile/74924/29">Post #28</a>
	                </div>
	            </div>
              <div id="likers-container-386511" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386511"
                     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 #28"></div>
  </section>
</div>
    <div class="postbit" id="386514" data-post-id="386514">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is truly awesome to see! I gave up running  BEAM in Iphone after some time.  Android worked fine. Used Scenic for UX: <a href="https://github.com/borodark/probnik" class="inline-onebox" rel="noopener nofollow ugc">GitHub - borodark/probnik · GitHub</a> Claude was a great help. OpenGL is opening new UX boundary but I am not qualified to design one.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386514" 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/mob-native-beam-elixir-on-native-mobile/74924/30">Post #29</a>
	                </div>
	            </div>
              <div id="likers-container-386514" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386514"
                     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 #29"></div>
  </section>
</div>
    <div class="postbit" id="386516" data-post-id="386516">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="GenericJam" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/GenericJam/120/15495_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  GenericJam
                      <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>Scenic is another interesting path. You would access it via NIF and have to implement some sort of interaction method on your own. I briefly considered this for this framework but I don’t want to build out the whole interaction system when there is already native available and native is what people normally want.</p>
<p>This highlights another interesting aspect that would be in the fantasy future for this framework which would be for high performance things like mobile games where you dedicate the bulk of the app to the game running as a NIF and then you have 1000s of processes (or however many you need) servicing all the network requests and other events happening in the game.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386516" 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/mob-native-beam-elixir-on-native-mobile/74924/31">Post #30</a>
	                </div>
	            </div>
              <div id="likers-container-386516" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386516"
                     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 #30"></div>
  </section>
</div>
    <div class="postbit" id="386521" data-post-id="386521">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I played around a bit more and translated my Rust → Jetpack Compose schema experiment into Elixir via NIF.</p>
<p>Fun stuff, but staying in the “experiment” bucket for now.</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://ibb.co/v6q6myKT">
  <header class="source">
      <img src="https://simgbb.com/images/favicon.png" class="site-icon" alt="" width="300" height="300">

      <a href="https://ibb.co/v6q6myKT" target="_blank" rel="noopener nofollow ugc">ImgBB</a>
  </header>

  <article class="onebox-body">
    <img width="180" height="180" src="https://i.ibb.co/v6q6myKT/image.png" class="thumbnail onebox-avatar" alt="">

<h3><a href="https://ibb.co/v6q6myKT" target="_blank" rel="noopener nofollow ugc">image hosted at ImgBB</a></h3>

  <p>Image image hosted on ImgBB</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="386521" 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/mob-native-beam-elixir-on-native-mobile/74924/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-386521" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386521"
                     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 #31"></div>
  </section>
</div>
    <div class="postbit" id="386687" data-post-id="386687">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just a side comment from my niche perspective. This coupled with the iroh nif opens up a wealth of possibilities. &lt;3 I love the idea.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386687" 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/mob-native-beam-elixir-on-native-mobile/74924/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-386687" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386687"
                     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 #32"></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/74924/load_more?page=4">Load more posts</a>
</div></template></turbo-stream>