Basic Phoenix example not working without Javascript

Hi everyone, I’m new to Elixir & Phoenix and loved the experience so far. However, when looking into Phoenix it seems like the standard way to work with buttons is <%= button "Click me" %> , which creates a tag, and adds data- attributes. Then there’s an onClick listener in app.js that creates a form, injects the attributes and submits it.

I must say I’m somewhat disappointed that because of this the page doesn’t work without Javascript + I was surprised that app.js weighs 632kB uncompressed.

Is this a common problem that all Phoenix apps have? Or do people use something else? Or maybe I’m just missing something?

You could not use buttons outside of forms. Then you don’t need the JS and your website will work without JS. Also phoenix_html.js, which defines what you described, is tiny (<3kB uncompressed): phoenix_html/phoenix_html.js at master · phoenixframework/phoenix_html · GitHub

phoenix.js is much larger because it’s powering the client side part of phoenix channels. If you’re not using channels on the client you should be fine to exclude phoenix.js.

1 Like

Thanks for your answer and pointing me to phoenix_html.js!

I understand that it would not work outside of forms, my suggestion would rather be to wrap the button with a form right in the template as HTML, not with JS after page load. Is there a reason why Phoenix decided to do it with JS?

This is the way some newer JS frameworks like Remix do it, getting the benefits of a progressive UX - as in everything works without JS from the first load, then it gets enhanced.

It might not be a big deal, but I believe these things could matter to other people like me who came to Phoenix after getting tired of the JS drama. T