Source: calebporzio.com

How Livewire works (a deep dive)

Category: Laravel, Laravel, PHP, PHP, nodejs, nodejs, javascript, javascript

It’s as if your front-end HTML can call your PHP code and everything just works.

Let me show you what’s going on: For this writeup, we’re going to use the example of a simple counter component.

In this simple case, the @livewire('counter') directive compiles down to code that looks like this: echo \Livewire\Livewire::mount('counter')->html(); Before we dig into what’s happening in mount() we’ll just stay outside and look at the result of that call: As you can see, Livewire renders the component as you’d expect, but it also pumps the HTML with lots of metadata for its own internal purposes.

The final stage of initialization is for Livewire to walk through all the DOM nodes in a component and look for any Livewire attributes.

Before we move onto that, a quick review of where we are: We have HTML on the page that looks like this: And in memory, JavaScript has an instance of the Component class with all the data we need about this Livewire component.
Newsletter

Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week

Fathom Analytics | Fast, simple and privacy-focused website analytics. Fathom Analytics | Fast, simple and privacy-focused website analytics.
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future. Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners