Laravel Livewire vs Vue vs jQuery: Simple Example

hello guys if i had to pick top five topics that you requested on this channel in the comments top five would be live wire live wire live wire live wire and live wire and at first i was pretty skeptical about any new shiny object tools as i call them but the situation changed with laravel 8 when it came with an optional but pretty well written laravel jet stream which is mentioned in the official documentation and if we open up that jet stream documentation livewire is on the list this made me say okay i will shoot something about livewire so in this video it won't be just introduction to livewire personally i hate the tutorials that use something like full bar as an example like crud like to-do lists like something not in real life let's talk about real-life scenario of contact form and so you would understand the purpose of livewire and why it was built i've created a special project with four versions of the same form so historically how we built the forms back-end only version without any javascript so it's just posting the form then if you want some reactivity then it was jquery so you're doing ajax request to the server with jquery then it was vue.js or any in fact javascript framework like react or angular but vue was popular in laravel community and latest popular tool on the market is livewire so let's see how those four forms are doing the same thing but in a different manner in a different way and you will see the purpose of livewire and practical example the repository for this project will be as usual for free on github so you can check that out and now let's begin so we will have one page with four forms on it and in the route we have one route route get home to home controller index home controller index just returns view home and then inside of that view home first we see a simple form back-end form to the route contact old way without any javascript error validation submit and that's it basically so if we submit the form or try to submit we get the validation errors but if we do fill them i will use fake filler chrome extension we send and then we get email successfully sent which is this session message and on the back end in home controller it is this post contact so post contact in the web it's this one so we're sending the notification and redirecting back with message email successfully sent and the actual email is in mailtrap this is the result of actually sending that notification now let's see how it's done in jquery form number two jquery version has a lot of new classes and ids so same form but we need form id we need jquery success message for height or show that field then some classes like jquery field jquery error message and id with error name or error email and then we need to load that jquery in the main app blade like this so we're loading jquery then we have yield scripts and at the bottom of homeblade we have jquery portion so on form submit we're clearing error messages we're doing ajax call to submit and then based on success or error we are doing some actions like showing this message emptying all the fields and if there is an error we need to check for the code 422 parse the errors and make them visible we used to do something like that or in a similar way like 10 years ago or even 5 years ago and it works really well if we just click send the validation is still going through so if we open up network tab let me show you send ajax request 422 we're parsing the errors but if we fill them in send email successfully send because the latest submit returned to o4 no content which is a different method in home controller there are two methods actually so post contact is for the one that is redirecting back so for the first form all the others will be using this method because it returns just the success fact with 204 code so it's an api call technically it could be even in routes api not in routes web but it works for this simple case so it was jquery version now let's scroll down to vue.js and in ugs we have a component so with vue.js we have app.js resources app.js where you register components so we register contact form and we have our contact form dot view and every view component consists of two things template and javascript and similar to jquery jquery has a lot of classes and ids and for vue we have a lot of if statements so if success v model like class v if errors so similar stuff but in a different syntax and with a more structured way structured because in javascript part we have all those fields as variables so we have data for name email and question then we have the status success or not success and then we have errors so instead of playing with classes and ids and visible and invisible we are playing with variables and their values so submitting the form happens in this method we're clearing the errors we are stating the success as false and then we're doing pretty much the same ajax request as we did in jquery version and if it is successful we are setting the variable to success and then the html part will take care of itself so showing hiding automatically then we'll clear the values of the form fields also form fields will be emptied automatically visually and in case of error again we are assigning the errors and those errors will appear in the form because of the vue.js statements like this one the if so the actual blade file in case of ujs is just loading the component and all the logic for both html and javascript and ajax call is inside of the view component let's test if it works and what it brings us view version we send again submit 422 validation errors we're processing them but to compare with jquery see the difference in jquery we are doing a lot of manual work to parse the errors to identify which key we need which class or which id it's actually easy to make an error here like a typo or something so vue.js is more structured so this is much more pretty code and this is one of the main benefits why use vue.js over jquery and finally finally the hype has built to livewire version using live wire component from the ujs version it's really similar you're loading the component it's just not ujs component but live wire component and livewire as a tool has a goal to offer the same functionality as vue.js but without setting up all the vue.js because to setup vue.js we need to have app.js we need to have component we need to have package.json npm built and all of that so livewire has a goal to make things easier to use live wire component all you need to do is in your terminal go composer require livewire livewire so install backend library no npm needed or anything then you go php artisan make live wire and then your component name and that component creates two files blade file and component file which is pretty similar so that would be template part in vue.js and that would be script part but that script is not in javascript language but instead in php language and with laravel framework functionality and to make it all work in our main app blade we need to add live wire scripts at the bottom and live wire styles at the top and now let's take a look at live wire component it's in resources views live wire contact blade if we compare that to all those three forms before it's a mix of all three so in general it's typical blade so if message that's a blade language validation errors also come like a blade language so a lot of blade syntax with some elements like from vue.js so wire submit prevent is the same as vue.js submit prevent wire modal is the same as v model in vue.js the only difference is that you don't have template here and you don't have any script here basically you don't write any javascript and that's the main benefit the main beauty the main advertised message of livewire so back-end developers stay as back-end developers but have all the reactivity of javascript and that's one part of livewire component another part is the class which goes to app http live wire contact and it's a live wire component which is again pretty similar to vue.js component with all the variables so in contact form view we had data name email question error success all of that in live wire these are variables private variables or public variables of that class and in the blade they are wire model wire model and wire model and then with wire submit prevent we have this and this is the name of the method that is inside of that php class so we have submit form and again here we are playing not with visual stuff we are playing with variables of that class so we're clearing the message we're validating the form and you see it's pure laravel that is also one of the benefits is that you have access to all your beloved laravel functionality without javascript and this validate uses the same array that could be defined in the component itself like rules then we're using the same notification using the variables like this then we clear them up and set the message so if we reload the page and i will show you what is happening so if we don't fill anything we click send we still have those validation errors but the difference is that it's not api call with four to two the final result is contact ajax call which returns all the form so all the html is rendered and returned and shown and if we fill the form we send the email email successfully sent and see there are three calls of that contact so it's calling not only because of submitting the form but any change of any field is actually doing api request ajax request to the live wire to the server and refreshes the values of the fields one time then another time and then we're submitting the form and getting back html so i hope with those four examples you understand why livewire is becoming really popular because the main benefit is if you are laravel developer and haven't switched to vue.js or to any other framework livewire allows you to stay in laravel world but your website becomes reactive as if it would use vue.js or something like that what do you think about livewire do you use it yourself shoot in the comments if it gets even more popular maybe i will shoot another series on live wire or something like that for now i just wanted an overview for you for those who haven't seen that haven't touched that if you want to follow me on this journey of laravel future subscribe to the channel hit the bell icon to be notified of new videos which i shoot almost daily now and see you guys in other videos

Channel: Laravel Daily

Views: 39,219

Keywords:

Id: o0HoP7WzRf0

Length: 11min 22sec (682 seconds)

Published: Tue Sep 22 2020