Thread by @Zubairmohsin33

Next up we have @calebporzio talking about @LaravelLivewire and @Alpine_JS

Thread 🧵

of Livewire. Woah!

Show the small things, instead of big things.

Shoutout to @TransistorFM and @noplanstomerge

Laravel Frog, like Laravel Forge 😂

4 areas of app that are too static and we'll make them alive using Livewire.

Select one dropdown, next dropdown should be filtered.

Faking a slow query on this page to optimize it later.

Deploy button is 4th.

A vanilla Laravel project will be converted to LiveWire project.

( Not sure I will be able to keep up with this )

Starting point 👇

Work with only two inputs, select elements. Not the whole form.

Public property two-way binding in Livewire component.

Hiding the second select before there's any selection on first one.

When user made a selection on first one, show filtered options on the second one.

This is a common pattern.

Next he's converting Restart button to Livewire component.

--inline option will make it inline with Heredoc syntax.

Pass $server into the component. and receive it as public property.

Hot tip: Death to boilerplate. We can remove the mount() method. Livewire intelligently discover the property 🤯

Restart method on click of Restart button.

.prevent to prevent it from bubbling up.

restart() method is simply sleep(2);

Buttons belong in forms. Listen to submit instead of click.

Livewire will automatically disable inputs and buttons inside that form. 🤯

Let's add loading to these buttons.

wire:loading binding will automatically toggle elements, classes. It's pretty amazing!

Livewire can be used only for "one" button. Give it a try. Encouragements.

Goal: Improve Chart

Create Livewire component

More improvements with placeholder loading on chart.

wire:poll to live reload the data for chart.

poll can send many requests to server which can affect performance

you can specify second along with wire:poll to make interval bigger

Livewire supports Laravel Echo out of the box.

4th and last thing is to make this Deploy button Live-wirey.

livewire:rm to remove the component.

Component for Deploy button.

Show Deploying on Deploy during the whole process, which means, until job is finished.

unless in blade instead of if

How does the frontend know that backend has finished something?

Conditional wire:poll in @LaravelLivewire 🤯

Not entirely sure how its working but demo was pretty awesome!

This is Livewire folks!

#Laravel

Livewire can be used to augment your vanilla Laravel apps and not build whole app with Livewire ( although you should ) 😅😅

Now he's selling his stuff 😅 check it out.

LARACON coupon code: 25% off.

makevscodeawesome.com

#Laravel

@Alpine_JS v3 is coming soon. @calebporzio is re-writing it.

End of @calebporzio 's talk.

Great talk man! Great stuff happening with Livewire and Apline.js