ajur58
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?
Most Liked
LostKobrakai
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/priv/static/phoenix_html.js at main · 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.
Last Post!
ajur58
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
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"