Faster List Performance with Ionic 4 Virtual Scroll & Infinite Scroll

[Music] hey everyone what's up this assignment back with the video on this performance so we've talked about this topic in the past top it topic anyhow and with ionic 4 there are again two ways to increase the performance so we can use sort of an infinite scroll for our list and we can have a little bit different list set up with a virtual lists so let's dive into this I've already created the blank new ionic application as always ionic start Academy scroll blank actually we don't need to pass the time angular because that's the default so we can leave this out and then we can bring up our ionic serve which looks like this if I put some colors to the header so let's dive into what we need first of all to get started that's the HTTP client module because we're gonna make HTTP requests in order to show some data in our infinite list or virtual list so as always import and edit to the array of your imports and we are already done with this so now to our home page let's have a little function to load some data from an API so therefore we're gonna have to use private HTTP HTTP client from angular common then we might have an array of users that makes life a bit easier if you work with an observable it's not that easy to just come get the data to the array so in our case we will have a simple array right here and we'll also remember on which page we were in order to maybe load the right data I'm not sure if the eight decline or the HTTP call that we make is actually using the page but so what we're gonna do is we will use the random user API I really love the API gives us a nice set of results in our app so let's try to get the data HTTP GET same URL that I just pasted into my window we're gonna get 20 results just for the testing here and we will actually also i'm not sure if i refresh this i think i anyway get different results but i'll also append the page and the page would be this the page okay so we can subscribe to the result just like always and hopefully get something back so let's log out what we got or its put it list like this and then as I said before we can now easily add this to our array by calling this dot user's concat combines two or more arrays and then passing in the results key you can already see that we have to access this key it will look a bit better in a second let's just run this so hopefully you're familiar with JSON I've seen people having problems with JSON data and accessing the keys over and over again so if you got any questions as always let me know them below the video and make sure to call all the functions that you want to test this is a very good tip and always helps a lot when programming so right now we can see that we get the data in form of information whatever results page not really that interesting and then the array of results that is added to our users array right here so each of the results has a name hopefully name first and last name we got the picture which we can use we got the email so let's build our infinite list based on this data so we go over and why not have cards so I just found the card no I don't know how the syntax was yesterday I found a shortcut for ionic cart full yeah there we go great and now I remember that I don't want to have a full cart so great success again in the Simon okay let's create cards based on our users like user of users we don't need the async pipe because this is the observable um we're just setting the data here so then I on item let's fill it with some data like I on Avatar slot start and then his image and the source would be user picture whatever we can use medium we can use thumbnail doesn't really matter at that point and we could also have a little label after the I on Avatar in the item using the first and last name and we can also use the text capitalize directive to immediately make them uppercase as you see all the first and last names are in lowercase it's just something of the API so right now we see twenty results and at this point when you display your ap identity you come to think okay how do I load more data do a load immediately 500 results or how do I handle massive amount of data so in our case or with the first example I want to show you we use infinite scroll which means once we'll reach at the end of the list here we want to trigger a new load to the API and get 20 more results for the next page there's a lot of pagination going on in some frameworks perhaps your server is already implementing something like this which makes life a bit easier so to implement it we can can I get like infinite scroll well well well I kind of enjoy the auto compilation the threshold that we can define means how far do we have to scroll down or at which position just the function that we define here get trigger not only I think it's at 15 why not Wow well let's make it to 5 just you see a bit what's going on actually this doesn't really matter but you can specify whatever you want is the loading spinner and else of loading text loading more users but most important is the functionality that you need to implement for the eye on infinite so this is called once the action is triggered and there we will have an event so we need this event in order to 1 mark the component is completed so the loading disappears and also once you reach the end of your list so let's say you normally get 20 results back and suddenly you only get 18 back that means there are no more results and then you should disable the component of course so therefore let's say in a normal case you would increase the page on which you are all that you want to pass to your API and then let's reload no not reload but reuse our load users and also pass the event to it then we also need to define it right here as a parameter we'll make it optional so only if the event is said we will call event target dot complete once we're done loading the data we can also lock out the event right here just to see what's going on and what I said as well I don't know let's fake this by saying we want to have a maximum pages of 3 normally you get the count or how many pages there are in our API or response so you could set it right here we will just assume than the maximum pages are 3 so then you would check something like if this page equals this maximum page I didn't type HTTP really I didn't I just I didn't trust me so in that case call event target and then disabled equals true and all of this should now help us to call this real or logic once we are approaching the last five percent of the list so let's see I will make it faster what do you think he's what was going on let's try this again watch for the bottom of the list and now it was loading more users so we made two reloads which means we're now on page two or three no one more was possible now we're on page three and now you see we can reach the bottom and no more reloading is triggered and all the previous entries are added to our list so that's the general idea of the ionic infinite scroll I just mess them up sometimes as well so what the infinite scroll your API needs to I would say have the right design as well because not all api's have this a page nation enables or in general work with a page number of course if you get control over it you can easily do it and then you can use the infinite scroll with maybe a little bit more than 5% that was a like I don't know it wasn't that wasn't that good I would say nothing 20 no 25 would be better as I said I think the infinite scroll let's bring this in me threshold is by default year 15 so let's see what happens now we go bottom so you see we we approach it slowly we kind of don't even see what's going on sometimes which is basically what you want to achieve right you want to show the data to the user in the fastest possible way without any distractions or showing any loading times to the user so the user really thinks of an infinite list of content like on Instagram or whatever Facebook okay so that can already increase the list performance if your API design is right if you're able to reload the data from your API next step is the virtual list that's an interesting concept because because we don't need the load more of course no because it requires a bit different setup of our elements and we can have a lot more let me bring this in information in the virtual scroll so we can have custom functions calculating different headers or dividers we need to pass an approximate width and hate in order to make the list of pure ID and the general idea behind this is let's say you have a thousand entries in the list you don't want to immediately display and render all of them so the virtual scroll gets this data and only this place what you can see on the screen plus maybe a few at the top and at the bottom so if you're coming from iOS or I'm sure it's on Android as well there's a reuse logic that just creates the cells that you see in the view and then once you scroll to your direction reloads or reuses also the cells that are scrolled out of the view so enough of the theory or theory how a native speaker would maybe say and let's see how we can approach this so actually we don't need the load users as it is right now we don't have an event we just want to load let's say a hundred results and also we don't need a page so we get 300 results and then I will bring in something just to actually order the data the data what is going on today Simon please I think I have to go to the door my ears have failed me the door wasn't ringing my English is going away I think this might be last video on this so let's try to use the hour time that is left while my brain still works we get a hundred results we sort them by the last name which is then maybe the lock makes more sense right here so we can see that the data is actually kinda sorted and I will get rid of this one as well because as I said infinite scroll and virtual scroll is it called infinite list I don't know but there are two separate things to talk about so now we see it is kind of sorted by the last name hopefully I don't know how to sort these if you're able to read them let me know if they're sorted as well so then we can continue with the setup of the virtual scroll and maybe I will just pick this one and our items are actually the users let's say like item I don't know what this looks not like it should be in my eyes I think this should be slot start so why are the ducks here wrong I don't know I really don't know interesting anyhow this was a picture dot no medium and then item name first item name last so that's just taking the ionic code for the virtual scroll element and let's see what happens so we got a hundred results and we see the list is pretty functional we can use it and it was rendered I think pretty fast but hundred results are not that huge maybe can we get more I don't know I really don't want to destroy the API or something and don't mess up their service because I really enjoy them so let's see what's going on with a five hundred well but you see it's still we got a list of five hundred elements which is already pretty big we can scroll through it pretty smoothly I think and I think that's a huge win let's expand our example a bit more by seeing what's going on so we got the island virtual scroll where we pass in the items and then every item gets access to the item of the iteration through this statement and then we got the I on Avatar at the front as I said it should be slot start in my eyes and then we can also reuse the label part that we just had a second ago but then let's call this user or let user so then it would be fixed again now one more thing that is shown on the page that might be interesting is or two things actually first we can at the top level pass in approximate item hate and I think what is the approximate hate in here let's say 70 and you need to specify it as the pixels this will not have really an effect right now normally this helps io need to calculate the right hate already in the beginning so we don't see any strange effects if the cards then suddenly get bigger or smaller later on so try to be as accurate as possible but I also didn't see anything really going on if I don't know and I put this like 400 let's see what's happening I think there's pretty much yeah maybe it's just well it's kinda I think there's kind of problem with the rendering in the background going on so I definitely think it should be close to the reality so try to use this and then one last thing I wanted to show was attaching a header function to our virtual scroll which is actually something that's pretty interesting and something I thought about for other projects as well although they don't really need virtual scroll but I just kind of enjoyed this functionality so this function gets called with the current record of the or the current element however you want to call it the record index and also the full array of all records and maybe we go through this logic one by one so if the record index is zero it means we're the first element so in that case we should definitely return whatever divider for the first row and I just want to use the first letter of the last name so we get the separation in alphabetical order so record name last this gives us the first character of the last name and then we make it uppercase so then another little if no actually not to Eve's because we will have a little looking back I implemented this first in the other way so try to get the next item which is a bit more complicated because the next item might not exist and then the header is shown at the wrong place so okay I returned to some logical thinking and thought about okay if the previous item is different than the current item then I should display a divider so I get the first character of the previous in the first character of the current record so this gives us the previous this is of course the current of the iteration and then if the previous isn't equal to the current I will return it to your upper case and otherwise just as a for Beck return now in that case and I think to display the actual header we gonna have an eye on item divider is this working kind of I don't know why I always open the brackets and then it's wrong and I mess up everything mm anyhow this should then be first of all the virtual header actually I get code completion for this which is kind of strange but let header and then give out the header let's use color primary in here as well let's use the primary color for the whole divider should also look nicely so now we're using this header function we're having an item divider that's a virtual header and then we give out just what ever the function is returning and as we can see first item isn't a m-- then at some point we get to be and then we can scroll through this and we see at all the positions were a new last letter begins we got the item divider so a really cool way actually to create those dividers for ulis I had problems with list dividers and creating them dynamically in the past if the data wasn't or well in general it's not that easy if you just use an ion list so with this header functionality maybe this is also part of ion in list at some point it would definitely make kind of sense to have a header function in here as well so if somebody from the ionic team is watching maybe might be a good idea to have something on the regular list as well anyhow that's already everything for today um I hope I started the record again which I think I did so hopefully you enjoyed the video about performance between ionic lists infinite scroll and virtual scroll both are great ways to improve the performance of your list so the one reloads entries once you reach the other one holds all the data right in the beginning and just displays what needs to be displayed as I said both are great and improve the performance of your list if you enjoyed the video of course make sure to subscribe to the channel check out my ionic academy.com I would love to see you inside have a great day as always take care and I'll see you inside the next video [Music]

Channel: Simon Grimm

Views: 23,809

Keywords: ionic, ionic framework, cordova, angular, javascript, hybrid app, cross platform, ios, android, typescript, web development, ionic 4, ionic 4 tutorial, ionic 4 course, ionic 4 app, ionic 4 for beginners, learn ionic 4, ionic 4 angular, ionic4, angular 7, angular 7 tutorial, learn ionic, ionic for beginners, ionic tutorial, ionic angular, ionic guide, ionic course, ionic 4 infinite scroll, ionic 4 performance, ionic 4 list performance, ionic 4 virtual scroll, ionic performance

Id: NBeExE9dvR0

Length: 22min 30sec (1350 seconds)

Published: Tue Jun 18 2019