Filip Ganyicz's banner
Filip Ganyicz's profile picture

Filip Ganyicz

@ganyicz2,032 subscribers

Laravel developer • Working on Flux UI & Blaze @ Livewire

Shorts

This simple trick will make your Livewire apps 10x faster with zero JavaScript 🏎️💨 Whenever you have a selectable element, you might be tempted to write something like this in your classes: {{ $selected ? ‘bg-blue-500’ : ‘’ }} This is very slow, that class will only get added when the server responds. Instead, use an input element with wire:model on it, and add the following class to its parent: has-checked:bg-blue-500 Now the element reacts instantly and doesn’t wait for the server, unlike the first solution. This alone makes your app feel A LOT faster because it gives the user immediate feedback that something happened, even if the page updates 100ms later after the server responds. You can use this trick with various form elements, toggles, checkboxes, etc. Code below 👇

This simple trick will make your Livewire apps 10x faster with zero JavaScript 🏎️💨 Whenever you have a selectable element, you might be tempted to write something like this in your classes: {{ $selected ? ‘bg-blue-500’ : ‘’ }} This is very slow, that class will only get added when the server responds. Instead, use an input element with wire:model on it, and add the following class to its parent: has-checked:bg-blue-500 Now the element reacts instantly and doesn’t wait for the server, unlike the first solution. This alone makes your app feel A LOT faster because it gives the user immediate feedback that something happened, even if the page updates 100ms later after the server responds. You can use this trick with various form elements, toggles, checkboxes, etc. Code below 👇

26,010 次观看

Videos

没有更多内容可加载