Caleb Porzio "Livewire 3" - Laracon US 2023 Nashville

In this highly-anticipated session, "Livewire 3," Caleb Porzio unveils the latest iteration of Livewire. As the creator of Livewire, Porzio introduces developers to the exciting new features and enhancements in Livewire 3, showcasing how it elevates the development of interactive, dynamic web applications.
With practical demonstrations and insightful examples, get a firsthand look at how Livewire 3 simplifies frontend development without compromising on the backend robustness of Laravel.
Whether you are a seasoned Livewire user or new to the framework, this talk offers a unique opportunity to discover the cutting-edge capabilities of Livewire 3 and witness its potential in shaping the future of web development.
Recorded Live at Marathon Music Works on July 19th, 2023.

[@TitoBenjamon]

🎯 Key Takeaways for quick navigation: 00:00 🚀 Caleb Porzio introduces Livewire 3, built on Alpine.js, with improved page updates and request bundling. 05:49 📖 Revamped Livewire documentation now offers better design, code examples, and explanations. 08:06 🌐 "wire:navigate" in Livewire 3 enables faster page transitions without full reloads. 11:20 ✍️ "wire:submit" simplifies form handling and optimizes network requests. 13:30 🔄 Enhanced "wire:model" offers real-time updates and compatibility with "x-model." 16:30 🧙 New "JS" attribute enables server-side execution of JavaScript actions. 19:28 🎉 PHP 8.1 attributes are integrated into Livewire 3 for customizing component behavior. Made with HARPA AI

[@fran.sancisco]

First time in my live I applauded something, at home, looking at the computer.

[@davimenezes2424]

same with prompts

[@rajeshjha3681]

Its really good to see the backend frameworks taking charge of frontend development.

[@kaibe5241]

They're really not. Else they'd be actually taking charge, rather than the massive adoption of the various front-end frameworks.

[@JavedURRehman]

Livewire V3 is amazing, great work Caleb Porzio.

[@neverything]

The talk was wonderful to see and the new features are just mind-blowing. Thanks a lot for all the hard work everyone put into this.

[@kaibe5241]

Yup. He's basically fixed all the reasons why I gave up on Livewire 2. And now I'm happily back :D

[@_timestamp]

- [00:00] 🚀 Introduction to Livewire 3 - Caleb Porzio's journey in improving Livewire, - Livewire version 3 as a major rewrite, - Transition to using Alpine as the frontend framework. - [02:04] 🔌 Alpine Integration - Livewire version 3's integration with Alpine.js, - Automatic inclusion of Alpine and its plugins, - Simplified layout file with Alpine integration. - [03:15] 🔄 Morphdom Enhancements - Morphdom as Livewire's page update mechanism, - Challenges with backend conditionals in V2, - Morphdom improvements in V3, eliminating the need for "wire:key." - [04:40] 📦 Request Bundling - Bundling network requests for improved performance, - Addressing multiple component updates in a single request, - Enabling features like component nesting. - [05:49] 📖 Documentation Overhaul - Revamped Livewire documentation for better usability, - In-depth explanations, code examples, and tips, - A comprehensive guide to understanding Livewire internals. - [07:23] 💻 Live Coding and Wire Models - Introduction to wire models in Livewire 3, - Wire models being asynchronous and efficient, - Simplified two-way data binding with wire models. - [08:46] 🌐 SPA Mode with Wire Navigate - Introducing "wire:navigate" for single-page application (SPA) mode, - Eliminating full page reloads for improved user experience, - Enhancing performance by minimizing network requests. - [10:36] 🧩 Building Modals and JavaScript Integration - Executing JavaScript directly from the server with "JS" in Livewire 3, - Creating custom JavaScript macros for various actions, - Integrating third-party libraries like SweetAlert and adding interactivity. - [16:30] 🏗 PHP Attributes and Co-location - Introduction to PHP attributes in Livewire 3, - Co-locating behavior with properties using PHP attributes, - Custom attributes like "locked" for property locking. - [21:03] 🧬 Livewire Component Life Cycle - Livewire components can hook into various parts of their life cycle. - Components can hook into mounting, updating, rendering, and more. - [23:05] 🌐 Livewire Attributes - Livewire introduces attributes that can be applied to HTML elements. - Attributes allow components to interact with the DOM and other functionality. - Attributes can be used to perform actions like real-time validation. - [26:11] 📝 Form Objects - Form objects are introduced to extract and manage form-related properties in a Livewire component. - Form objects help organize and simplify code for forms in Livewire components. - [30:05] 🔄 Nested Livewire Components - Livewire V3 improves the interaction between nested components. - Components can interact with each other more seamlessly using `$parent` and `$wire` directives. - [34:52] 💬 Real-Time Streaming Responses - Livewire introduces the ability to stream real-time responses from the server to the client. - Streaming responses allow for dynamic updates without requiring full page reloads. - [38:01] 🛠 Wiretap: Livewire Devtools - Wiretap is a set of developer tools for Livewire. - It provides insights into component state, network requests, and even offers hot reloading. - Wiretap enhances debugging and development with Livewire. - [41:46] 🚀 Livewire V3 Launch - The speaker announces the launch of Livewire V3 during the presentation. - Users can upgrade to this new version with additional support from the Livewire team.

[@onnewf9288]

Caleb is amazing public speaker , And Livewire 3 is just 🔥🔥🔥

[@gavinmurambadoro]

Laravel really has a lot of developer experience. This is an awesome framework indeed...

[@kaibe5241]

Caleb's approach is awesome - that opening point about reaching out and finding out what was wrong from a potential user, is exactly how people should approach business. Smart dude. Livewire 2 fell short for me personally in a lot of ways, but Livewire 3 is absolutely fantastic.

[@mnoquiao]

Almost all of the new and updated features are super powerful!

[@peterfogarty6699]

Superb! Congratulations to Caleb and team.

[@orphikk]

I love you Caleb! You have been the motivation to dive deeper into Laravel universe!

[@erhanurgun]

Laravel is on an incredible path. Every innovation makes me jump out of my seat. I think I fall in love with Laravel more and more with every Laracon 😇😍❤

[@taslimsuman]

I was waiting for the navigate feature. Finally it's here.

[@fE2y3UKF]

Amazing stuff. Excited to try this now!

[@victorjohnukam3331]

Thank you for the good works, Caleb.

[@7ala9at]

I didn't pay attention to the time, the time I watched this wonderful video passed quickly, really amazing V3

[@dkvadratu]

Amazing 🎉 great presentation and the launch at the end was exciting and fast 💨 Can’t wait to read docs and start/upgrade some project with all these awesome features. 👨‍💻 respect to Caleb ✌️

[@EnriqueChavezWeb]

I can't wait to test it. Really great job.

[@SeanFoushee]

Fantastic work and a terrific presentation! I've been looking forward to this release and can't wait to begin using it on my next project.

[@francescoleto2823]

Awesome Caleb... Awesome!!

[@danielmiller7346]

Wow! Caleb rocks it again!

[@eloircasas3827]

Amazing update, love it!

[@momodjah-low6944]

Amazing!! wow ready to dive in Livewire!

[@timwang7239]

Well done, exciting progress, thank you guys for your efforts🙏

[@TahirBhai]

Simply super awesome

[@fabrizziomorenor.6495]

Nice Work! 👏👏👏

[@Atz22]

Amazing been waiting for V3 since announced 😊

[@iammuttaqi]

Livewire will be a game changer for php developers...

[@jasonsuryafaylim4745]

I don't have enough vocabularies to properly express how impressive this framework is.

[@sodomousprime]

How are you getting the component, is it a package or some sort of custom namespaced components?

[@devhammed]

Putting a Blade file in resources/views/components will automatically make it available like that so resources/views/components/icon.blade.php makes it available as .

[@sodomousprime]

@@devhammed Thank you for the reply, that would not give you the ability to access different icons like he does with the double colon then the icon title. It looks to be some sort of component that is namespaced as "icon" giving him the ability to call "", that is what I am trying to figure out.

[@xeisu_com]

@@sodomousprime did you find out?

[@sodomousprime]

@@xeisu_com No I haven't, I would love to know exactly how he did it, specifically this implementation. The docs are not super clear on how to do the custom namespace.

[@aeapyps]

What an enjoying talk!

[@m7moudabdel7mid]

WOW, i think alex now should reconsider, all the issues in livewire that i can think of has been fixed neatly and even more cool stuff has been added, this is amazing.

[@jamzykimani]

Sold.🎉🎉🎉.... awesome stuff👍

[@th3ja]

Simply amazing 🔥

[@victoryefekpogua2821]

Amazing job Caleb 🎉

[@medcharrafi]

it's super amazing version

[@icantchosemyname]

They are doing an incredible job, bravo 👏🏾👏🏾👏🏾

[@AtomCoder]

Incredible 🎉🎉🎉🎉

[@camiant]

such an amazing job, caleb! 👍🏻💪

[@khizer3528]

Great work

[@sineld]

This guys is crazy. Thanks Caleb.

[@rob_castro]

Just amazing.

[@Tortuex_]

is this a comedy show or a features presentation? because god damn that was funny ahahah, loved it

[@ashrafjefrizin4630]

Damnnnnnnn, Livewire 3 🔥🔥🔥

[@shabxs]

Caleb ......👍👍👍

[@BilalKhan-zn9we]

superb you are on fire mate

[@berbagimadani]

Amazing livewire3 ❤

[@rizkyanfasafarrasmada7225]

Amazingggg 🔥🔥🔥

[@jamesmarx]

Nice dude! this is sick!

[@nonefvnfvnjnjnjevjenjvonej3384]

As a long time Rails fan it has been really interesting seeing how the business focused minds of the Laravel community is starting to pull in front of the Rails stuff because people make money off of it.

[@RomainBertolucci]

Congrats showman !

[@Trucidare]

Honestly at this point I think the only thing is missing is IDE type check tooling on the blade templates to make sure that the variables it's using are actually defined

[@r1konTheAutomator]

14:10 - yooooo 🎉

[@miguelgd1985]

amazing 🎉

[@此刻此时]

Looks great, I used 2 and then went on to write vue, now I'm willing to try it again and see, thanks to the author.

[@immortal_code]

aku disini. jujur keren banget 3 ini. memudahkan

[@mnoquiao]

Porzio ♥

[@mityukov]

Gosh! Now I desperately want to update my big laravel 8 project to the latest version just to have those new Livewire features 😂

[@wadecodez]

when are slots coming to livewire?

[@SEOng-gs7lj]

what is the admin panel being used?

[@_timestamp]

Mindblowing!

[@ivanjelenic5627]

Mind = blown

[@santiagos4290]

Great!!

[@yungifez]

Jeez this is too good

[@JustinWilliams-f1v]

EPIC!

[@martins-ecke]

Amazeballs!!!

[@stay_high_]

Laravel is Awesome 🎉

[@HiighSky]

🎉

[@iammuttaqi]

Finally!!

[@imdanielmartinez]

stream with just pure rest without websocket is mindboggling. wow

[@rin.k]

Does anyone know how he integrated that AI thing, would love to know how.

[@adnanjojo]

awesome

[@eramitgupta271]

"Select All" Checkbox in Livewire And "Unselected" or component update how ?

[@piusijachi2763]

Is livewire/wiretap live 38:52

[@piusijachi2763]

Can't seem to get it

[@davidcamarda871]

March 2024, not seeing it

[@rocketdf6641]

Very cool bro...

[@luckyplaya84x]

why is there no docs about wire:stream

[@flutterquickdemo2468]

Livewire rocks

[@rickybarabba7866]

Alex Garret-Smith switched to Inertia ;)

[@r1konTheAutomator]

Caleb is one if the coolest people and best coders i know, but I still giggle when he says "Lie Berries" 😂

[@name_less227]

Fuck ya!! Game changer.

[@yasnaderi1484]

Just WOW

[@phoenixedge4049]

I’ve been torn on building my next app in Svelte or the TALL stack. After this video, TALL stack it is. Livewire v3 fixes all my gripes about v2

[@imlian]

Who stayed until "Form objetcs for everyone" 🤣

[@r1konTheAutomator]

16:40 - WHY is nobody clapping?!

[@jafo8798]

Could you release the source code for Chad or at least show us the streaming part?

[@ricko13]

lol Caleb is cra-zy 😜

[@fran.sancisco]

This is PHP on cocaine.

[@abitme]

I'm still waiting for HMR in livewire 3 💀

[@reactoranime]

How the Chad::ask component works?

[@nm6x]

funny dude, not gonna lie...

[@thekwoka4707]

the PHP is pretty ugly, but damn that featureset looks good.

[@andrews4379]

Awfully stack, not readable.. even if you want use microfrontend

[@karlmarxmanzano]