Viblo: Livewire version 3: Có gì mới?

Overview

Trước khi tìm hiểu xem Laravel Livewire version 3 có gì mới thì cùng xem lại định nghĩa về Livewire.

Livewire là một full-stack framework cho Laravel giúp việc xây dựng các giao diện động trở nên đơn giản hơn.

Sử dụng Laravel Livewire giúp bạn tạo ra các trang web động mà không cần viết code Javascript. Giảm thiểu sự phụ thuộc vào JavaScript và cho phép bạn tập trung vào việc viết mã PHP.

Cấu trúc mới dựa trên Alpine

Toàn bộ lõi Livewire đã được viết lại.

Lõi mới dựa vào Alpine nhiều hơn, sử dụng Morph, History và các plugin khác, điều đó có nghĩa là Livewire có sự khác biệt tốt hơn, các tính năng có thể được xây dựng nhanh hơn và ít trùng lặp hơn giữa Livewire và Alpine.

Livewire scripts, styles, and Alpine được chèn tự động

Với livewire version 2 bạn phải thêm thủ công @livewireStyles, @livewireScripts, and Alpine vào layout của bạn.

Đối với version 3 chỉ cần thêm nó vào header những thứ bạn cần như sau

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//unpkg.com/alpinejs" defer></script> 
    @livewireStyles
    @livewireScripts
</head>
<body>
    ...
</body>
</html>

Reloading mà không cần phải build lại

Không cần chạy bước build, chỉ cần lưu lại những thay đổi sau đó kiểm tra lại với browser của bạn, nó sẽ không phá vỡ các components' state.

`wire:transition`

Thêm wire:transition vào bất kỳ phần tử nào mà bạn muốn dùng x-transition. Vì wire:transition sử dụng x-transition nên tất cả các thuộc tính như .opacity và .duration cũng sẽ được hỗ trợ.

Viết Javascript function trong PHP classes

Livewire v3 sẽ hỗ trợ viết các hàm JavaScript trực tiếp trong backend Livewire components của bạn.

<?php
 
namespace App\Http\Livewire;
 
class Todos extends \Livewire\Component
{
    /** @prop */
    public $todos;
 
    /** @js  */
    public function clear()
    {
        return <<<'JS'
            this.todo = '';
        JS;
    }
}

<div>
    <input wire:model="todo" />
 
    <button wire:click="clear">Clear</button> 
</div>

Thuộc tính `/** @locked */`

Livewire v3 sẽ hỗ trợ các thuộc tính bị khóa - các thuộc tính không thể cập nhật từ giao diện người dùng. Thêm /** @locked / nhận xét phía trên thuộc tính trên thành phần của bạn và Livewire sẽ đưa ra một ngoại lệ nếu ai đó cố gắng cập nhật thuộc tính đó từ giao diện người dùng.

<?php
 
namespace App\Http\Livewire;
 
class Todos extends \Livewire\Component
{
    /** @locked  */
    public $todos = [];
}

Các request được đưa vào hàng đợi

Trong Livewire v2, nếu bạn có nhiều thành phần sử dụng wire:poll hoặc gửi và lắng nghe các sự kiện, thì mỗi thành phần đó sẽ gửi các yêu cầu riêng biệt đến máy chủ trong mỗi cuộc thăm dò hoặc sự kiện. Trong Livewire v3, có tính năng phân nhóm yêu cầu thông minh để wire:poll, sự kiện, người nghe và lệnh gọi phương thức có thể được nhóm thành một yêu cầu khi có thể, tiết kiệm được nhiều yêu cầu hơn và cải thiện hiệu suất.

Kế thừa

Khi sử dụng các thành phần lồng nhau trong Livewire v2, nếu một thuộc tính trên thành phần mẹ được cập nhật, dữ liệu của thành phần con sẽ không được tự động đồng bộ hóa. Có các cách giải quyết thủ công bằng cách sử dụng sự kiện và trình nghe, nhưng cách này không lý tưởng. Trong Livewire v3, khi bạn truyền một phần dữ liệu cho thành phần con, hãy thêm nhận xét /** @prop */ phía trên thuộc tính trong thành phần con, sau đó cập nhật nó trong thành phần cha, nó sẽ được cập nhật trong thành phần con.

<?php
 
namespace App\Http\Livewire;
 
class TodosCount extends \Livewire\Component
{
    /** @prop */
    public $todos;
 
    public function render()
    {
        return <<<'HTML'
            <div>
                Todos: {{ count($todos) }}
            </div>
        HTML;
    }
}

Thuộc tính `/** @modelable */`

Một điểm khó khăn khác từ Livewire v2 là "mô hình hóa" một thuộc tính từ thành phần cha mẹ sang thành phần con. Giả sử bạn muốn có thành phần <livewire:todo-input /> rất khó để nó tự động cập nhật ở phần tử cha bất cứ khi nào nó được cập nhật ở phần tử con.

Trong Livewire v3, bạn có thể thêm wire:model khi sử dụng thành phần đầu vào, sau đó bên trong thành phần đầu vào thêm nhận xét /** @modelable */ phía trên thuộc tính nơi bạn đang lưu trữ giá trị cho thành phần và Livewire sẽ xử lý phần còn lại.

<?php
 
namespace App\Http\Livewire;
 
class Todos extends \Livewire\Component
{
    public $todo = '';
 
    public $todos = [];
 
    public function add() ...
 
    public function render()
    {
        return <<<'HTML'
            <div>
                <livewire:todo-input wire:model="todo" /> 
                <ul>
                    @foreach ($todo as $todos)
                        <li>{{ $todo }}</li>
                    @endforeach
                </ul>
            </div>
        HTML;
    }
}

<?php
 
namespace App\Http\Livewire;
 
class TodoInput extends \Livewire\Component
{
    /** @modelable  */
    public $value = '';
 
    public function render()
    {
        return <<<'HTML'
            <div>
                <input wire:model="value">
            </div>
        HTML;
    }
}

Truy cập dữ liệu và method của thành phần cha mẹ bằng cách sử dụng `$parent`

Trong Livewire v3, thuộc tính $parent có thể truy cập gọi được các method của lớp cha.

<?php
 
namespace App\Http\Livewire;
 
class TodoInput extends \Livewire\Component
{
    /** @modelable  */
    public $value = '';
 
    public function render()
    {
        return <<<'HTML'
            <div>
                <input
                    wire:model="value"
                    wire:keydown.enter="$parent.add()"
                >
            </div>
        HTML;
    }
}

Thuộc tính `@teleport`

Livewire v3 bao gồm lệnh @teleport Blade mới cho phép bạn "teleport" (dịch chuyển tức thời) một phần được đánh dấu và hiển thị nó thành một phần khác của DOM.

<div>
    <button wire:click="showModal">Show modal</button>
 
    @teleport('#footer')
        <x-modal wire:model="showModal">
            <!-- ... -->
        </x-modal>
    @endteleport
</div>

Lazy components

Nếu bạn có một thành phần mất nhiều thời gian để tải do một số truy vấn tốn kém hoặc được hiển thị trong một trang trình bày không phải lúc nào cũng mở, bạn có thể phải đợi để tải thành phần đó cho đến khi thành phần đó hiển thị trên trang.

Trong Livewire v3, chỉ cần thêm thuộc tính lazy khi hiển thị, Livewire sẽ cho phép bạn tải từng phần các thành phần đó.

<div>
    <button wire:click="showModal">Show modal</button>
 
    @teleport('#footer')
        <x-modal wire:model="showModal">
            <livewire:example-component lazy /> 
        </x-modal>
    @endteleport
</div>

<?php
 
namespace App\Http\Livewire;
 
class ExampleComponent extends \Livewire\Component
{
    public static function placeholder()
    {
        return <<<'HTML'
            <x-spinner />
        >>>
    }
 
    public function render() /** [tl! collapse:7] */
    {
        return <<<'HTML'
            <div>
                Todos: {{ count($todos) }}
            </div>
        HTML;
    }
}

Thuộc tính `wire:navigate`

Trong Livewire v3, bạn sẽ có thể thêm wire:navigate vào bất kỳ html tag nào và khi được nhấp vào, Livewire sẽ tìm nạp trang ở chế độ background, sau đó hoán đổi ra DOM để hiển thị.

Nếu bạn thêm công cụ sửa đổi .prefetch, Livewire sẽ tìm nạp trước nội dung của liên kết ngay khi liên kết được di chuột, khiến nó có cảm giác nhanh hơn nữa!

<a href="/example" wire:navigate.prefetch>Example Page</a>

Thuộc tính `@persist`

Một Blade thực sự thú vị khác mà Livewire v3 bao gồm là @persist. Việc sử dụng @persist kết hợp với wire:navigate sẽ cho phép bạn có các phần trong ứng dụng của mình "persist" qua các thay đổi của trang. Một ví dụ điển hình về chức năng này là trình phát podcast tiếp tục phát trong khi bạn di chuyển trong ứng dụng.

<!DOCTYPE html>
<html lang="en">
<body>
    <x-podcast-header />
 
    <x-podcast-body>
        {{ $slot }}
    </x-podcast-body>
 
    @persist('player')
        <x-podcast-player />
    @endpersist
</body>
</html>

Thiết kế mới của trang web livewire.laravel.com

Cuối cùng nhưng không kém phần quan trọng, trang web và tài liệu Livewire đang có một thiết kế mới!

Livewire 3

Kết.

Hiện tại livewire version 3 đã được release bản chính thức tại sự kiện Laracon tại US vào tháng 7 vừa qua.

Livewire v3 được cấu trúc lại gần như toàn bộ, có vẻ những syntax mới giúp chúng ta ứng dụng các tính năng một cách dể dàng hơn. Hãy thử xây dựng ứng dụng mới với Livewire thôi nào!!!

Tài liệu liên quan

Posts: