Ready to get started?

Join Adocasts+ for $8/mo or sign into your account to get access to all of our lessons.

EdgeJS Components #2.0

A Look At Component Reactivity

In this lesson, we'll take a look at how we'll approach reactivity within our EdgeJS components using AlpineJS. We'll also briefly discuss where the line between EdgeJS and AlpineJS is, in terms of our component state and reactivity.

Although EdgeJS Components draw inspiration from popular front-end frameworks like Vue and Svelte, it’s important to remember that it’s a back-end rendered template engine and can’t replicate all of the principals of the front-end ecosystem.

EdgeJS & Reactivity

The primary principal EdgeJS can’t replicate is reactivity. In front-end applications reactivity allows us to dynamically update the DOM based on state and is usually maintained by one or two way data binding. This works for front-end applications because the state can be maintained client-side in the browser.

With EdgeJS, this becomes difficult to manage because by the time our server-rendered HTML hits the browser EdgeJS has already done it’s job and is out of the picture.

For more advanced components we could reach for a package like HTMX, Hotwire, or Unpoly to allow EdgeJS to become reactive to some extent by utilizing HTML of the wire; which is just a fancy term for sending an API request and getting back new server-rendered HTML in our response.

Ready to get started?

Join Adocasts+ for $8/mo or sign into your account to get access to all of our lessons.

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.