Vue Inertia + Laravel Course. 1/17: What is Inertia and Why You Need It

hello guys welcome to my new experiment starting from today i decided to release the full my newest course about inertia vue.js and laravel here on youtube lesson by lesson so this course that you can see on my teachable which is available if you go to laravel daily.teachable.com the newest one view inertia plus laravel 9 here on youtube for the next two or three weeks you will see all that course lesson by lesson every day the only differences are two differences first you need to wait for a day to receive the next lesson instead if you want to have all the course you go and purchase that and also if you purchase the course you will get access to the repository of the code i will not publish the repository here on youtube so you may still want to purchase the full course or subscribe to yearly membership and important thing in a few days i'm raising the prices for yearly membership so if you're watching this video before 31st of march 2022 the price is 99 per year for all the courses plus taxes if that applies to you but from 31st of march the price will go up to 129 dollars per year and while i'm doing that price increase it has nothing to do with inflation or global economic situation or dollar price or something just i launched this yearly membership in january of 2021 and since then i released many more courses so for the full year i was releasing one new course per month and in this march i even released two courses so the overall value of the membership got much much higher so if in the very beginning 99 gave you this amount of courses at the time by now i have already 28 courses and total value calculated by teachable not by myself so these are the list of courses included and at the end we have original price of 600 so imagine the discount from 600 dollars you pay 99. so i decided to raise the price at least slightly closer to 600 which is still a huge deal if you think about it so if you want the yearly membership a bit cheaper still at 99 you will find the link in the description below and today we have the first lesson of what is inertia in this video i'm showing laravel breeze example what is single page application at all and why you need inertia and what is the benefit of using that and tomorrow you will find the video number two the day after video number three and so on i think it's 16 videos if i calculate it correctly the only exception will be saturdays where i will still be publishing videos from my car about dev career so for the next few weeks let's focus on inertia of ugs and laravel and if you have any comments on that you know where to find the comments section now let's dive into inertia i will start this course by explaining what inertia is let's open the inertia.js.com homepage and it's a tool to build single page applications spas without building an api so that its main purpose and inertia is not a framework like laravel or vue.js it's kind of a mix in between and even in the documentation in the description you can find that it's not a framework it's not a replacement for vue.js or laravel or react or anything like that it's just a tool to make creation of single page applications much more convenient so in this video i will show you an example based on laravel breeze star circuit and you will see the difference without inertia and with inertia first let's talk about what is spa single page application so let's take a look at an example of laravel breeze which has also inertia version so laravel breeze starter kit official laravel starter kit and it has a few kind of sub versions one of them is actually inertia so i've installed laravel breeze without inertia here project.test and with inertia project2.test and to understand the difference we will click around and see how fast is the loading of the page visually it's not that easy to notice but it would be easy to notice if we open the network tab and see what is loaded under the hood so when we load the page without inertia we see a lot of assets css js and images and when we click register as you can see the full page is refreshed it's still fast because the page is really simple and not too many assets but still look how many things are loaded in the background we click back another full reload we click login another full reload we click forgot your password another full reload of everything so that is not a single page application compare that to the home page of project 2.test breeze with inertia same network tab let's refresh and the first load of the page would load all those assets again but if we click register see how it's blazingly fast and it's not reloading anything here it just reloads the register and register in fact returns the json that's what inertia does if we click home page again again blazingly fast login almost immediate forgot your password almost immediate again on the simple page it's hard to notice the visual difference that much so it's like milliseconds but as a proof i wanted to show you that network tab that only the json is reloaded and some image which is probably the logo which is not png it's hardcoded in the code so let's click around again login forgot your password almost instant response from the browser so that's the main benefit of single page applications in general with or without inertia you load the page with all the assets and then your front-end javascript framework like vue.js or react or any other framework loads all the other links in the javascript and then takes the data from the backend with some kind of api for example so you have api in laravel and then for example vue.js takes some data from that api for example the version of laravel or whatever you need for that page so that's a typical single page application everything all the logic of the page of the front-end is in vue.js for example or whatever is the front-end framework and then you have to separately create the api in for example laravel or ruby or python or whatever is the back-end language and at some point people thought that it's too complicated to create single-page applications in that way because it's quite a lot of work on the front end you need routing on the back end you need the api then you need to glue those together with some kind of authentication authorization api requests caching errors and stuff like that so as an example i can show you the code from my other course about vue.js spa this is a typical single page application in vue.js so you have the links with router link and then the main component the main content of the page is in here router view then you need to create the routes for example like this those routes may extend the layouts each route has urls and some other data maybe and then each route belongs to a component so then you need to create a component in vue.js for every page that component needs to have its own logic it may or may not use composables this is view 3 composition api so in this case it's even more complicated in terms of file structure so we need to use composables for example composable post which actually calls the api so axias get api to posts then calls the backend and on the back end you have routes api with api resource of posts and then those posts actually have index method with returning the json with or without using eloquent api resources and on top of that you need to have middleware with for example laravel sanctum with permissions and stuff like that so it is a typical way to manually create single page application but you see it's quite a lot of work so inertia is trying to solve all of that and simplify all of that as a simple example of inertia i will show you the code of that project2.test laravel breeze with inertia version so if we take a look at routes web of that project you have home page with inertia render which is almost identical that you would return the view the blade view in laravel instead you have inertia render on the dashboard you also inertia render the dashboard and these welcome and dashboard those are not blade views those are dot view components but inertia makes them work almost like blade components so you pass the parameters exactly like you would do in the blade you pass the middleware like you would do in the blade you assign the route names so it kind of feels like home like you would work with laravel but actually you're creating single page application and then you don't need to create the api because this logic comes from the backend so you immediately execute some back-end code like for example get that data from the eloquent or from the database or from the config or from whatever and those parameters then appear in the welcome dot view file in the resources.js pages as properties here which you can use can log in here can register here route with name route login so you're using vue.js with link for example but you can use the routes like you would do in laravel so to summarize what inertia does is save you time that you don't need to create a separate api with all the routes for the api and all the backend for the api then you don't need to create view router because all the routes are actually in the routes web like they would be in laravel then you don't need to manually create authentication and authorization and we will talk about that later in this course how it's done in inertia but basically you don't need to work that much on the layer of between vue.js and laravel on the backend to provide the data back and forth inertia does it for you so now you hopefully understand more what inertia is and by the way inertia is not only for vue or laravel it has adapters for various technologies at the moment if we scroll down we have three client-side adapters react view and swelt and two server side adapters laravel and rails so inertia as a technology is kind of like in between part between the backend and the front end and in this course we'll take a look at the implementation with vue.js and laravel on the back end so let's dive into the actual course

Channel: Laravel Daily

Views: 85,038

Keywords:

Id: swelKdHlvco

Length: 10min 21sec (621 seconds)

Published: Mon Mar 28 2022