I have online store catalog. Let it be 1000 items.
How long lists usually done in mobile apps: infinite scroll or pagination? What are best practices?
My thoughts:
If to have a think, I can't remember I've ever seen pagination in mobile apps. Infinite scroll is almost everywhere. It is good, but if you want to find necessary goods you can't just press number of page you already know, you should scroll this big list. But you can search it, nd system of likes can be a great help - you can just save what you want so that you don't need to scroll lists again and again.
Infinite lists is a standart?
Performance of FlatList enough to render 1000 of elements or there is some other component for that purpose?
Related
The case
I am implementing a web app with Angular#6 and Django#2.2. In my app, I provide the users with a form with options. Based on the selected options, I request the backend for the relative results. The results are rows of the form {orderNumer: integer, message: string}. The number of rows, that the backend responds with, ranges from 0 up to 20k.
The Problem and what I have done
I am currently using Angular Material Table, requesting the whole file from django (no streaming) and since angular get the results, I am passing them into angular material table.
The problem is that in case of 14k rows, the table displays this result with a delay of 12secs. I mean that from the time that all 14k rows are fetched to Angular from Django, there are 12 secs passed to be displayed.
Some Limitations
I have noticed about pagination, i.e. requesting data in chunks either when user scrolls or gets to the results next page. However, this is not the desired behavior in my app. I want the user to be able to download the results without having to scroll down or getting to the next page again and again.
Questions
What are some best practices in such a situation?
1) Do I partially load the results to angular material table? Is there a way?
2) What do I do while streaming the rows from the backend, instead of requesting the whole file? In this case, have I to do this independently of the size of the file?
What takes the most time is not downloading the array not even going through it. What takes 12sec is to add the HTML elements to the DOM.
So, this's what I would do in this situation:
download the array (even if it's 14K rows, I don't think there's a need to stream it)
Store a sub-array in a variable then display this sub-array with ng-for-trackBy for performance reasons (and add the code necessary to add rows as the user comes near the bottom of the displayed array)
Use the OnPush change detection strategy, also for performance reasons (https://angular.io/api/core/ChangeDetectionStrategy)
Or:
Download the array
Use a virtual scroll list by leveraging the Angular CDK (https://material.angular.io/cdk/scrolling/overview)
Hope it helps,
I have a list of video games in my database. The user is suposed to choose their favorite games by selecting the checkbox of the wanted game.
So I have a form with the entiere list of these games. For now I use a For condition to display all the entries from my database/table.
But now I have a huge list of game that the user can choose, so I can't display everything.
Do you think It could be a good solution if I replace my system by placing a search bar which could dynamicly search and add a game.
Is there a right way to do this with Django ?
If not, could you give me the simpliest solution to solve my problem ?
Thank you.
Probably you should make use of both approaches: have a list of (ordered by) most played games which could contain a few tens of games (with the possibility to "view more" at the end of the list) for users who don't know yet what game to play and who like to discover new games. And also have a search box where users can enter the name of a game if they already know what they want to play and don't want to look it up in a list of games.
For the "view more" part of the list you should use ajax to make calls to django app without reloading the entire page and retrieve a number of games by each call. This will be more like a Single Page Application (like Twitter, for example).
Or you could use pagination and retrieve and display all games from the start and use a cache framework (and cache the query that retrieve all games) if there are performance issues.
Using Django, and for example purposes, is there a way to load 50 pictures to start... Once the user reaches the end of the 50 pictures, load 50 more?
I would like to do this to decrease page loading time. If not, would anyone have a better suggestion?
I know you can do foo = Bar.objects.all()[:50], but then I'm stuck to only 50. I could see setting that for maybe 300, overall, if there are a lot of images, but is there a way to load them in increments?
Thanks in advance!
You can look into Django Endless Pagination. It provides Twitter- and Digg-style pagination, with multiple and lazy pagination and optional Ajax support.
There is another application infinite-scroll-pagination which might help you in implementing the infinite scroll like functionality.
Finally, there is one more library infinite-scroll. Its a jQuery Plugin which you can use but currently it is no longer maintained.
Say I have a website that has 100 products. Then this is filtered down to 5 sections containing 20 products each. If you were in one of the sections that contained 20 products (e.g. toys), what would be the optimal method to display only 5 toys per page. At the bottom of the list would be next/previous buttons to show the next/previous set of 5 toys.
A better analogy would be google search. There are millions of results but only ~10 are shown at a given time.
So right now I'm using google app engine (python) and django templates. One way I thought of to remedy this problem would be making all the query results go into a div which could then be modified through javascript to give a similar effect. However, if someone were to click their browser's back button, they wouldn't go where they originally came from.
Thanks in advance. Any help would be useful...I don't know what this technique is called so google hasn't been really useful :(
Edit: based on responses, I found my question was solved here: How to use cursor() for pagination?
Look into query cursors. Thay are made to be serialized and sent to client, to be used in creating "next" and "previous" paging requests.
NOTE: don't use offset on queries. This can be VERY expensive, as it actually fetches (and charges) all entities up to offset+limit position, but returns to application only limit results.
I'm not sure that putting all the results as hidden content in the HTML and manipulating it using JS is a very good idea if you might have a large result set (think about what happened if Google used this approach). There's also the back functionality issue that you've mentioned.
So, as for querying a wanted "results page" each time, I think the Google's GQL Reference might help you, take a look specifically at the LIMIT clause, it can help you create the paging mechanism you're looking for by supplying it with the number of items-per-page you want as "count" and the numbers of items-previously-viewed as "offset" (0 at first call).
As for displaying, I think that the Google Images / Facebook News Feed approach might also be interesting to think about (loading on scroll instead of paging), but that's a matter of your personal choice :)
Hope this helps, good luck!
EDIT: After reading Peter's answer, I found it much more efficient to use cursors for pagination, a good reference is given in his answer.
So I have been looking around for a couple hours for a solid solution to handling site navigation in CakePHP. Over the course of a dozen projects, I have rigged together something that works for each one, but what I'm looking for is ideally a CakePHP plugin that handles the following:
Navigation Model
Component for handing off to the view
Element View Helper for displaying the navigation (with control over sublevels displayed and automatically determining the "active" item based on URL and/or controller/model/slug
Admin pages for managing a tree of navigation
Any suggestions for an all-in-one solution or even the individual components would be very appreciated! Or even suggestions on how you have handled it in the past
We had this issue at work recently and i ended up whiping up a helper that would take query from the contents table and convert that into a menu. As it needed to become more flexible the code got worse and worse up to the point where i am currently rewriting it.
Don't hold your breath though as i will be taking my time to make it work right as it needs to be very flexible but it cant be confusing to use.