Have your cake and eat it too with Inertia.js by Sebastian De Deyne

[Music] all right good morning everyone let's talk about inertia today so inertia is a JavaScript framework for building server driven single page apps probably a bit of a vague description but I hope that will become clear in the next half hour so you raise your hand how many of you have already heard of inertia are kind of like know what it is okay that's already a large number and how many of you have actually already used it also larger than I expected actually cool so about me Sebastian do Dana I'm a front-end developer at spazzy also some back-end some design I maintain inertia's official react adapter and I'm also Co maintaining a bit helping out with issues and stuff of the main react repository repository before we get started I want to establish some context of projects I work on day to day so mostly at Spa C we work on complex business apps that have a lot of complex forms most of them require authentication to get in so SEO isn't really a huge concern and the projects that we're really spending a lot of time on we also don't really need to build a lot of shared public api's like build one API and have it be consumed by mobile apps and web apps so mostly we can just build a user traditional MVC framework and build some sort of monolith for our projects so if you can relate to some of these then I think inertia and the stock will be extra relevant to you because that's where I'm coming from we're also using laravel with a combination of react and typescript on the front end to build applications but I'll be using view for all the examples today because I assume that's what most people are more familiar with I wanna start off with a few examples of some components I've built over I guessed a few years of spicy so something typical that comes back a lot is like a form with a checkbox that if you click it it changes the state of the form some fields need to be disabled some things need to be prefilled another piece of user interface is a live search with algo Leah if you start typing or if you change one of the parameters it's gonna fire off an ajax request and immediately load the results another example is a dropdown menu if you use the arrow keys you can use the arrow keys to navigate it's all accessible you can use a hard key to open it now all these all these components have one thing in common and that's that they all heavily rely on java scripts to build a modern UI probably needs quite some Java Script rather you like it or not we're building applications with server-side MVC frameworks so most of us probably layer well some Symphony Ruby on Rails they all supply their own templating language on the backend in the case of laravel that's blade but you also could be working with trig or ARB or whatever the thing is these templating languages they are made for HTML and then we sprinkle some JavaScript over them afterwards but the interface is I'm building like JavaScript is really a first-class citizen there so I kind of want a piece of technology that also treats it as a first-class citizen jobs isn't really part of the stack of our server-side framework so kind of a natural evolution to this is thinking all right let's just build a single page application because then we can just do everything of our view and JavaScript single page applications have some awesome features so this is what I'm looking for I want to build my entire UI in JavaScript you can also consume existing api's so if you need to build an application that is also going to be consumed by mobile apps or something you can just reuse that API instead of building building something twice on the backend spa's also can have offline support which can be a really useful feature and if scalability is an issue then they could reduce server load in some context because you could statically host them so going over these bullets they'll do your UI and JavaScript that's something I really want to be able to do consume existing api's and be useful but like I said before not that relevant to the project I'm working on on a day to day basis the same for offline support and less server load these are to me really nice features there are things that clients don't often often need so well these are nice things to have they don't provide that much value to me on the other hand a single page application adds a lot of complexity to your project you need to implement client-side routing now you need to do data fetching through an API because you're storing data on the client - you probably need some sort of state management solution libraries like view X or redux are really beautiful libraries but they add a lot of complexity to your application you'll also need to recreate quite some browser behavior like getting the back button to work the way you want it's all possible but it adds a lot of overhead to development so if you compare this list up here to the previous list we were looking at it's not really worth to trade off for me so then I'd rather stick with the server-side templates and add JavaScript afterwards if I were to make a wish list of everything I want I would have my view layer entirely in JavaScript I wouldn't need an API unless I need it for other reasons as a bonus I don't really like writing tons of Ajax and points for my views either it would be cool if we could reduce those and I'd really want to keep routing and data fetching on the server because that's where all the business complexity lives so the more of the other complexity we can keep there in my opinion the better so this is where inertia kicks in the nura tries to solve this with two key features first of it being no server-side templating if you look at a blade view in a an application without inertia so you might have written something like this at some point you have a mix of HTML and and you'll be rendering one or more view components and then actually most of the interesting part of this view lives inside the view component you have a controller which just returns a view users index and you pass down the user to that view if we were to use inertia for this the control looks like this so instead of you you call the inertia function and that's actually all you have to do on the server you don't really do any big mental shift to to use inertia your blade view is going to look like this your beta you simply isn't needed anymore it doesn't exist anymore because inertia immediately is going to send down the data to the view component so this is an example view component you have a template your view component accepts props and those props will be immediately injected from the controller into the view component the second key feature of inertia is no full page refreshes so this is what really gives inertia applications really like that single page app smooth feel here's a short video of an inertia demo so we're going to visit the Bing CRM which is a demo which is open source I'm going to fish it's a dashboard and then we're going to check out one of the pages now what does this look like in the network tab the first request is going to do a full HTML request we're going to receive server rendered HTML with some data from the server the second request one you saw without any page refreshes is going to use an ajax request there's probably a bit small but we're going to look at this zoom then and in a real browser later so this is really important your first visit will always return HTML and every subsequent fill it will visit will return JSON inertia isn't really a framework it's more like a core library with a collection of adapters you have inertia gs2 core javascript library then you're going to use a client-side adapter and a server-side adapter the client-side adapter is kind of a bridge between your client-side framework like view or react and the inertia core and that's those components are going to be able to do deserve the Ajax requests the server-side adapter is going to enable you to return responses that can either return HTML or JSON depending on the context on the server side there's an official adapter for laravel someone in the community also made one for Symphony I think he's at the conference here at home is film made and someone is also working on ColdFusion adapter actually on the client side there are official adapters for view GS react and felt so now we're going to check out some real code with laravel and few GS ok so what we're going to build is a simple admin interface for posts it's a very boring topic but I picked something everyone would know so we could focus on the technical details and not really what's going on in the application in a bit okay so we have an overview of all posts here for a fake website called inertia news comm and we can click on a post to edit the post and we can also add new posts so it's a pretty simple application the first thing you need to do to get started with inertia is install the server-side adapter so in compose about Jason we have inertia GS inertia laravel version 0.14 now the package will take care of the service providers auto registration so does pretty much all you need to do the single step you still need to go through is create some sort of skeleton template by default it's going to look for an apt update of PHP and you need to register the ad inertia directive here that inertial directive will be replaced with a div and we'll see what that looks like exactly they are on the routes of our application let's look at their web rats here there is nothing special going on here we have a login route a logout route we're using a resource controller for our posts I also add a little restore endpoint since we're using soft deletes now the post controller itself we have an index method which is going to return it's based on the query string so we can filter by status here we also have a little search box here I'm gonna retrieve the posts also going to retrieve some extra data to show in the view so the counts for the published post to draft post a trashed posts these are gonna be displayed here and then we're going to return an inertia view with the index component for posts and pass down the data so this looks just like you'd be building something with blade and arrow though the create method - nothing special here I'm using the Edit view for both create and edit and the context of creating something I'm gonna pass down an empty post and the store view is actually has nothing to do with our nerf at all it just receives a post request we're going to create a new post for that user redirect to the edit page and add a success message that the post was created one more thing I want to note about this dummy application here I added a little piece of slow down middleware which is gonna add a slight delay to every request to make it feel more like an application that's hosted on a server than like these instant requests that you get in local development first thing I'm gonna do is open the network tab here view Network and zoom in a bit all right I'm gonna refresh this page and as we saw a minute ago the first request is going to return an HTML document in this HTML document the ad inertia directive got replaced by a div with an ID of app and in this and it has a data page attribute which will contain the component and a bunch of other data so we're rendering the posts index component I reckon one size bigger and here is an entire another piece of JSON blobs with data that gets sent from the server to the client now a subsequent request so if I click a post here I go down that's this one here is going to return JSON instead so the requests for this page contains let's look at the request headers an X inertia header right here so that's how the server is going to know I need to return JSON now instead of that HTML document previewing the response it actually this looks exactly the same as the data page attribute we saw a minute ago so it has a post and it contains all the props so this is the data that you sent from your controller or your application down to the view on the front end of things let me make this bigger you need to be a lot bigger actually okay package JSON we installed two dependencies the inertia core library and in this case to inertia view adapter in our app j/s we are installing inertia as a view plugin for some extra functionality then we are looking for an element with an ID with an app ID on the page to render inertia at that place we're going to parse the data page attribute we just saw in the HTML document and send it to the inertia app as its initial State one thing you do need to configure is how inertia needs to find components so in this case I'm using dynamic imports this name will have the posts index or posts edit we just saw so it's going to look for a JavaScript file pages slash post slash index or edit in this case so if you look at our files here these exist we have pages posts and edit and index cool thing about this is that you actually get code splitting by default since its dynamic imports so this is really a really good win for performance of your application take a look at the index view here go all the way up first thing you notice is we're not gonna use any a tags but we're going to use inertial link components instead these are provided by the inertia view library these behave just like an a tag you add an H ref with the URL and if you click the link that's the URL you're going to go to so I'm also using these inertia link components for the status filters so go back to all posts this published here is simply a link to the page with click here alright with status equals published one thing here if I I'm gonna zoom this in again if I scroll down a bit and I had draft it looks like a full page it's looked like we're visiting a new page so we're jumping all the way back up to the top like you'd be visiting a new page I want to give this a more apt like feel that these filters only apply to the table and don't really touch the rest of the experience of the page one thing inertia has for that is you can add a preserve scroll attribute to inertia link so I'm gonna select these four inertia links for the filters and add preserve scroll equals true I'm gonna save that refresh now if I click published it stays in place so this really feels more like some sort of single page application or rich user experience then I need to do the same for the search box here if I search for iam here first of all we jump to the top of the page which makes it feels less smooth but second of all whenever we search for something the Box loses focus so you can't really keep typing in the box let's look at how the search field is built we have a text field type of search with V models equals search in our data of the view component we are declaring a reactive search attribute and we're gonna watch that attribute whenever the search string changes we're going to trigger an inertial visit so you can also trigger an inertial visit programmatically instead of using the inertial link component we're debouncing this every 250 milliseconds so you don't fire an HTTP request on every single keystroke so the first thing we're gonna do here is like we did a minute ago add the preserve scroll property preserve scroll true now if i refresh and start typing here then alright we're already our page is staying in place that's a good thing but we're still losing focus on the search box there's a way to tell inertia like look I'm going to do a request but instead of going to an entirely new page I'm kind of gonna update the current page you can tell inertia to preserve the state of the current page so if I say preserve state true fresh again if I start typing now then my search box is going to stay nicely focused next we're doing a few queries on every page here so we have decree for the post which is obviously necessary but as we saw in the post controller let me go back there we also have this disk queries for the counts of the posts so when I'm searching for a post I don't really care about updating these counts I want to make this request as efficient as possible I only want to retrieve the posts and to do nourish link you can also add an only attribute we're gonna say Oh care only care about posts save this and refresh now if I type here and look at the network request so it's both search not to the props will only contain the posts in a response so we already saved some bytes by sending less down but the thing is these queries are still being fired on the pin post controller so inertia has this thing too lazily evaluate the data you're going to send down so if we wrap these counts in a simple callable so we say function we're going to return this array instead of immediately executing all those queries so now we have a career count of seven and if we search now then we can see it's only three instead of seven so these queries aren't going to be executed more and less your component explicitly wants this data to be sent out again so inertia is a really good fit for things like data tables for retrieving data filtering data let's take a look at what it looks like for posting data so in the Edit Page let's go to the code their posts edit we have a few text fields go all the way up text field to add the title and a text area field for the content so I'm using the model here with a form property let's go to the data of this component called the way down so we have a form here with title and content value this will be prefilled by the content of the current posts first if there is one and what we're going to do is all these these publish buttons and stuff are also inertial links so if I go to that publish button let me search for publish here this is one we're looking for we have a safe draft button which uses an inertial link it's going to post to the posts and point we can also specify a method so now if this is an only forget request but also post put patch delete whatever you want and I'm going to send data to the server so I'm going to send all the form data that we have in our view component and I'm also going to say I want to save this as a draft the same for publish send all the Fame form data and set it as published next if we keep this title empty and hit enter and publish then we get an error the title field is required so where is this error coming from in our view in the text field we're passing down this weird thing page errors title inertia also has a way to globally share data to all views in our app service provider I have an inertia share call and I'm sharing all different kinds of data that we want globally available we have the authenticated user a flash message if there's one present and also an air is key which will pull the airs of the session and send it down all of the data you're sending down from the server to the client will be available under the page key this is something the inertia View plugin does for you so this kind of works just like you're used to invade them they do also have this global errors a variable here you also have something similar if you implement it all right one more small feature I want to show off if I make a new post I'm gonna close this here I start typing hello lyric on now if I navigate somewhere else so back to all posts and I head back then I lost my progress this is something that browsers are really good at browsers keep the previous forum state so if you hit the back button then you wouldn't have lost your progress inertia you also can say that you want to remember specific data so I'm going to treat specify here I want to remember the the form attribute here save it and refresh now if I type here ericon go to all posts and hit back the state will be restored now this isn't just using local storage this is actually tied to this specific visit so if I could all posts again and add new instead of using the back button it won't be her so this is exactly how you'd expect a browser to behave one more thing I'm gonna hit logout here so something went wrong I used to get requests instead of post for logout but inertia receives a non-inertial response it's going to render it in a modal this is very useful for debugging so instead of it's normally it can be really hard to debug Ajax requests because you don't have the Boop's page but here all your requests are going to be rendered somehow in the view so this is really great to have during debugging all right back here okay let me change the mirroring issue [Music] how did this work okay Lane all right so what did we go through now few features from inertia you can map controller actions to JavaScript components so that's something I was really looking for to streamline that whole thing you get turbo links like navigation it can preserve page state and scroll state you can partially reload data it can also remember state for you on a specific page and it also does some stuff to help you out with asset versioning to ensure that users will always be on the latest version of your application but unfortunately we don't have time to go through that now what makes inertia great for me so development experience no contact no context switching anymore during development this sounds like something small but it's it's really huge no more thinking was distort in the blade file or a view file or whatever it's just always you have your server and you have your view files and there's nothing in between anymore that's pretty much just noise in this context you also don't need to write as many Ajax endpoints anymore like for the data table and a traditional application you might have to add a few extra endpoints like filter on status or search you can all bundle this in one controller action with inertia inertia it keeps things snappy for your users no full page refreshes anymore and it also doesn't break browser behavior like spas do or at least you need to invest a lot in this single page application to get it all fixed now is inertia safe for production it is tagged 0.1 but yes it is considered safe to use in production the reason why it's not 1.0 yet is because we're still experimenting with looking for new features and stuff but it is definitely stable its Posse we're building two very big projects with it yesterday later Marcelle and fake are going to be talking about flair and the application is entirely built with inertia so maybe keep that in mind close off a few resources on github check out their inertia GS organization a full website with a lot of Doc's are coming soon a nurse suggests on Twitter is at inertia NGS check out jonathan trainings twitter he is the creator of inertia so he's tweeting out a lot about that - I was Sebastian the dana check out my website for some blog posts on similar topics and follow me on twitter at subdued and I'll be around the conference for the rest of the day and at after dark so feel free to talk to me about anything owner sharee act or whatever related thank you you [Music] you

Channel: Laracon EU

Views: 12,740

Keywords: laracon, laravel, php, laraconeu

Id: 8to7QtuD3is

Length: 27min 44sec (1664 seconds)

Published: Fri Dec 06 2019