Laravel Livewire vs. React/Svelte/Vue (Inertia)
Вставка
- Опубліковано 11 вер 2024
- I have a lot of thoughts when it comes to React/Svelte/Vue/Inertia vs. Livewire. Why does it seem like I only use Livewire in my projects and demos? What are the benefits? What are the disadvantages? Which one should you choose? Why do you love Livewire so much? Why do you talk so much?
Well... there's a reason. In this video I share one of my spicier takes.
Keep creating.
Help me choose my next video:
cir.re/suggest
Links
---------------------
Inertia: inertiajs.com/
Livewire: livewire.larav...
MingleJS: minglejs.unite...
---
📹 *Watch My VSCode Setup Video:* • My Minimal and Beautif...
🎓 *Make VSCode Awesome - Caleb Porzio's Course (support me with this link):* gumroad.com/a/...
I love that you’re not afraid to admit that you like Livewire over Inertia. I couldn’t agree more.
Keep these awesome videos coming 🎉
For small projects, it's fine to work in a single file, but as your project grows, you'll start to appreciate the benefits of separating concerns.
I totally agree with you. I use Livewire instead of React, even though I know React might be more powerful.
As far as Volt is concerned, it depends on your team's approach and what kind of code style they go with. Don't forget, Livewire 3 uses a Volt-based style.
I love Livewire, and I wish the community would allow us to use it with core PHP.
Hello. I am using jquery to handle some request and thing of learning livewire. Can you please tell me do I need to know filament with livewire or ut is fine to use livewire without it. What you suggest, what do you recommend. Thank you.
Hello, you can use jQuery without Livewire or filament. I am wondering why don't you use Livewire instead of jQuery?
Thanks for the great content!
Thank you for watching. ☺️
I default to React + Breeze only because of Shadcn and zustand
Love it! There you go. Choose that (great choice) and keep creating. :)
I hope you get to try out Artisan UI
It's a shadcn alternative for laravel
Or you could try laravel luvi
Great video! Out of curiosity, what recording software do you use?
Are you sure that updates with livewire are server side rendered? I was assuming there was a json protocol that embedded Eloquent objects in each request to hydrate the component.
EDIT: I tested myself on a new project the only thing from the response that is serialized is the model with namespace and IDs. It's fully server side rendered.
refer docs
@@Blandezuat link would be nice, but I tested myself on a new project the only thing from the response that is serialized is the model with namespace and IDs. It's fully server side rendered.
@@dru284 yes its server side and under the hood it uses ajax reqs as well for viceverca communication. So you can call it bidirectional but its main heart lies on server side
Thank you for testing it out yourself. I love that you did that. Because I would have done the same thing too to make sure I was explaining it best.
But I think I meant when I said it was server side rendered that you know that any information you send to the page as well as any methods that you call can't be modified on the client.
If I change a variable with a Livewire method, that variable is changed on the server.
You still do have to be careful that you are only accepting input from the client that you expect to be changed on the server. I have a video or two about Livewire security that I think is incredibly beneficial in this area.
But more me it's a balance of having the file colocated but then also having distinct separation between client and server so I know exactly when something is happening on the server and when it's not. It fits best in my mind. ☺️
(But please let me know if something else doesn't make sense and I'll make a full video on it!)
In my experience, the blottleneck of the Livewire stack is the network overhead (I host in US but my users are located in Brazil), and how long it takes for complex pages to be interactive due to Alpine having to go through each element in the page document.
I use the Inertia stack with React, and you're right about its challenges (too much action-specific controllers, caring about what goes to the client, etc). It's been almost 3 years since I started using it and I've learned to deal with most of those challenges elegantly.
This video made me look at my app and question myself if I it has enough interactivity to justify using React. Maybe it's time I give Livewire another try, and be a happier dev? Who knows...
Thank you for sharing. I don’t have much experience having to deal with that network bottleneck or having to rethink how Alpine loads.
Maybe give it a try if you haven’t built much with V3 and wire:navigate and such. But I love that you’ve stuck and built with Inertia. Thats what it’s all about. ☺️
In my current job, I’m stuck using Python Django. Even after learning Django, I'd still pick Laravel any day. But when it comes to Livewire vs. Inertia + a JS front end, I’d go with Inertia for sure.
My concern with livrewire is that i dont know what it's capable of. I'm well immersed in client/server style, I know exactly how to build everything I can imagine cause the separation is clear. I always ask myself if livewire is capable to do everything i could do before. Still wondering btw.
The Laravel stack is pretty cool and the most dev-friendly I have used, but I still can't find many job opportunities like other stacks (Java, .NET, JS, etc.). When searching for jobs on Linkedin the difference is enormous compared with different stacks :/
My biggest difficulty when moving to laravel>inertia>react is passing data to components (like a layout or a navbar for example). Right now for my navbar I have opened an API endpoint on my laravel backend and I'm feetching all the categories/subcategories (it's an ecommerce type website) with axios and then populating the react component. I think you can do something similar with inertia share and persistent layouts(? not sure tho). Point being something that's been taken for granted in nextJS is all the sudden more difficult. However I'll take those trade-offs over the trade-offs of nextJS any day of the week. Having websockets,auth queues and scheduled tasks out of the box is just too good compared to doing it all manually on nextJS/ node.
I use Livewire on simpler apps that involves some reactivity. But for apps that involves a lot of complexity and reactivity, I have to use inertia. I have tried to get Livewire to work in scenarios where I would normally use Inertia, but I find myself either waiting for a network response to do an action or writing a lot of alpine js. There are pros and cons for both approaches sides but this is what works for me.
You’re right! You do have to dive into Alpine a lot if you are wanting to keep things on the client as much as possible.
For me, I love it since then it helps me focus on what should be on the server and what should be on the client. It’s clearer lines while also being not totally separated.
But in the end, build with what makes sense and works for you. I love it! ☺️
Livewire is getting all the cool packages like Filament while Inertia is kinda being left behind, I still use it but I wish it has more compatible tools.
Ok this is what I have asked couple of weeks ago. You can delete this to do. Really appreciate. This is good and really helpful video. ❤
Bro I will like you make content on alpine Ajax please
I'll have to do some more about it. Be sure to check out the other video for some things I learned diving into it a little bit, but there's definitely more to learn. :)
@@joshcirre thanks you bro I think it have a lot of potential
having to create a new controller and model is probally the best about laravel / php development and makes things so much better. i cant look at code where all is cramped in 1 file
The Livewire promise is exactly what I dream of, will it disappoint me?
both are amazing, and very similar ... i mean litterally @click directive works both in vue and alpine 😂
I have work with laravel livewire. first it was good for small project but we started to get lots of request we are moving to vuejs and laravel api
I learnt laravel. Now I want to learn the frontend framework, which should I learn Livewire or React or Vue?
research the job market in your area. Identify which is offered the most.
Just learn Vue and apply to a React job oder umgekehrt. This way you'll learn both 🎉
Livewire has single request limit and it's crazy until you hit production,
that's why people say Livewire is slow.
Thats totally wrong
@@MarkSnape i had a component which has multiple reactive parts and i can't make multiple requests from a single component,
I needed to divide that into small components for me to make it performant and efficient,
i couldn't find any documentation where livewire allows multiple network requests in single component.
Thank you for believing!
When I tried Inertia + React for the first time a long time ago, I directly fell in love with it. However, after watching this video, I still feel very excited! Love this community 🫶
Without a doubt the thing to do is build; if you want to do it at the speed of light laravel + volt is Flash
I'm really looking forward to Flux. To me it's the last missing piece for Livewire to be the choice for any project I want to do.
Could you demonstrate why? Asking out of curiosity.
@@leon_srdLeon, probably because it will be the official Ui livewire components from the creator of livewire.
@@leon_srd JavaScript component libraries are much more complete and pretty these days. Having access to a component library like ShadCn/Radix has been enough of a pull for me to choose react over livewire every time. I’m hoping flux will change that.
Thanks for answering 🙂
Hello. I don't know much English but I'll try to explain
I just discovered a problem in Livewire that I haven't been able to solve.
From a component X I call a function that executes a query to a model that has an external connection.
That call can take 5 seconds or 5 minutes or up to 3 hours, depending on the number of records in the external model
If a user executes that action locally it blocks other users and only allows requests when the query ends
Any idea why it blocks other users? Please
it will block other users if you dont have enough php workers. Php artisan serve is single threaded so everything stops until the request is completed
@@MarkSnape thanks =)
I clicked this video because I want to find reasons to use inertia and Vue, not livewire, because I could use my JS/TS/Vue skills
what about performace..
You should hear properly to josh. He said it depends on your project. What u want to use. And with time you figure out what to use
I don't think performance suffers compared to React/Vue/Svelte. If anything, you'll know more immediately what you can "lazily" load because everything is server rendered on first load.
I think (for me) it helps me think through performance better. Because I'm constantly thinking... "Does this need to interact with the server in order to change this variable?" If not, then I'll just do it all in AlpineJS. ☺️
people get a bad perspective of Livewire when they think that it should do every DOM manipulation for them (because it can). Think of it more like a way to get data to/from the front end without writing both ends of an API
probably laravel + vue is better because of UI things such as vuetify or radix vue
When a Laravel developer tries to sneak into the JavaScript ecosystem, mimicking the syntax and styles, but keeps getting tangled up with Livewire and Inertia-still refusing to let go of PHP
I disagree, I prefer inertia