Livewire and Alpine JS, the best allies 2
I think it is important to emphasize this a little bit again and that is why we are looking at Alpine JS in this section; to know what JetStream would be, which are the two layers that they offer us to work with JetStream Livewire and Inertia. I am going to start a little bit here from Laravel Inertia, which in this case seems a little easier to understand.
Laravel Inertia
Laravel Inertia is basically Laravel Inertia with some added layers that allow us to use Vue directly, that is, render Vue instead of a Blade file. It's that simple. Otherwise, on the one hand, we have Laravel on the server and on the other hand, the Vue client with all its benefits or the advantages it can have in certain developments.
Laravel Livewire
If we compare them with using Blade, which is what we have in Livewire, the hardware is a little more complicated, since we have Laravel again, things don't change much, although in Inertia we use the controllers, we use components, what I call vitaminized components, which is what we have seen throughout the course, so far everything is fine. The complication, to put it in some way, comes a little from the client part. In the client we have Blade, I don't mean Blade directly, obviously it would be PHP and that would be on the server, but when it is rendered, that is, when we already have the pile of v-for and the rest, all the logic there, when it is being returned directly to the client, we already have everything rendered, we already have an HTML, but whatever it may be, we can compare the Blade part a little with the client.
So as Blade is precisely something more than the entire server, that is, linked to Laravel, then here to also take advantage of all the benefits that Livewire allows us, such as the use of the reactivity that we have for the properties that we define for components, to give an example, then we need some framework that helps us in all this and obviously it does not make sense to use Vue since we are also using Blade, then Vi would be a bit big for it and in the end it would be a bit redundant because we already have a framework in this case Inertia that allows the use of Vue React among other similar ones, so that is why I suppose that the Laravel team decided to use a framework as simple as a pin, which seems to me to be a fairly wise decision for what was mentioned in the io of this course, since it is a fairly simple framework and therefore it feels little invasive, they simply accompany it and precisely because of the modularity that View has, a fairly good modularity since one of the characteristics that we have in Vue, I am talking about Vue, I am aware of that is that it is not so invasive if you compare it with other frameworks such as React or Angular, in which you have to develop the entire page, for example, this entire page in those technologies in Vue, you can simply say, look, I want this little box over here to have Vue, the rest can have something else, and well, something similar happens, but it's a little more flexible still, since you can have your page perfectly in HTML with whatever you want, and you can decide which block you want to use, as I showed you here and also showed you here in a fragment of the book.
<html>
<body>
<div x-data="{ header:false }">
Abrir un modal
</div>
***
<div x-data="{ fieldText:" Pon tu nombre" }">
Manejar un formulario
</div>
***
<div x-data="{ open:false }">
Abrir un modal
</div>
</body>
</html>You can decide, I want this block, notice that this is a page, I want this block to be an Alpine component and in turn, and this is where it gains flexibility if we compare it with Vue, I want that in that same component, on that same page, on that same blat, whatever, over here we are going to have another little thing that I am going to do with Alpine js, then it is even more flexible than what View would allow, so apart from being a simple, small framework, it is a good candidate and a good companion to work with Livewire, but as they say in practical terms it feels a little more complicated because we already have several things, we already have what are the components on the server, the part of the server layer, as I was telling you, we also have Blade, we also have Alpine, and not satisfied with that, we also have a layer there, which is the Wire object, for example, in which it allows us, as they say, to still get a little more juice out of what is the communication between what is the server with what is the client, it is that simple since, as we saw before, we can share properties to be able to synchronize them and a lot of other things that we have seen throughout of the course and as I told you we didn't see it because well they are a little abstract already to know but we have that communication there which is a point or a difference or an advantage that we have fundamentally if we compare Livewire with inertia which is precisely that here we have better communication, better adaptation, a better match there so to speak between what would be the client with the server, understand that we can have there an almost bidirectional communication, that is to say the changes that happen in the client we can have them on the server with all the advantages that this can bring us and vice versa, something that we don't have when we are using inertia since in the end the only advantage we could say that we have when using the arabel inertia is that we are not directly returning a component a page in Blade if we are not returning a component in Vue but for the rest we don't have that bidirectional communication, that is to say in both directions that we have between the server layer and the client, then clarified that a little that I have already mentioned throughout the course but it seemed important to me again to mention it at this point to as who says finish settling the ideas Let's continue with the next class.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter