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.

Ajax - best technique for processing large amount of data

I would like to know, what's the best method to retrieve and use a large amount of dynamic data.
For example:
I have a big website with a lot of fields, which dynamically create popups. The popups are created with a Javascript template engine, which needs JSON encoded data.
Now what I can do:
Every time i request a popup, the client fetches the JSON data via AJAX
I can create a Javascript var via PHP, which stores the data for all possible popups in the HTML code
Or I can fetch the data via AJAX and cache it, in a Javascript var
So which one of these is the best one?
What are the disadvantages of them?
Or how would you attach/load the data for these popups?
BTW does anybody know why all the facebook popups are so smooth? It seems that they are created asynchronously, but they are so fast - like they were already embedded.

Pre-emptive caching.
Basically your 'pop-ups' (god knows why you have so many - there must be a better way :-D hehe) will have a pattern or logical order or whatever.
Using a combination of:
Loading the Main / Most likely to be first used pop-ups data and storing that in a var.
I would highly recommend trying to do this with JSON or similar and store data for 10-20 pop-ups together - downside is performance - have to parse whole file for 1 pop-up (but modern browsers / PCs - not much issue) - plus side number of http requests - the killer of site speed.
You COULD** start loading data for a button etc. on HOVER (as well as click) - milliseconds make prizes you know!
Finally - just ajax the data in and keep it small - the more you can strip out of the ajax call and pre-load (image sprites on page load etc. etc.) the faster your site will respond.
However without knowing:
how often the data will update
what sort of data you are sending (is it all graphs, all text etc.)
how many of these pop-ups you have
how often a new pop-up will be loaded
what device(s) you users will be using
etc.
I can only give wild stabs in the dark!

I am working on the same thing now and find a good introduction blog http://blog.mariusschulz.com/2014/02/05/passing-net-server-side-data-to-javascript, hope it can give you some suggestions.

Email processing with NodeJS

I'm writing a Node application which among other things needs to receive email and process it so that it can be rendered in a Web page (as happens in Web mail, list archives, etc.). I've got the receiving part covered with Haraka (https://github.com/baudehlo/Haraka). From there to storing the received emails in Mongo is easy, and so long as they're plain text I can display them.
The part I'm missing is handling the rather involved varieties of ways in which email content can come, including alternatives, HTML, attachments, inlined images, and much more. That's a rather steep amount of functionality to have to put together, and I can't seem to find a JS library that will do it for me. Given the number of libraries out there and the speed at which new ones are added, it might just be that I've missed it — so pointers welcome!
And failing that, if I were to port an existing library for this over from another language, which one(s) would you recommend I look at?
Thanks!

You should check out haraka-couchdb and the other work maxogden is doing.
https://github.com/maxogden/haraka-couchdb
https://github.com/maxogden/couchmail
Haraka-CouchDB deals with storing the attachments. At the very least it should tell you how to do it with Mongo too.
At some point I'm hoping to put a simpler layer over the email parser in Haraka, so that you can just see the email contents easily - but that requires a javascript HTML to Text converter. Or I guess you could do it the other way around and convert the Text to HTML.

Im probably a little late responding, But I had a similar requirement for persisting emails in mongo-db. I created this stub of code that gets the body of emails and inserts into mongo, Next iteration is attachments.
The plugin can be found at https://github.com/jamescowie/haraka-mongo

Check out Kyatchi -> https://github.com/hamin/kyatchi
hope that helps

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.