Phoenix LiveView Info

debouncing will be part of the initial release for the delay/throttling of events

@chrismccord, 2 questions:

1. Any plans for a LiveView linter (so that not everything appears green)? Would be nice to have.

2. One place where React struggles is when one wants an event in a child component to “bubble up” to its parent. Basically, one needs to pass an action function (with a captured reference to the parent’s state).

   Alternatively, one can use Phoenix Channels (using channel events for actions–instead of REST–and setting channel event listeners throughout one’s component hierarchy, which can each modify their respective state in a unique way).

   Now with Phoenix LiveView, a new possibility is introduced: component message-passing.

   Because each component’s state is really just a process with some event handlers, if something happens in one component, just as it can send itself an event (as in your blog post’s examples), it could send an event to another component’s state process.

   In order to make these processes accessible, it would be easiest to register each with a name.

   Is that possible, and WDYT of this potential design pattern?

Do you mean for syntax highlighting? That would be editor dependent. Here’s my emacs highlighting with mmm-mode:

55%20PM1378×480 42.1 KB

generic html.leex files are also supported like any other html.eex file.

wrt to messaging passing, you can use registry with the view’s unique ID to messaging b/w parent and children views. We don’t register them by default, but it would be a couple LOC to do it yourself. We’re going to wait a bit with messaging since it’s not clear what the best approach is. For example, ad-hoc messaging b/w react components is known to scale poorly architecture wise, but LiveView’s will likely be less complex so it may be fine.

Do you know of any open source examples that use Unpoly? It’s a pretty big library, but there’s really not too many tutorials written on their official site.

I wonder if there’s a way to only pull in a tiny aspect of it, although going by their docs, I’m not even sure what aspect I would use to pull in ajax content. I guess ajax.accel, but it’s also tagged as experimental.

I started working on a lightweight lib to do what LiveView does except without a dependency on Pheonix, because simply cannot wait for LiveView code to be posted to github, if anyone interested check it out GitHub - vans163/morphling: Server driven DOM morphing library. Never write Javascript again. · GitHub (forum thread)

ATM I wanna ask how LiveView does the DOM diffing on the server side? Its actually quite challenging to figure out how to send the differential between 2 binaries.

What tutorials are you needing? Unpoly.js is very piecemeal, only use what you need, and all the features have great documentation. If any of the documentation is lacking then I’d assume telling them on their github repo would be best, but I’ve never had an issue with the documentation as it seems quite comprehensive?

It’s an older style library sadly, not built using modern modules, though it looks like they are slowly moving that way.

I can’t find any information on the ~L sigil used here. Is this LiveView-specific? Where does it come from and what does it do?

Right, I wouldn’t want to bring in a 109kb library (the minified unpoly JS size on github) just for a few ajax calls since I imagine most of my other things (like video progress tracking, search autocomplete, etc.) could be done with liveview?

Sounds like you are a usecase to make PR’s to them. ^.^

Probably not haha. Unpoly is a massive ball of coffeescript and I already hate JS enough as it is.

I will have to use something though because liveview isn’t looking like a good fit to transmit 10kb+ of html between browsing tabs.