Basic Phoenix example not working without Javascript

Phoenix Forum Questions / Help
,
1

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?

2

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
3

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