Livewire Uncovered
Livewire can often feel like magic. Somehow, you're able to write interactive web applications using only PHP? How? Well, in this series, we're going to uncover the magic together by building a simplified version of Livewire from scratch.
Aside from being plain entertaining, this exercise will arm you with deep Livewire knowledge that will help you build and debug your apps in your daily life. Let's dive in!
Series episodes
Getting Started (3)
Series Introduction
5m 25sGet started by building a basic Livewire component to understand its features and set clear goals before creating your own version from scratch.
Starting From Scratch
9m 48sBuild your own Livewire replacement from scratch by removing the package and rendering the initial page for a fully custom Laravel counter component.
Refactoring Our Work
7m 12sRefactor your code with clean structure and helpful improvements to set a solid foundation for the rest of the series. Write better, organized Laravel apps!
Building the Core (5)
Storing a Snapshot
10m 33sLearn how to store Livewire component snapshots in JavaScript to keep state live and sync seamlessly with the server before each user interaction.
Triggering a Server Round-Trip
9m 49sMaster triggering server round-trips with JavaScript to handle interactions and update your Livewire counter component seamlessly and efficiently.
Handling a Request
9m 59sLearn how to handle requests by recreating Livewire components in PHP, updating HTML dynamically, and enhancing your app’s interactivity step-by-step.
Complete the Round Trip
9m 19sComplete the round trip by using backend data to update your component’s HTML with JavaScript, creating dynamic and responsive user interfaces effortlessly.
Intelligently Updating the Page
9m 2sLearn how to intelligently update only necessary parts of your page in Livewire, improving performance and user experience without full HTML replacements.
Adding More Features (4)
Build a To-Do Component
4m 27sBuild a simple To-Do component in Livewire to explore powerful features like wire:model. Learn hands-on how to create dynamic, interactive Laravel apps easily.
Supporting wire:model
17m 46sMaster Livewire’s wire:model for seamless data binding between components and inputs. Understand its core to build dynamic, reactive Laravel apps with ease.
Lifecycle Hooks
4m 53sLearn how Livewire’s lifecycle hooks like mount and updated let you customize component setup and updates with ease. Boost your app’s interactivity today!
Supporting Complex Component Properties
10m 37sExplore how to support complex component properties like Eloquent Models and Laravel Collections in Livewire, enhancing your app’s flexibility and power.
Wrapping Up (2)
Hacking Livewire
14m 9sDiscover how vulnerable your Livewire app can be and learn to secure it. Identify risks, fix security holes, and protect your database effectively in this video.
Comparison With the Real Livewire
16m 44sCompare your Livewire version with the real one side-by-side. Gain clear insights to better understand, inspect, and contribute to the Livewire codebase.
