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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="cmo" data-post="31" data-topic="30001">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cmo/48/19618_2.png" class="avatar"> cmo:</div>
<blockquote>
<p>Are you hoping that all your posts about how liveview is not up to scratch (and svelte or web components are the best choice) motivates someone to do this for you? And for free?</p>
</blockquote>
</aside>
<p>Your comment is quite out of place and deliberately antogonistic.</p>
<p>If you have actually read my posts I have been experimenting with a number of solutions both within and outside the LiveView ecosystem including live-svelte and  live-elements with various web component libraries as a way to use LiveView and get both acccessibility and polished UI efficiently.</p>
<p>I have been doing this myself not waiting for anyone.</p>
<p>I have  been quite positive in respect to Doggo which may close the gap and ought to be something that gets adopted as a core Phoenix component library to replace  core components which is the biggest eyesore in the Phoenix ecosystem and will continue to hold back Phoenix from being used more widely. It is grossly insufficient, bakes in UI design colours and styles and creates a maintenance issue if you touch it.</p>
<p>I am being vocal about the issues because <em>unless it is recognised</em> that Phoenix needs a headless semantic component UI which focuses on accessibility and keyboard navigation separating theming and CSS frameworks then there is nothing for the community to rally around. No ecosystem for tools, theming and CSS frameworks and web site templates. Missed opportunity.</p>
<p>Based in your feedback and what is available today for LiveView it would appear the nominal expectations on productivity, accessibility and strict adherence to web standards,  keyboard navigation and general UI polish is <strong>not anywhere at the level vs other front end ecosystems.</strong> This is a statement of fact because it is based on evidence, not intended to offend, just to point out the facts as they currently stand.</p>
<p>It is what it is. Whilst LiveView is not there yet, it may get there but right now, when you have to deliver an outcome as I have explained the more traditional route with an API and a JS framework is the only option vs building out everything from scratch.</p>
<p>If the community does not realise it really does need to have to have a viable headless UI component library with accessibility baked into the core, along with theming and style add ons then my prediction is that adoption of LiveView will remain fringe at best and the jobs market will continue to be tumbleweeds for Phoenix developers.</p>
<p>I will be hiring additional developers for both front end and backend work in the new year. I can promise you it will not be Phoenix LiveView developers for front end work <strong>because of low productivity and no viable UI components that meet accessibility standards</strong>.</p>
<p>So to your point, I am not waiting for anyone and I am spending my money to build a development team to solve <strong>customer problems</strong>. I am doing what I need to do, and pessimistically not expecting the community to do anything actually and continue deny the gap exists, make pithy remarks as you and others have done.</p>
<p>I have highlighted the gap and decisions that have led to saying “no thanks” to LiveView <em>for the time being</em>. This does impact the community if it wants to remain viable as others just like me will take a look, and then realise this ain’t ready, and <strong>quietly</strong>  breeze on by.</p>
<p>So there you go, market forces at play, the community just lost some adoption and job market share, and like me others will make the same judgement call based on not solving table stakes problems.</p>
<p>You may disagree but when accessibility is not optional where customers <em>cannot</em> buy your offering and procurement evaluations test for it, then what choice do you have?</p>
<p>Besides any commercial realities it is the morally right thing to provide fair access to those with disabilities, screen readers and other vision related conditions, whilst continuing to ignore it as some kind of “outlier use case” is a big part of the problem. It must and should be considered table stakes for LivewView to survive.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312405" 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/help-me-choose-between-liveview-and-vue/30001/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-312405" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312405"
                     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="312410" data-post-id="312410">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="kokolegorille" data-post="30" data-topic="30001">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/48/4784_2.png" class="avatar"> kokolegorille:</div>
<blockquote>
<p>My dream components are wasm powered web components… It’s completely portable and quick <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>
</blockquote>
</aside>
<p>Absolutely, the future is web components and wasm may open up writing elixir components for the front end. I have my eye on Hologram which I commented on <a href="https://forum.elixirforum.com/t/liveview-serving-web-views-to-browser-and-hybrid-pwa-mobile-app/53809/7" rel="nofollow">here</a> and which could provide a pathway to wasm web components written in elixir via transpilation to wasm via the LLVM based emscripten.</p>
<p>Another option is “just” porting the Erlang VM to target WebAssembly. One possibility is using the zig wasm compiler which can compile zig and C code which Erlang VM is written in. There is also WASI that provides a standardized method for importing libraries such as POSIX compat libraries which could support such a port. Not going to lie that it will be a large bundle for a typical release so direct transpilation of Elxir code is probably the best way forward.</p>
<p>Zig is already making progress with wasm <a href="https://www.fermyon.com/wasm-languages/zig" rel="noopener nofollow ugc">here</a>.</p>
<p>Another possibility which has some impressive POSIX coverage is <a href="https://wasix.org/" rel="noopener nofollow ugc">WASIX</a> which could make an Erlang port to WebAssembly quite feasible.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312410" 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/help-me-choose-between-liveview-and-vue/30001/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-312410" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312410"
                     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>
    <div class="postbit" id="312439" data-post-id="312439">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote quote-modified" data-post="1" data-topic="49531">
  <div class="title">
    <div class="quote-controls"></div>
    <img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leeburk95/48/27319_2.png" class="avatar">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/accessible-liveview-component-libraries/49531" rel="nofollow">Accessible LiveView component libraries?</a> <a class="badge-category__wrapper " href="/c/chat-discussions/chat-discussions/167" rel="nofollow"><span data-category-id="167" style="--category-badge-color: #cca771; --category-badge-text-color: #FFFFFF; --parent-category-badge-color: #cca771;" data-parent-category-id="165" data-drop-close="true" class="badge-category --style-square --has-parent"><span class="badge-category__name">Discussions</span></span></a>
    </div>
  </div>
  <blockquote>
    Someone mentioned <a href="https://petal.build" rel="noopener nofollow ugc">petal.build</a>  in another <a href="https://forum.elixirforum.com/t/is-it-possible-to-make-a-liveview-ui-component-library/48333" rel="nofollow">thread</a>, but it seems accessibility is not their focus. 
It would be great if we have a community backed libraries that take care of accessibility concerns for us. Otherwise, we keep reinventing the wheels when we write html and have to take care of ARIA attributes when using Liveview components. 
In the React.js land, there are <a href="https://chakra-ui.com/" rel="noopener nofollow ugc">Charkra UI</a>, <a href="https://reach.tech/" rel="noopener nofollow ugc">Reach UI</a> libraries that take care of a lot of accessibility issues for us. 
There is no such a thing in Phoenix yet,…
  </blockquote>
</aside>

<p>And follow up from Phoenix author Chris McCord, Aug 2022:</p>
<aside class="quote group-Phoenix-Core-Team" data-username="chrismccord" data-post="2" data-topic="49531" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/chrismccord/48/24233_2.png" class="avatar"><a href="https://forum.elixirforum.com/t/accessible-liveview-component-libraries/49531/2" rel="nofollow">Accessible LiveView component libraries?</a></div>
<blockquote>
<p>not anywhere close to a full library, but LV 0.18 will contain a couple accessible features, such as <code>&lt;.focus_wrap&gt;</code> which allows you to focus wrap any container, and JS commands for focus state, such as <code>JS.push_focus|pop_focus|focus_first</code>. I’ll talk more about these at ElixirConf, but I hope to ship a few more building blocks like this for UI libs. Our code generators will also make use of these for more accessible features out of the box.</p>
</blockquote>
</aside> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312439" 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/help-me-choose-between-liveview-and-vue/30001/34">Post #33</a>
	                </div>
	            </div>
              <div id="likers-container-312439" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312439"
                     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 #33"></div>
  </section>
</div>
    <div class="postbit" id="312637" data-post-id="312637">
  <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>Yes, I’ve read your posts. I don’t see anyone denying that there is no headless UI library for Phoenix. My point is that you’ve identified this gap and are dismayed that someone or some company has not solved this problem for your already. You don’t want to do it yourself, pay for it to be done or pay to use one.  That seems a little entitled to me is all. Considering your stance, the pre-1.0 status and tradeoffs of LiveView, I’m sure you can understand why it is not done yet.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312637" 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/help-me-choose-between-liveview-and-vue/30001/35">Post #34</a>
	                </div>
	            </div>
              <div id="likers-container-312637" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312637"
                     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 #34"></div>
  </section>
</div>
    <div class="postbit" id="312648" data-post-id="312648">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="cmo" data-post="35" data-topic="30001">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cmo/48/19618_2.png" class="avatar"> cmo:</div>
<blockquote>
<p>You don’t want to do it yourself, pay for it to be done or pay to use one. That seems a little entitled to me is all. Considering your stance, the pre-1.0 status and tradeoffs of LiveView, I’m sure you can understand why it is not done yet.</p>
</blockquote>
</aside>
<p>I don’t think you understand to intent of my post. It is about the gap that exists which really does need to be addressed for Phoenix to remain viable in an ecosystem that often must provide accessibility out of the box.</p>
<p>I am <strong>not</strong> complaining that the community hasn’t somehow meet all my needs which you continue to insinuate.</p>
<p>I have been using my own resources to experiment with web components to close the gap and will be providing some sample apps for others to follow if they wish to go down that path also. Thats me, not someone else.</p>
<aside class="quote quote-modified" data-post="1" data-topic="60395">
  <div class="title">
    <div class="quote-controls"></div>
    <img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/a/9d8465/48.png" class="avatar">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/adobe-spectrum-2-web-components-with-liveview/60395" rel="nofollow">Adobe Spectrum 2 web components with LiveView</a> <a class="badge-category__wrapper " href="/c/chat-discussions/chat-discussions/167" rel="nofollow"><span data-category-id="167" style="--category-badge-color: #cca771; --category-badge-text-color: #FFFFFF; --parent-category-badge-color: #cca771;" data-parent-category-id="165" data-drop-close="true" class="badge-category --style-square --has-parent"><span class="badge-category__name">Discussions</span></span></a>
    </div>
  </div>
  <blockquote>
    I was just looking at the new <a href="https://adobe.design/stories/design-for-scale/introducing-spectrum-2" rel="noopener nofollow ugc">Adobe Spectrum 2</a> web components which were released a couple of days ago with an article also on <a href="https://techcrunch.com/2023/12/12/adobe-launches-spectrum-2-a-new-design-system-for-all-of-its-apps/" rel="noopener nofollow ugc">Tech Crunch</a>. 
I have had an initial look and I doubt one will find a more tested and documented web component library that works across browsers and devices. Adobe has made a substantial investment in their design language and tokens with great care for keyboard navigation and accessibility of every component so it strikes me as a solid basis to build framework free web …
  </blockquote>
</aside>

<aside class="quote" data-post="1" data-topic="48304">
  <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">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/using-webcomponents-in-liveview-pros-and-cons/48304" rel="nofollow">Using Webcomponents in LiveView - Pros and Cons</a> <a class="badge-category__wrapper " href="/c/questions-help/questions/53" rel="nofollow"><span data-category-id="53" style="--category-badge-color: #C14BFB; --category-badge-text-color: #000000; --parent-category-badge-color: #C14BFB;" data-parent-category-id="171" data-drop-close="true" class="badge-category --style-square --has-parent" title="Elixir Questions / Help"><span class="badge-category__name">Questions</span></span></a>
    </div>
  </div>
  <blockquote>
    I am considering using <a href="https://shoelace.style/" rel="noopener nofollow ugc">Overview (shoelace.style)</a> for the front-end part of the application. 
Has anyone used web components as part of the LiveView? Will it slowdown the application significantly? Yes - handling forms might be unnecessarily complicated. Any other downsides? Is there any upside?
  </blockquote>
</aside>

<p>So far I have experimented with Shoelace, Adobe Spectrum, and the most recent is Carbon Design System v11 which is by far the best so far and the front runner for a LiveView solution.</p>
<p>Carbon does accessibility very well as the framework has <a href="https://carbondesignsystem.com/guidelines/accessibility/overview/" rel="noopener nofollow ugc">strong design principles</a>.  It also provides the essential navigation elements that all the web components lack.</p>
<p>Carbon web components gets as close to parity with a JS front end that LiveView is likely to get in terms of interactivity and accessibility currently, to the point it would likely be the same choice of components with JS <a href="https://svelte.carbondesignsystem.com/" rel="noopener nofollow ugc">Svelte</a> or <a href="https://carbondesignsystem.com/developing/react-tutorial/overview" rel="noopener nofollow ugc">React</a> or <a href="https://carbondesignsystem.com/developing/vue-tutorial/overview/" rel="noopener nofollow ugc">Vue</a> as well.</p>
<p>I will be sharing a starter project on using Carbon with Liveview.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312648" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/help-me-choose-between-liveview-and-vue/30001/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-312648" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312648"
                     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 #35"></div>
  </section>
</div>
    <div class="postbit" id="312667" data-post-id="312667">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>So I wrote a bunch of <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html" rel="noopener nofollow ugc">LiveView,</a> and <a href="https://surface-ui.org/" rel="noopener nofollow ugc">Surface UI</a><br>
and also kept using React on the side and my impressions recently are that LiveView/Surface really matured over the last few years but - even so - the choice between tech stack to use is not super obvious.</p>
<p>First off, it’s easier to find JavaScript developers, and also pure backend Elixir developers than developers who are comfortable <em>and good</em> doing both front-end and back-end with LiveView/Surface. So that’s a factor you have to take into consideration.</p>
<p>Secondly, if the objective is to reduce the cognitive load on the developer, by reducing the number of moving parts, LiveView/Surface are not exactly doing that, not if you’re building a moderate to big app at least. BTW, this was not the original LiveView use case, the authors originally said it’s not meant to replace complicated JS apps but here we are nevertheless, and often you don’t even know how the app/project will grow in it’s life time. When you write LiveView you have to deal with, and understand, something like the following stack:</p>
<ul>
<li>build system (be it default esbuild, bun or webpack) for JS/hooks compilation, minifying etc.</li>
<li>JavaScript runtime for the Hooks and otherwise JavaScript front-end code you will need</li>
<li>stateless Components life cycle/mounting/usage</li>
<li>stateful Components life cycle/mounting/usage</li>
<li>LiveViews life cycle mounting/usage</li>
<li>message passing between Components of various types, and LiveView and Hooks</li>
<li>ad-hoc JavaScript generation and execution with %JS{} stuff</li>
<li>how the CoreComponents work and how to customize it/change/write your own</li>
<li>how the Phoenix controllers work and how to expose some data through them or maybe API and how to mount LiveViews in it and maybe how to use Components from them</li>
<li>how the layouts work, and when is what rendered, how do you update things like page title and meta tags</li>
<li>how to trigger the navigation and manage the push state from LiveView, how to do something like that from Component, or Controller, and another way to do it from JavaScript Hooks</li>
<li>how the Plug works</li>
<li>how GenServers work and what is the handle_info and the message passing and the queue of messages and blocking and doing the stuff async and recovery from crashes</li>
<li>maybe how the Cowboy handlers work in rescuing from exceptions</li>
<li>how to <em>manage the state on hand</em>, including Cookies and Session state and just the UI state / data from the database, how to load it, keep around, pass betweeh LiveView, Components, Controllers or Plugs</li>
<li>how to build forms that are backed up or not by database tables and how to handle them, how the handling differs between Components and Controllers and LiveView</li>
</ul>
<p>generally, it’s a surprisingly large body of knowledge to both acquire and keep up to date with.</p>
<p>Now if you’re building a React single page app with an Elixir backend, you also end up with a big body of knowledge to acquire and keep up to date with but you get many benefits you do not have with LiveView, like the ability to reach towards numerous UI component libraries, commercials and free alike, use some excellent state management libraries / techniques, which IMHO are really nice since the invention of Hooks (React Hooks, not LV Hooks), use the finest HTTP client libraries, GraphQL libraries (Apollo!) and also push a lot of the CPU cycles and memory away from your servers to your client browsers.</p>
<p>There’s also more stuff you can do, not just complete offline mode, but handling weak/poor/changing network conditions, users suspending/resuming their laptops, or even things like server deployments or Kubernetes cluster rebalancing resulting in state loss/disconnections on LV and with a JS app this can be factored in in a seamless way.</p>
<p>A word about Surface, I actually like it more than pure LiveView. It’s features are leaking to LV too, which is good. It’s got some stub for a good state management with defined properties, data attributes and such, also more React/Web Components like interface when it comes to rendering children. But then you end up having to deal with another layer, on top of LiveView, that sits on top of all the other layers I discussed above and when you use some function it’s like okay where is it coming from and where in the documentation do I have to look for it and it may be in Plug or Phoenix or LiveView or in Surface or some other moving part and there’s just a lot of them.</p>
<p>I dabbled with <a href="https://nextjs.org/" rel="noopener nofollow ugc">Next.js</a> about a 1 year ago exactly this time, around Christmas, and with React Server Components, which are not exactly the same as LiveView and, despite it being JavaScript and then quite buggy (I used the “app structure” that was in alpha/beta) the overall experience was more welcoming. It’s designed top-to-bottom, rather than bottom-to-top, and there’s like one main place for documentation, and the documentation is overall way shorter, there are fewer moving parts to wrap your head around. It’s quite funny, because we’ve been making fun of JavaScript ecosystem being fragmented, but there are also a very programmer-friendly environments there that do reduce the cognitive load of the programmer rather than increase it.</p>
<p>I think a Next.js-like solution for Elixir, maybe one that uses Surface or React as a rendering engine/layer, where the users can forget about the existence of Plug, Controllers and such things because they’re either implementation details and not exposed directly to them or are not used at all would be a step in interesting direction, but I haven’t seen anything like that yet.</p>
<p>There’s also a security consideration: with LV/Surface you end up with more code being executed on the server, with the full privileges of the BEAM process that calls these functions. A bug in either your own code or the code of a library could expose the whole VM and whatever it has access to on the database. A similar bug but on the client-side could end up with single user’s credentials/access to data being compromised more likely than a total hole in the system giving attacker access to everything. I don’t know what are the actual stats on what is actually happening in real life, but the vector of attack is just bigger when all of your functions run with the higher rather than lower privileges and access to data.</p>
<p>I actually don’t have the recommendation for you what to choose. If you go with LiveView/Surface, prepare yourself for having to deal more with a bunch of moving parts, and application state management may not be as clear and obvious as, say, in React with React Hooks or with Mobx or something like that. On the other hand, if you go with a JavaScript app, you have a different set of problems depending on the framework you choose, but will also have to come up with a clean data loading solution and the serialization, deserialization, etc. that will have to happen between the server and the front-end.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312667" data-batch-url="/posts/batch_likers">
                        11
                      </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/help-me-choose-between-liveview-and-vue/30001/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-312667" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312667"
                     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 #36"></div>
  </section>
</div>
    <div class="postbit" id="312682" data-post-id="312682">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="hubertlepicki" data-post="37" data-topic="30001">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hubertlepicki/48/6822_2.png" class="avatar"> hubertlepicki:</div>
<blockquote>
<p>A bug in either your own code or the code of a library could expose the whole VM and whatever it has access to on the database</p>
</blockquote>
</aside>
<p>I think that this is the similar threat level as an HTTP API leaking data, because in a production application you will never run code from an untrusted source, meaning that someone has explicitly written that leaking code at some point.</p>
<p>I agree that liveview is complex, but so is having 2 separate applications written in different frameworks.</p>
<p>The biggest problem I see currently to liveview becoming more abstract and easier to use is the fact that we have to reach for the frontend, the server-side interaction and functionality we have is not enough and most probably will never be.</p>
<p>As liveview gives rendering control to the server, this is a direct tradeoff of things that you cannot do without the server. A simple analogy would be streaming videos from youtube, you don’t have to download entire videos or have storage for that, but without internet connection there are no videos and a slow connection will not be good enough to watch it in realtime. I would also add that liveview is not that different from how a web application behaves comparatively to a native one on a machine. We trade native capabilities for a unified way to render and process things in a single application, adding hooks and JS basically breaks that behavior at the cost of complexity.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312682" 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/help-me-choose-between-liveview-and-vue/30001/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-312682" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312682"
                     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 #37"></div>
  </section>
</div>
    <div class="postbit" id="312683" data-post-id="312683">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="D4no0" data-post="38" data-topic="30001">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/d4no0/48/33624_2.png" class="avatar"> D4no0:</div>
<blockquote>
<p>I agree that liveview is complex, but so is having 2 separate applications written in different frameworks.</p>
</blockquote>
</aside>
<p>Yes, I think the levels of complexity are roughly comparable, just distributed differently.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312683" 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/help-me-choose-between-liveview-and-vue/30001/39">Post #38</a>
	                </div>
	            </div>
              <div id="likers-container-312683" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312683"
                     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 #38"></div>
  </section>
</div>
    <div class="postbit" id="312693" data-post-id="312693">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think Key number 1 is <strong>web components</strong>. These offer the right kind of balance. We can get rich UI experiences in a <em>framework independent</em> manner.</p>
<p>Key number 2 is to use a capable <strong>design system</strong> which provides a comprehensive design language that covers off every conceivable design consideration be it colour, accessibility, navigation, layout, flow, feedback, motion etc.</p>
<p>I’ve been deep diving into the Carbon Design System which offers React, Svelte, Vue, CSS and Web Components. It is a capable design system that I can hang my hat on (more on this later).</p>
<p>In Carbon the JS front ends are all just thin wrappers on the web components. (Key number 1).</p>
<p>I am also following a similar path for LiveView by wrapping components with a thin function component wrapper. I am also toying with automating the Phoenix component wrapper generation by leveraging <a href="https://github.com/webcomponents/custom-elements-manifest" rel="noopener nofollow ugc">CEM - Custom Elements Manifest</a>. CEM provides component metadata such as properties, attributes, events and slots, perfect for generating Phoenix function component wrappers.</p>
<p>So with JS front end and LiveView it is essentially the same <em>complexity</em> thus far but <em>considerably</em> more work on the Phoenix side vs an out of the box experience with JS front end. So the front end JS frameworks win here.</p>
<p>The next part is that a front end requires both a router, an API interface and state manangement which can be quite a chore and a key reason we like to avoid JS front ends.</p>
<p>In a LiveView backend we have a similar chore interfacing with our domain via contexts to fetch and update data but we do get to cut out the middle API layer. Phoenix backend wins here.</p>
<p>The best solution I have seen on the front end is Houdini GraphQL which was developed for Svelte and also recently implemented for React. It unifies the routing,  the state management and API together in a <em>very</em> nice declarative fashion. There is still <em>some</em> effort but it’s a major improvement:</p>
<div class="youtube-onebox lazy-video-container" data-video-id="iRoOhdYuygY" data-video-title="Houdini: A GraphQL-First Application Framework - Alec Aivazis, Arista Networks" data-video-start-time="" data-provider-name="youtube">
  <a href="https://www.youtube.com/watch?v=iRoOhdYuygY" target="_blank" class="video-thumbnail" rel="noopener nofollow ugc">
    <img class="youtube-thumbnail" src="https://img.youtube.com/vi/iRoOhdYuygY/maxresdefault.jpg" title="Houdini: A GraphQL-First Application Framework - Alec Aivazis, Arista Networks" width="690" height="388">
  </a>
</div>

<p>At this point to support the front end you are now dealing with vending a GraphQL interface on the backend instead of LiveView.</p>
<p>In my case I have been experimenting with the Ash framework which streamlines the whole backend development including domain model, querying, actions, schemas, migrations, JsonApi, GraphQL, and an awesome access control policy engine integrated with resource actions and query processing.</p>
<p>The effort for using a JS framework is now a <em>lot less</em> and quite compelling. While I still have some API to describe, I don’t have to build component wrappers or write LiveView glue code to my contexts/domain model.</p>
<p>Given I am adopting the Carbon Design System I have many options for front end JS and server rendered available. I get to leverge IBMs considerable investment in UI research and development along with some incredibly detailed design guidance.</p>
<p>All of this is important for my service as I want others to be able to integrate and ensure their extensions can use whatever front end framework they please, be it Vue, React, Svelte, Angular, Web Components, or just HTML+CSS and still get a consistent look and feel with accessibility plus I can defer to the comprehensive Carbon design guides for the detail.</p>
<p>Carbon is also something that is likely to have traction with it being one of the top UI design systems out there.</p>
<p>The chocies I am making provide flexibility a level of stability and insurance against potential future churn:</p>
<ul>
<li>My backend is based on “modelling the domain and deriving the rest” (Ash) whch makes adding an API like GraphQL low effort and trivial. Either way be it LiveView or an API, it’s basically the same, I have actions being invoked on my Ash resources.</li>
<li>The <strong>design system</strong> for the front end can be implemented server rendered or via front end JS framework with out of the box support for the major frameworks.</li>
</ul>
<p>The design system being agnostic to the technology, allows me to pivot from backend rendered to front end JS using Svelte, Vue or React.  I can also do this without any redesign to the user interface or impacting user  familiarity. I can even do it in an incremental or hybrid fashion converting view by view where it makes sense.</p>
<p>I hope that provides some insights into making these kinds of decisions.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312693" 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/help-me-choose-between-liveview-and-vue/30001/40">Post #39</a>
	                </div>
	            </div>
              <div id="likers-container-312693" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312693"
                     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 #39"></div>
  </section>
</div>
    <div class="postbit" id="312702" data-post-id="312702">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>We started out with Phoenix in the backend and Ember.JS with GraphQL in the front end. When LiveView came out we switched early to it and ripped out Ember completely and dropped all GraphQL endpoints. Our productivity increased a lot and we did never look back. We can only recommend it, but as others said, it depends on you application and probably much more on your architecture.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312702" 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/help-me-choose-between-liveview-and-vue/30001/41">Post #40</a>
	                </div>
	            </div>
              <div id="likers-container-312702" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312702"
                     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 #40"></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/30001/load_more?page=5">Load more posts (21 remaining)</a>
</div></template></turbo-stream>