Livewire VS Vue.js: Practical Example of Dependent Dropdowns

hello guys today let's make an experiment and do the same thing in larval livewire versus vue.js so i've created two identical forms in livewire and view.js for both classical examples of dependent dropdowns of country city so when you choose a country then the list of cities is refreshed and then the same thing with vue.js it is identical visually so if you choose a country again the city but the code is totally different and let's compare livewire and vue.js for the same thing generally what is the structure of the components and maybe for those of you who are undecided which one to start learning or for those of you who want to maybe switch from livewire to vue.js or vice versa this video can be a demo example of simple concepts and help you to choose so drop downs dependent drop downs historically what we did back in the days like 15 years ago i've found some examples with plain javascript i remember back in the day we were hard coding the values in the javascript variables and then do something like this so on change of subject select then processing the options of another javascript object like this so this is an example from really old days then it got a bit better with jquery so same thing hard coded values but this time in selects directly so fruits and like banana orange and stuff like that and then there's javascript or jquery code on change of one select we just filter the options for another select and changing the html things got even better with ajax when people started loading the second drop down from the server and this is another example of that with jquery so get the state is the function of jquery which makes the ajax request to get the state by country and then the main thing is this so we're reloading html of the second drop down based on the values that we get from the server and i remember doing things with jquery like this for a very long time until things changed into like modern era of javascript frameworks and full stack development where first vue.js appeared on the screen alongside react and angular but vue.js is kind of more popular in laravel community that's why i'm talking about viewing this video and also livewire came pretty recently and challenged the whole thing of how to do this drop down thing so now i will show you the code of live wire versus vue so step by step the code of the project the code by the way will be available on github i will link that in the description of this video so we have two routes for live wire version and view version in the live wire version we have only route view for both actually we don't have any controllers and if we go to live wire blade here is just html with live wire loaded as component called company so for example we're adding the company of country and city and maybe more fields here and to enable live wire to work in the main blade we need to add live wire styles live wire scripts and of course we need to install that in the composer json so you need to run compose a require live wire live wire like this so this is the setup and then inside of that companies that component consists of two files so you run the command php autosum livewire make companies or make livewire companies and then it generates something like this so component of wire which is actually pretty similar to any laravel controller so you have the public variables then mount is the same as constructor in laravel controller or any php class then render shows the blade live wire companies which we will get in a minute and then a few more methods here but basically we're working with laravel or php language and this is more suitable for back-end developers historically who don't really want to dive into javascript world with npm compilations assets and all of that they can just continue working with live wire so what is happening here the mount is setting up the values the initial values for the components so we get country all for the drop down of these countries and then the city list by default is empty collection then we render the live wire companies so the blade file of resources views live wire companies blade it's a general laravel blade there's nothing different from general laravel blade with all the html and all the syntax like this one so for each of the cities we continue working with laravel language so we don't really need to learn much new except for binding the select values like this so wire model country is the syntax to bind the country value to the public property of the component so whenever that country is changed there is a method called updated country or updated any value then we just load the cities from the database so we don't do any specific api call to the server or ajax request we just again work with laravel language with eloquent and get the values that we need and after this the render method is called automatically so refreshes the whole thing that whole component behind the scenes so whenever i click this actually this part is re-rendered from the server the whole html you cannot really see that in the browser visually but you would probably see some delay if the form was really really big and then when that form is refreshed now this cities has the value of getting the cities from the countries and now in the blade this for each already has values of the city and then you can bind the whole form to a method of store company for example wire submit there's wire submit prevent it would be the same as prevent default in javascript and then in store company you can just create the company with the values of the drop down so name city country and others i didn't even implement that in this repository so this is just as an example what you can do so basically you operate with the same php and laravel values the syntax is almost identical to the validator of laravel and you don't need to learn any javascript for that so that's the beauty of livewire and now let's take a look at the view version the view version starts with the same thing so route view to the blade file and if we open view blade it's a typical html4 full page and inside of that html we have a component so this is the same logic in live wire you have at live wire something in the view js you load the component which i called contricity and then at the bottom there's another difference you need to load the script off app.js which you didn't have to do in live wire but this is kind of the same as you would do live wire styles live wire scripts so this is the syntax for the vue.js now for vue.js to work you need to add the package json thing so dependencies for view and maybe some view more libraries if you use something else around that and then you need to fill in the resources js app.js file you need to register the component which is like country city which is the same as this name and you need to create the component in your folder of resources.js components and then you can call it whatever you want so countrycity.view for example if we open that countrycity.view it consists of two parts the template which is html so in live wirecase it would be the blade file and then at the bottom you have script with all the logic of what should happen with variables so these are roughly the same variables as you saw in livewire component as public properties in the component with php language it's kind of the same with javascript but with loading the api request the ajax request from the server instead of assigning the variables in constructor we're immediately doing the api call and remember in livewire there was a mount method so it's pretty similar here mounted we get api call to countries and assign this countries which is defined in here as empty array by default we assign that to the response from the server so there is a specific api call api route and i will get to that in a minute and also method get cities is loading the country cities by country id and then assigning the result to the cities variable and assigning the selected city to the first of those results which is this so you fill in cities and selected city here and in the template the live wire had wire model vue.js has v model as you can see v model selected country and then v on change get cities which we saw just now also options are loaded with v4 so it's the same as four each in the blade and the cities are also loaded with v4 cities so this variable is the same as script part this one and then there's also the model for selected city so what i'm getting to it's the same thing but with a bit syntax difference probably the only two major differences is that vue.js has api and api is in the controllers is app http controllers cities controller for example it could be stored as a separate app http controllers api cities controller maybe it could be more technically correct and then in routes api file we have route get to countries and resource to the city's controller so those two api calls and if we go to for example cities controller we use api resources to get the cities and return only id and name of the city so we transform the result from the api request so that's one major difference you have a separate api call from the vue.js to api and another major difference is the compilation part so in live wire you don't need to compile anything you just write the live wire code as in php code as in laravel in blade and you just save the file and it works immediately in the vue.js case you need to recompile that thing in the view blade so this js app.js is compiled from all the javascript assets when you run npm run dev or npm run watch if you want to do it on the fly so basically all your javascript needs compilation so these are two major architectural differences when choosing live wire versus vue.js or any other in fact javascript framework ask yourself do you need the separation of front-end and back-end and in many cases it makes sense to have like front-end team so if you have front-enders on your team and backhanders so back-enders take care of the api and front-enders write only vue.js code so in that setup it makes sense to use view over live wire but if you have one developer on the team or on that specific feature who knows the live wire better and doesn't want to dig deeper into vue.js or javascript or compilation then use livewire also vue.js is a better approach if you have api which could be reusable so we created that list of countries a list of cities what if you have a mobile app in the future or maybe even now you could reuse the same api requests api endpoints to get the list of cities for the mobile app in case of live wire if you have live wire and you have a mobile app you would still need to create that api endpoints manually so that's another reason towards vue.js over live wire but generally what i've seen while talking to you guys online on twitter and in youtube comments there are two camps of people vue.js and api approach is praised by people who are more historically full stack developers or even front-end developers with some laravel experience or people who are working with a separate teams of front-enders and back-enders bigger corporations bigger teams bigger projects separations of concern separation of work makes sense and livewire is praised mostly by laravel developers who don't know much of javascript or don't like it that much and just want to continue working with laravel language to achieve some dynamic results and they are usually either solo developers or working with a very small team or they are assigned the task to complete alone so they don't have a front-ender or backhander in their disposal they just need to complete the mission the function and live wires kind of like extended version of the same thing so these are my thoughts with a practical example on live wire versus vue what do you think do you agree or disagree i'm not totally right all the times in fact recently i get quite a lot of criticism if i post something wrong post some tip without context which seemed like a bad practice so i'm totally happy to receive your comments discuss maybe fix something that i published which is not ideal so be active in the comments and let's discuss livewire versus vue.js what do you think and if you want to support my mission of these daily videos of course you can subscribe to the channel and help my mission of 100k subscribers which will give me the silver play button from youtube and also support me financially by checking out one of the three products that you can see on the screen now quick admin panel generator which actually has live wire version and vue.js version with api then live market set of components and 20 courses on my teachable account see you guys in other videos

Channel: Laravel Daily

Views: 13,874

Keywords:

Id: ZJo1LNxeVRI

Length: 13min 40sec (820 seconds)

Published: Wed Jul 14 2021