Hacker News Reader

Comment by ecmascript | Hacker News Reader

The trick is to use liveview for data that needs to come from the server anyway. I'd guess that the OP did use it for everything, like popups etc and did not do the same with hotwire.

View on HN

So what's the recommended approach for doing it without liveview in the liveview world? jquery? just document.addEventListener?

That's what hotwire gives you: an opinionated approach and a golden path to do things in a manageable way.

You can use alpine.js. There is even a way to integrate it with LV: https://dockyard.com/blog/2020/12/21/optimizing-user-experie...

<button @mouseenter.once=" fetch('/dropdown-partial.html') .then(response => response.text()) .then(html => { $refs.dropdown.innerHTML = html }) " @click="open = true" >Show Dropdown</button>

Seriously? This has to be a joke.

I was stumped when I saw it just now. What the heck...I guess the next thing, an amazing breakthrough, is going to be Alpine.scss style="background-color:$red-secondary;font-weight:bold"

I don't use alpine, but isn't that the blessed way of doing it in React/Vue/etc? I thought they were the ones introducing both @handlers on elements and JSX styling

Maybe, except in React you have a huge community, formatters, linters, editors, testing tools/libraries and an overall architecture for doing things. Alpine seems worse than just using jQuery. I'd prefer to use something like Unpoly before using this monstrosity.

Then don't use it, no one is forcing you man. Just because it is not for you doesn't mean its bad or that other people can't have use for it.

You don't really need to use alpine either if you use Phoenix with Liveview, you can probably get away with just using vanilla js if all you really need is some small functionality of modals popping up etc.

why would you load the dropdown HTML separately, just render it along in the template with x-show="open" and have the @click="open=true"?

This is an example from their docs. That's why.

There's the so-called "PETAL" stack these days: Phoenix, Elixir, Tailwind.css, Alpine.js, LiveView. In that scenario, you use Alpine.js for the frontend-only stuff.

Reply on news.ycombinator.com