2024 laravel conf demo transfer big size to small size.

https://www.youtube.com/watch?v=VmXbw9GU1SU&t=7484s

2:02:00 Start livewire

ListPost.php

    public function render()
    {
        return view('livewire.list-post');
    }

    public function t()
    {
        info('t');
    }

list-post.blade.php

<div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>List Post</h1>
                <div>
                    <button wire:click="t" class="btn btn-primary">T</button>
                </div>
                <div style="height:100px; overflow: auto; margin-top: 30px;">
                    <livewire:all-post />
                </div>

            </div>
        </div>
    </div>
</div>

AllPost.php About 5MB datas

    public $Posts;

    public function mount()
    {
        $this->Posts = collect();

        for ($i = 0; $i < 10000; $i++) {
            $this->Posts->push(collect([
                'title' => 'Post Title ' . $i,
                'content' => 'Post Content ' . $i,
            ]));
        }
    }

    public function render()
    {
        return view('livewire.all-post');
    }

all-post.blade.php

<div>
    <div>
        @foreach ($Posts as $post)
            <div class="card">
                <div class="card-header">
                    {{ $post['title'] }}
                </div>
                <div class="card-body">
                    {{ $post['content'] }}
                </div>
            </div>

        @endforeach
    </div>
</div>

Yes, wire:click again 5MB -> xxK, if use <livewire:all-post />

But usually we need reuse 5MB datas from children, So how to reuse.

Alpine.js

list-post.blade.php

<div x-data="{posts: {}}" >
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>List Post</h1>
                <div>
                    <button wire:click="t" class="btn btn-primary">T</button>
                    <button @click="$wire.$refresh()" class="btn btn-primary">T2</button>
                    <button @click="console.log(posts)">console posts</button>
                    <button @click="console.log(posts[0])">console post</button>
                </div>

                <br>== get posts one post =</br>
                <template x-if="posts[0]">
                    <div>
                        <span x-text="posts[0].title"></span>
                    </div>
                </template>

                <br>-- X-for -</br>
                <div style="height:100px; overflow: auto">
                    <ul>
                        <template x-for="k in posts">
                            <li>
                                <span x-text="k.title"></span>
                            </li>
                        </template>
                    </ul>
                </div>

                <div style="height:100px; overflow: auto; margin-top: 30px;">
                    <livewire:all-post />
                </div>

            </div>
        </div>
    </div>
</div>
  1. add x-data on top
  2. add show data info for check is correct
  3. wire:click=“t” for test wirk:click again, other button just check datas

all-post.blade.php

<div  x-data="" x-init="posts = $wire.Posts;">
    <button @click="posts = $wire.Posts;">console post</button>

    <div>
        <div style="height:100px; overflow: auto">
            <ul>
                <template x-for="k in posts">
                    <li>
                        <span x-text="k.title"></span>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</div>

x-init get Posts –set–> parent x-data posts, then Alpine “x-ooxx” can use posts.
Button just for test.

Now parent posts get children give(set) data info (values).
Click button send network request. Still small size.