#125 Turbolinks 5
3-18-2018

Summary

Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual.
5
rails javascript 11:20
  • Student & Teacher
  • $9.00 / month
  • Valid School Email Required
  • Same Access as Pro
  • Subscribe Now
  • Pro Monthly
  • $15.00 / month
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Pro Annual
  • $150.00 / year
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Teams
  • starts at $75.00 / month
  • 5 Users Minimum
  • $15.00 / user / month
  • Same Access as Pro
  • Subscribe to Teams
they're handing now yeah and that and that and portability of her beliefs which is a way to the application of year to be faster when the benefits of trouble with is that he gets a single page application feel to your site and over the past few years there's been a lot of hype rounded for jobs were framework site few react angular in so forth on reddit think that there's a lot of thought and capital with the braille scored and he included her blinks so sad and make a separate applications with the front side the back and and mobile applications even if you're using something like we had been a unemployed lobbies kid is down with their application will bet most of the requirements out there when it comes to native applications as well as the single page application feel of websites and if your user name brand new wheels application and you've not done anything to skipper disabled term leagues the new guinea get its benefits right off the bat however once you start integrating with their party libraries there are good to be some colleges they should know how to interact with those libraries if you're using term links and all other times a quick google search was shitty in the car park roughly need to use to work with specific libraries that maybe are so friendly with her points where broke with the release it troubling spot i believe that great progress has been made with the overall compatibility with all the wider use it so before in previous versions of traveling story in prior it was very debatable whether not we would actually keep trouble links within the application because a lot of times it was just more trouble than it's worth or brenda racing years i find it troubling such as work so well with them applications and seven better even for a job script heavy set to get started and edges create a brand new bills application what to do that with will smith and it does give it a application name and i'll run through the normal set up again change much recreate this application when you see what version of rails it's using with trails that's the end i am using the latest police can get kills five to one for this gonna work with any version of wills five so with them application to discuss their generators careful with rails generate scaffold and and then create my users and and i have a first name last name and an email and was also the day and a birthday in two years well it looks as creatures as a date feel we came to angle the b migrate to migrate the database so in a new belt separate issue we are we have the total links added it to or jump file and within the way helps the application each team our year be found most of the day that should be troubling struck said to reload on both the sow seeds of the java script include tax and then within the application j s well we have the required trouble links this really the bulk of what's required to get her blinks working within your application so within our application die j s well as everyone i had to say console walk it is a good way to kennedy bargain make sure things are getting fired when they should be and they're only firing the same number times they you need them to sunlight to read the console walk and i'm just gonna write j s friend so now we visit her application we would expect this to be executed only look up the page and so we visit her application under the users path yes the art index and over on the right-hand side that the jobs with console pulled up we can see where the genus rent that click on a user you see that did not have a ph refreshed they just said is directly to the stage and external links in the fact lover not a surge a s friend did not run again will we went to a new page you'd expect this to brian each time we go to a new page that says if we hit refresh the entire page and we see it executed again so one thing that you would probably do within the situation at the document out or not ready and then run a function without share would get paid what every day you're wanting to nationalize this case something like the console block lover we have a kabul roms here because one when i use and jay query but then also with the dutchman already we're not the the will to uses this is good to be when the page is fully refreshed son said if we were using j query the week and do a doctorate want it then the term going slow this event will be whenever the pages refreshed or whenever sent over to another page with the troubling as a watered him when i use in j crew so this is it really been over for us say we get to see is some vanilla jobs with with the document in there we add the event listener the only the color troubling slowed what's a troubling slowed we call our function there within the function we get put in whatever jay is we want to run this case would in a dorm console walk such as by simply reading this with then the document event listener and listening on the event of the links load we're going to run this one each page refresh as well as each page of the visit be eternally so now i'm going to refresh my page that we see that the janus friend on a quick or new user easy there were any get we develop some information and create the user and none has said it may they pose and they did actually refreshed the page and then pay rent the j s again so if we go back you see that it ran it again and just as we go through back and forth to each one of these idiots events as racking up the tally and if i were to look under the network tab of redoing full refreshed can see that a lot of fouls were loaded even if we have some files ever be unloaded from our cash whether it's cash from our local browser or from the cd and the celtics a little bit of time to load typically a lotta these assets are going to be pre compiled so you would have won foul for yourself sheets and another file for your child's grabs security they buy kind of a bottle and they hit show on one of these an assembly game get a full page refreshed and said we describe the requests for the users and then whatever fate my car was for that age so they didn't have to go through in load everything again which agency that the timing for this is really short suggest is weird navigating through you see that each one these requests real small and it doesn't take a lot of time for to load so that's where we're really good this year benefits with these and as a joy these are ex hr or ajax requests self we look at the request reading go under the preview we can actually see what was learned so on the responsibly can see that a loaded the entire page and we're just replacing the elements on the page that's an excellent have a look at her page history the gesture of links is going to respect the page history you see them all the different quite so we made we now have a history idol of that request so if we would give him more of a single page application field where maybe each time they you to the page is going to have the same has relied on to where the back button will no longer really work because you're replacing the history troubling says able to accommodate back and interaction love rock when you said all across seattle kitchen on what use the word just really makes cents and to do this we pretty good attribute within a good attribute we could create a turbo wings and then action it will set this action to replace it so wherever you would want it to replace the browser history with the current age thing you would just add the state actually it within that way so with the user we get it there and added to the average user then also deeply user but again you wanna make sure that you're adding his words appropriate bandages all through out the application but just for the purposes shard ul added to be stuff of locations the better application of free refreshed you can see that we have the data troubling section replace set for our new and as well as each one of these by the the show so now that we're on our show page of the antibacterial it's gonna take us back to the previous one side they were already because look awfully you will get the history we don't have the index action that we were on the level we head back here that'll take us back in l we would have that because that that biden did not have the day that should be for the troubling saxon said to replace to create new user agency just the one i am still because this is what we actually hit the back way the black lady get the ball populate the history idol if so what the important things to know about her beliefs as the different events that it offers as you see here we party look at the troubling slowed and it fires once after the initial page load said he had at five recommend are to refresh the page then the trouble in school board fire and it also fires again after every troubling visit but there are several rather events they were able to use a common one maybe the troubling spot for a visit to the way what he is as if they're trying to navigate to a different page but they've got out of four but haven't saved the changes yet a year by the full with the vents on the good of documentation for probably in another nice feature that her rulings offers is a progress bar you're able to set that with the term the links set progress bar do you live in a new dispassionate aluminium a second it's simply wanted to show up on every troubling stroke was really good said it's zero then the network has set my internet connection to a slow three g. so we had to simulate what its could feel like you see the progress bar someone to add any page and and then enter any last name and that the accuser that ensembles requests were not getting the progress bar where have we had back or if we had added again we will see our progress was being displayed and if you notice we had the update it successfully at the top gear and i speak of struggling school by default catch the page so a cash it in a rendered at first but it was also the the requests to the background to the server there was a server responded with the new each team a market and replace the elements on the page with that and that's why so that disappear so in our next episode when i look at take in our web application and governing at all friendly hybrid app with the terrible links are us package and something that was covered in a bills converts back in two thousand sixteenth all over the wall so what information left out in it primarily focus toward the aisle west side it said in the next episode what to look it actually compiling the term links asset getting into war i was application in our application melted and then being able to interact with that oh that's all for this episode thank you for watching