Super Fast Pagination in Rails with Pagy

[Music] what's up guys this episode we're diving into a relatively new page a nation gem called PG so this is something that adds pagination links at the bottom of your page and you're probably familiar with using kaminari or well paginate in the past now the reason that I wanted to talk about page II is because of these benchmarks it claims that at least in the benchmarks that they used which hopefully are fairly real real-world it's about 29 times faster than kaminari and it's 18 times less memory usage than kaminari as well and we'll paginate kind of sits in the middle which is a huge improvement even on will paginate in either case it's significantly faster so this is a pretty interesting library it's pretty straightforward and the way that it works is a little bit different than the way that you might be used to setting up well paginate and chemin re so it's a bit of a dated version you're gonna have to definitely read the docs or follow this screencast in order to set this up because it doesn't add methods to say your active record relations like you might get used to so we're going to dive into using this as an example in this episode but there's also a bunch of extensions that you're gonna have to include to do some basic things so for example if you want to add pagination for arrays or search kick that stuff kind of works out of the box in these other libraries but you're going to have to include an extension for that with Paigey so it's more modular and you're going to need to grab whatever you need to use in your application which is good because it reduces the complexity that your app is going to be requiring so that's pretty awesome and it's definitely something that you should check out so let's dive into using page II so let's create a brand new rails app we're gonna use the jump start template here and we'll just say page II nation will be the name of our application this is going to create our app we will then create just a scaffold so that we can have some models to actually pay and then we're going to set up so that well do the pagination for us so the setup for this is actually a little bit different you're going to include P G's front end and back end in different places rather than just adding it to your rails app and then actually getting these methods available this is more manual to include in your rails app because this will work with any rack application you don't have to use that with rails unlike the alternatives that we talked about earlier so this is something you could use in a regular rack app or Sinatra or something like that so first things first let's open up our gem file and add a page e to the bottom we're gonna use the latest version but make sure that you had a version number in there in case their API changes for some reason in the future so that that doesn't fail now that we have that setup we need to add the back end to our controllers now if this is something that you're going to use in a lot of controllers you can just go into your application controller and add include PG back-end here this is what's going to provide the paging method that we will use in our scaffolds index so that we can grab the correct page of results so let's create scaffold here let's say a blog posts which will have a title body as text we'll just keep it really simple rails DB migrate that and we'll run our rails server but let's go into the blog post controller and set that up here so we have the page II back-end added to our application controller alternatively you could just add page II back-end here if you would like to have it just in specific controllers instead of all of them so that's entirely up to you but since they inherit from application controller we have access to all those methods now that we've included it so rather than doing your blog post dot all and setting that equal to in the instance variable you're going to wrap your call here with PG and then you're gonna set page E and blog posts equal to that so you'll do your query and then it will return to you the special PG object which will keep track of the page and stuff for you so that's the difference here normally you would be used to saying blog post equals blog post dot all dot page n8 and you would pass in your params or it's a page and you pass in your params here that's not what happens in this case so this paging method knows that there's a method called params that it can ask and it's going to look at that for the page information and then save that in its own object and keep this kind of separated out so it's not integrating itself into active record mirrors tightly as you would with well paginate or kaminari so this is much more of a generic library that is more flexible and so that's kind of the difference here now we have to go into our helpers and include the Paigey helper if for our views so inside here we can say include Paigey front-end and that's going to make sure that the Paigey helpers in the views are available so if we go to our blog post index dot HTML ARB instead of all this stuff that we've got here where we loop through each of those blog posts like normal and print out everything we're going to need to include the page here at the bottom so let's go down here at the bottom and we'll say page e nav at page e and that's it and so we have the records here that we want to loop through that was a sign as well and then our PG nav is down here so let's try this out in the browser and see if it worked now if we load up our app we get a bunch of HTML printed out here at the bottom which we might think is incorrect well it is correct because of the way that this works it's returning to us the HTML but we need to insert that into the page as raw we can trust that this is going to sanitize it for us and make sure that it's not injecting any malicious code into our page so that's what we're going to have to do we can use the double equals here which is the equivalent of doing a raw so if you did raw that's going to print that out and the page you can also do the same thing with double equals and that will also print it out and I believe HTML safe should work on this as well so as long as it's returning a string that should get printed out as well as actual HTML into your page that is unescape t' so there we go we have a set of navigation links right now we don't have anything so we don't see any clickable links but if we go and add a bunch of blog posts we should be able to see that so what we're gonna do is run the rails console here we're gonna say 50 times du we're gonna say blog post dot create test post this would be what what I call it title there we go and if we refresh our page we now have links that are clickable and navigate to our pages so that's it by default there's not a whole lot to it however if you want to use this with bootstrap for example you have to include some extra extensions so that's what we're going to take a look at how do you add those extra extensions into Page II so you can use it in your rails app so to use an extension like bootstrap with this we're going to create a config initializers PG RB file and inside of here's where we'll add our inclusion for the extension so here we're going to require PG extras bootstrap and by simply doing that we will have now included the correct code for this and now we can add a different helper method down here instead of paging nav we can call PG nav bootstrap which will allow us to call the bootstrap version so what we're going to do is restart our rails server because we've now included that file in an initializer and once this has restarted and we rendered our page we now see that it's rear-end 'red our navigation but with bootstrap styling so this works as you would expect it to with bootstrap and it's got support for other frameworks as well but you can see down here that in it is not rendering any templates when you call the pagination so this is not rendering like an ER be partial to actually print those out it's actually writing a really fast helper in repair Ruby that's outputting those strings so it's really quick that way however you can actually call a partial if you want instead which is mentioned in there doc so if you want to customize how this looks you can render that partial instead if you so for example if you wanted to use the compact version of this you could say paging app compact bootstrap and refreshing the page will give us that compact navigation here at the bottom so you can see we're on page two of 30 page 1 of 3 and so on which is ironically a little wider than this but once you have more pages this it gets a lot wider than the compact version then also if you want to render your own custom version of this you can render and you say page e NAB bootstrap for example then you would say locals page E is at page E and then you could write your own template for this using that PG variable and then have your own partial or whatever that could render out your own template if we open up the blogpost controller you can add your customization in here for how many results you'd like to see that is simply items Tensei and then you should be able to see only ten items per page and now you can see this has gotten longer than the compact version so there's a lot to this there's even some JavaScript for responsive designs so that it can hide these pages I guess when your screen gets smaller or show more while it's wider so you can even include some JavaScript for that which I will send you to the docs to take a look at but pinky is pretty great it does a lot of stuff it's a little bit new so there's a little bit maybe unclear moments in some of the instructions there's just a lot more that you have to set up a little bit manually but you can tweak it to your heart's content to make your navigation four pages work exactly you would want it to so you can tweak it as much as you like and it works really nicely so that is it for this episode and we'll talk to you in the next one peace [Music]

Channel: GoRails

Views: 8,075

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, pagy, pagination, pages, kaminari, will_paginate, paginate

Id: K4fob588tfM

Length: 11min 17sec (677 seconds)

Published: Thu Sep 06 2018