Build Modern Laravel Apps Using Inertia.js - Ep 1, What is Inertia.js

what's up everybody my name is jeffrey way and i'm so excited to show you inertia.js in this series which was created by jonathan rining i think you're going to love it it's so good so as it says on the 10 inertia allows you to build single page applications without building an api instead you reach for classic server-side routing and controllers and that's specifically why inertia labels itself the modern monolith but now real quick before we dig in and install it and have a look around we first need to figure out what the parameters are here so is inertia linked to laravel because it looks like it a little bit here in this example and the answer is no well is inertia linked to view and again the answer is no but it does offer an adapter for laravel and it does offer an adapter for view but if you instead prefer something like reactors felt that works as well inertia is not dependent on any one technology but that being said if you are a laravel user you're going to feel right at home here now you can think of inertia not as a replacement for view or it's not a big framework on top of you it's really in many ways just a client-side routing library that connects a server-side framework like laravel to a client-side framework-like view and really that's a good way to think of it inertia is the glue that connects your server-side framework to your client-side framework and the great thing is when you do this it allows you to continue using traditional controllers traditional routing traditional middleware traditional authentication traditional authorization all of that stuff remains unchanged even though you're building a single page application and effectively what this translates to is if you use inertia then no you don't need to build an api no you don't need to use oauth no you don't need multiple repositories for your api and your client-side application instead you're building a traditional but modern monolith it's all contained within a single application again i think you're really going to love this i do and in fact lyricas under the hood uses inertia.js i love it that much okay so let's have a look at the demo application before we finish up it's called ping and it's a traditional crm okay so the first thing i want you to be aware of is how when i click on these links notice that we're not performing a traditional post back to the server so if you have a look you're not going to see any loading icon as i click here and that's because instead inertia is intercepting the click of these anchor tags and instead it submits an ajax request to the server so notice if i click on a link yeah we make an ajax request to the given endpoint and in response we get a bit of json that contains everything our view component needs to load or refresh the current page so to speak we have information about the user any potential flash messages and then the data that this particular page requires and that seems to be filters and organizations let's do another one let's go to the contacts page which you see here well again we make an ajax request we fetch the content and then inertia uses this response to dynamically swap out the current page component with the new page component and then view as a result will refresh the page automatically due to standard reactivity of view props so notice the advantage here is you only have to load your basic assets once you're not refetching the css and the scripts and the header and the footer for every single page request like you traditionally would with a standard server-side app and what that translates to is a much faster application okay now the last thing i want to show you here is let's go to inertia.js we'll go to the github page and we're going to have a look at the ping crm demo application okay so you'll notice if we look at the routes here these are standard lfl routes they should all be very familiar to you if you work with flareville let's have a look at maybe how about this one for organizations so that corresponds to what you see here okay when you visit this endpoint we're going to load an organization's controller and then the index action okay now the index action returns not a traditional blade view like you might normally do with laravel instead we're asking inertia to render a client-side view but again notice it's the same basic shape don't be confused here this is just a standard eloquent query so we are loading a view but not a blade view a client-side view and then we are passing a set of data to it so notice we're passing filters and organizations well we saw that earlier that's one more time go to the organizations page and you'll see in response we pass through the filters and the organizations so this is precisely what inertia allows for and again that's why the creators refer to it sort of like glue it connects the server side to the client side and once it's done doing its job it gets out of your way it doesn't completely take over your application which i really like about it

Channel: Laracasts

Views: 59,633

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: O-pqsfzgfIA

Length: 5min 36sec (336 seconds)

Published: Tue Oct 05 2021