Develop Reference

JavaScript vs PHP in sorting an array

I am getting the information from the user. Then I am to sort the information (Alphanumerically), and give it back to the user again, hence not saving it to the database.
I am able to use either JavaScript (you could even count on jQuery), or PHP to do the sorting. Since the data might contain many lines, I am wondering about approaches below for the sorting:
let's say I tokenize all the lines using an array called lines
in JavaScript lines.sort();
in PHP sort($lines);
I am very keen to know if client-side or server-side would be doing this any differently, mainly in terms of speed. Also, if accuracy is important, then would they be any different at all? Please explain why.

1) jQuery sort() is speedy as it has client side load.
2) For server side sorting we need to find from whole data not only from display in current page for pagination.
For Server side sorting is best for:
Large data set
Faster initial page load
Accessibility for those not running javascript
Client side sorting is best for:
Small data set
Faster subsequent page loads
Ability to let the user sort without loading page
That makes difference between server side sorting and client side.

It would depend on the situation. Javascript means client side load. So if the client has a slow system it might take longer. But server side means you would have to get the data into php (either database or by request etc.) and after the sort back to the client.
One other thing to think about is that php is controlled. You can assure the output is the same. In Javascript it should be the same on every system. But different browsers could generate different results on sort.

Save Value State for Public Sharing (Add to URL)

http://liveweave.com/xfOKga
I'm trying to figure out how to save code similar to Liveweave.
Basically whatever you code you click the save button and it generates a hash after the url. When you go to this url you can see the saved code. (I been trying to learn this, I just keep having trouble finding the right sources. My search results end up with references completely unrelated to what I'm looking for, example )
I spent the past two days researching into this and I've gotten no where.
Can anyone can help direct me to a tutorial or article that explains this type of save event thoroughly?

To understand the functionality, it is best to try and identify everything that is happening. Dissect this feature according to the technology that would typically be used for each distinguishable component. That dissected overview will then make it easier to see how the underlying technologies work together. I suspect you may lack the experience or nomenclature to see at a glance how a site like liveweave works or how to search for the individual pieces, so I will break it down for you. It will be up to you to research the individual components that I will name. Knowing this, here are the keys you need to research:
Note that without being the actual developer of liveweave, knowing all the backend technology is not possible, but intelligent guesses will suffice. The practice is all the same. This is a cursory breakdown.
1) A marked up page, with HTML, CSS, and JavaScript. This is the user-facing part of the application, where content can be typed, and how the user interacts with the application.
2) JavaScript to asynchronously (AJAX) submit the page's form to the backend for processing.
3) A backend programming/scripting language to process the incoming form. In the case of liveweave, the form is POSTed. It is also using PHP to process the form.
4) A database table with a column for each language (liveweave has HTML, CSS, and JavaScript). This database will insert the current data from each textarea submitted in the form and processed by PHP as a new row. Each row will generate a new hash and store it alongside the data just inserted. A popular database is MySQL.
5) When the database insert is complete, the scripting language takes over again, and send its response back to the marked up page (1). That page is waiting for a response from the backend. JavaScript handles the response. In the case of liveweave, the response is the latest hash to be used in the URL.
6) The URL magic happens with JavaScript. You want to look up JavaScript's latest History API, where methods like pushState will be used to update the URL in the browser without actually refreshing the page.
When a URL with a given hash is navigated to, the scripting language processes the request, grabs the hash, searches for the hash in the database table, finds a matching row, and populates the page's textareas with the data just found.
Throughout all this, there should be checks to avoid duplication and a multitude of exploits. This is also up to you to research.
It should be noted that currently there are two comments for your question. Darren's link will indeed allow the URL to change, but it is a redirect, and not what you want. ksealey's answer is not wrong; that is one way of doing it, but it is not the most robust or scalable, and would not be the recommended approach for solving this.

Javascript/jQuery tree renderer

I need some help in choosing a "tree renderer" similar to jsTree. Since my requirements might be a little different, I would like to ask you to recommend a (preferably jQuery based) plugin for me.
I am trying to (re) write an organization browser, which shows who reports to who etc. The catch is that my server can only throw back JSON (or whatever format) one time to the client. That is, on page load, my HTML would have a JSON map containing about 2000 employees, and jsTree/whatever-solution-you-recommend, would render this as a tree.
By one-time, I mean that the client JS cannot repeatedly / progressively ask the server for more data in an AJAX-y fashion. (This is due to some complexities at the server side).
Do you think jsTree is fit for this? I don't want the entire user experience to become sluggish with a 1500-2000 employee org-chart (2000 is the limit here).
Any pointers would help, thanks!

you can try jQuery plugin
Plugins/Treeview/treeview
http://docs.jquery.com/Plugins/Treeview/treeview

Caching data in hidden & dynamic tabs of tabview

In my application, I have groups & the list of groups specific to a user are shown to him through a left column list, in a similar fashion as google groups(shown in image below).
I want that as the user moves on with switching to different groups shown in the list, the front-end should cache the visited groups, so that next time user comes back to the same group there is no need to read again from the server.
I am thinking of implementing this through dynamically adding hidden tabs to the jquery tabview whenever a new group is visited.
Does this sounds like a good optimization ? Is this kind of optimization used on sites ?
(I would be auto-updating the content of groups after every specified interval so that data shown in the group is most fresh and not just the cached one.)

I'll give you a reason why you shouldn't do this and instead look at HTTP caching. Hopefully you're already a RESTafarian in that you use and understand the basic principles of REST and why HTTP is scalable. There's no need to invest in complex caching schemes with JavaScript if you make sure that your GETs are cached locally, and this is probably what you should be focusing on.
By using the HTTP caching mechanism you can completely eliminate any server round-trips if you so please. Invalidation of cached data can be tricky but for general viewing purposes this is something which is pretty straight forward and it's going to give you really good performance (without increasing the complexity of your existing JavaScript, which I recon that's a good thing).

Handling large grid datasets in JavaScript

What are some of the better solutions to handling large datasets (100K) on the client with JavaScript. In particular, if you have multi-column sort and search capabilities, how do you handle fetching (and pre-fetching) the data, client side model binding (for display), and caching the data.
I would imagine a good solution would be doing some thoughtful work in the background. For instance, initially, if the table was displaying N items, it might fetch 2N items, return the data for the user, and then go fetch the next 2N items in the background (even if the user hasn't requested this). As the user made search/sort changes, it would throw out (or maybe even cache the initial base case), and do similar functionality.
Can you share the best solutions you have seen?
Thanks

Use a jQuery table plugin like DataTables: http://datatables.net/
It supports server-side processing for sorting, filtering, and paging. And it includes pipelining support to prefetch the next x pages of records: http://www.datatables.net/examples/server_side/pipeline.html
Actually the DataTables plugin works 4 different ways:
1. With an HTML table, so you could send down a bunch of HTML and then have all the sorting, filtering, and paging work client-side.
2. With a JavaScript array, so you could send down a 2D array and let it create the table from there.
3. Ajax source - which is not really applicable to you.
4. Server-side, where you send data in JSON format to an empty table and let DataTables take it from there.

SlickGrid does exactly what you're looking for. (Demo)
Using the AJAX data store, SlickGrid can handle millions of rows without flinching.

Since you tagged this with Ext JS, I'll point you to Ext.ux.LiveGrid if you haven't already seen it. The source is available, so you might have a look and see how they've addressed this issue. This is a popular and widely-used extension in the Ext JS world.
With that said, I personally think (virtually) loading that much data is useless as a user experience. Manually pulling a scrollbar around (jumping hundreds of records per pixel) is a far inferior experience to simply typing what you want. I'd much prefer some robust filtering/searching instead of presenting that much data to the user.
What if you went to Google and instead of a search box, it just loaded the entire internet into one long virtual list that you had to scroll through to find your site... :)

It depends on how the data will be used.
For a large dataset, where the browser's Find function was adequate, just returning a straight HTML table was effective. It takes a while to load, but the display is responsive on older, slower clients, and you never have to worry about it breaking.
When the client did the sorting and search, and you're not showing the entire table at once, I had the server send tab-delimited tables through XMLHTTPRequest, parsed them in the browser with list = String.split('\n'), and updated the display with repeated calls to $('node').innerHTML = 'blah'. The JS engine can store long strings pretty efficiently. That ran a lot faster on the client than showing, hiding, and rearranging DOM nodes. Creating and destroying new DOM nodes on the fly turned out to be really slow. Splitting each line into fields on-demand seems to work; I haven't experimented with that degree of freedom.
I've never tried the obvious pre-fetch & background trick, because these other methods worked well enough.

Check out this comprehensive list of data grids and
spreadsheets.
For filtering/sorting/pagination purposes you may be interested in great Handsontable, or DataTables as a free alternative.
If you need simply display huge list without any additional features Clusterize.js should be sufficient.