I'm sure this problem has multiple solutions. I am currently designing a web application to feature an interface similar to what you would see in a Facebook Activity Stream, in terms of how the content loads.
I want the page to:
Load a given number of objects initially
Load the next set of objects once the user reaches the object at the bottom of the screen, AKA when object, say, 15, becomes visible onscreen, I want to load 15 more objects, and do the same when object 30 appears etc.
I have, in my database, potentially hundreds of thousands of these entries, and I want to make sure the user only has to load a given number at a time to reduce stress on the servers etc.
Since I'm using Django, I figured this would be some really cool JS mixed with django-template language, but I'm not really sure.
Is this more of a CSS problem?
Where do I start in thinking of this? What technologies should I consider? Are there any well known modules I can take advantage of here?
Thanks for your time.
I take it as you are confident in your Django skill.
If you want to do yourself, then jQuery and jQuery.ajax are 2 things you need to read carefully. Basically you need to check with jQuery if the user scroll to the end of the page, then make ajax call to Django to fetch new data and append to bottom of the page.
If you want to use a ready made package, I think Django endless pagination will do the job.
Related
First of all, I have a background in C (++), Java, MATLAB and Python, mainly used for scientific and electronic applications (Math operation on data, reading data from sensors, microcontrollers).
But i'm relatively new to both HTML (CSS) and Javascript.
For both I've read some books. In HTML books, multiple pages are done by links (<a></a>).
In javascript (which feels a lot more natural to me than HTML), I've seen some examples where there is only 1 html page, full of divs, who are shown and hiden each time a certain page needs to be shown.
This is done with the Jquery command $('#div1').hide() and $('#div2').show();
Now my question is, what is the best practice? When is it better to have multiple HTML pages, and when is it better to have just hide/show divs with Javascript?
Thanks
Not Every one Can Use Javascript. Not Every Computer Or Browser Has The Basics Of Java Installed. But Every Computer Can Read HTML every Browswer Can Read HTML.
To identify If a visitor is using java.
How to check whether Java plugins are installed or not in a browser using Code .?
Java is mostly installed now days with the browser some basic functions. But older navigator or IE browsers dont always have it installed by default.
More Info Here also
How can I detect the Java runtime installed on a client from an ASP .NET website?
The easiest is using <ul><li> css navigation themes. Check this site out for more info.
https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
When you have multiple html pages and user clicks on links, then on each click a new web page has to be fetched from server and then rendered.
Whereas when you do it in java script the same web page will be altered, so there are no additional requests to the server. And this will be much faster than loading a new web page.
But remember the initial loading time is second approach is longer but its negligible.
Let me point out that there is no "best practice" to the question that you are asking. It is entirely up to the team if they want to push all the content in one page or keep them separately.
If in case you have a content that requires decent amount of images to be loaded, or contents that you are sure will rarely be seen, you might want to keep them in separate pages so as to make the page load faster.
If you have heavy contents which requires a lot of interaction with javascript/jQuery then you certainly might want to keep them in separate pages so that later when you want to debug/add to the code it can be easily done.
The vice versa of the above holds true as well.
If in case you just have small content, or simple text content then you can easily do it in a single page.
Maybe you should use a tab component ? bootstrap wraps one very nicely:
http://getbootstrap.com/javascript/
Maybe thats the best approach, also take a look at angular.js routes in specific, it should do what ever you are looking for.
I would like to have a page where a restaurant can log in and see all of their current reservations/take-out orders, and I want this page to automatically update when someone (from another computer) makes a reservation or places an order. The idea is that the restaurant would leave this page open at all times to show their current status. What is the best way to do this? Can it be done without refreshing the page?
I wasn't even sure how to refer to a setup like this, so I wasn't really able to find much using Google. Is there a word for this type of setup?
I am using rails, and I am considering using AngularJS for the front end. Any suggestions?
There are two approaches to solving this.
The first, oldest, simplest is that your webpage contains some javascript that will poll the server at regular intervals (e.g. every 10-30 seconds), to check if something has changed and then add the changed data (e.g. reload a partial).
The second approach is a bit cleaner, and it allows the server to push the changed data to the connected clients, only when it is changed.
There are a few available approaches/libraries for this:
use websockets
use pusher
use juggernaut The author of juggernaut had deprecated it, in favor of using HTLM5 SSE (server sent events). Read more.
The advantage of using polling is that it is easy, works on every browser, but you have to write more code yourself, you will put some kind of load on your server, even if data has not changed (although the load is minimal).
The push-technologies are newer, work very clean, less code is needed. But some work only in newer browser (most of the times not really an issue), and some require extra support/setting up on your server-side.
On that note: pusher is really easy to get started with, and if your load is limited, it is free.
There are still a lot of others, but this should get you started in the right direction.
I have an application for searching recommendations on different institutions.
The app itself is a single-page app based on AJAX, but to simulate statefulness the URL's are dynamically changing through the History.replaceState() method.
The URL which I'm injecting also exists as a separate HTML page, so when one copies the URL He can reuse it to load directly the recommendation he seeks for. This template is also populated by JavaScript.
the URL structure is pretty straight-forward:
http://mattat.org.il/ci/index.php/search/show_full/nsrecommendation/[idOfRec]
The recommendations themselves are clearly static, that is they do not update.
How do I go about SEO if I want all the content to be indexed by Google. Do I have to manually upload a fat sitemap with all the ID's and update it every time a new recommendation is added? or is there a more elegant way of doing it, such as a dynamic sitemap?
I see two ways of handling that.
Rely on ability of google crawler to reach (and index) all of your pages ('cause keep in mind that sitemaps are suppose only to tip google crawler, no to control it).
Like you said - generate sitemap and update it regulary when there are entries to add or remove.
The first solution assumes that somewhere on your page you have (and if not, you should) index of all recomendations and/or there are links from one recomendation to another so google can crawl through those links.
Keep in mind that providing sitemap won't necessarily mean, that google will simply jump on all of those links - indexing the whole content may take some time as it relies on google mysterious algorithms (tm).
UPDATE FROM THE OP:
I ended up using a sitemap generator I've downloaded from here.
It allows for unlimited number of pages, and a Cron Job option to periodically update the Sitemap.
Understanding that if someone had JavaScript disabled the site would not work then is there any other reason not to do this?
I am in the design phase of a new site and want to make it easy to change the server code without having to change the UI - just like a form.
This is using Python server side.
One problem, arguably, is that Ajax techniques break the back button.
By making all of your calls to the server Ajax calls, the user loses their ability to 'go back' to a previous view. Facebook exemplifies this. Click the back button on Facebook, generally, does not take you to the previous view you were presented with.
In addition, it is more difficult for a user to bookmark their current view of the site. This can make it difficult for them to share what they are seeing with others and can make it difficult to debug problems that users see; rather than just sending you a URL to recreate their problem, they have to figure out the numerous steps they took before they spotted a problem.
Personally, I think the best place for Ajax is for updating small segments of a page. If you have a page that is changing more than, say, 50%, you may want to rethink the sole use of Ajax
Potentially yes, here are two items that come to mind.
Search indexing: this would have profound impact on what content on your site search engines like Google can index. Because the crawlers do not execute any AJAX script when reading your page.
Performance: Too many AJAX calls can actually hinder performance and page load response times. AJAX should generally be used to update only specific parts of a given page if at all possible. If you can emit the majority of content in the first page get request you should, period.
For a desktop-like rich web application, I would say that the all AJAX approach is acceptable.
However unobtrusive JavaScript and progressive enhancement may be a better strategy for most categories of public web-facing interfaces.
I am trying to locate an decent example of ajax json interaction with Rails. I have a Rails app that uses standard forms and wish to improve it with some ajax, but I have not found a good example to inform me.
I have a large investment portfolio model object, which requires multiple views to input all the data. I have a mechanism that allows page-to-page transition, using divs with a style of display:none or display:block around wrapping each 'pane'. I can selectively hide/show each pane as I move off-screen to the next pane. The user can navigate around, setting values, some of which need to be fetched from the server (such as look up a stock quote). When all is done, a commit sends it all back to the server, since it is one single form. So far, so good.
Now, I need to interact with the user when he is picking individual stocks, performing auto-complete on the ticker symbol during typing and then updating a table of stocks picked. This part has me stumped, since I don't understand how I can get interactive behavior while the input form is displayed. I am hoping to review some clean examples of ajax interacting with rails.
Oh, by the way, the app is a Facebook application, so I can't use prototype or any rjs templates, but must use FBJS.
I can't seem to find an example that shows ajax updating page sections dynamically.