i have been looking at jqgrid, telerik.
does anyone have any performance metric comparisons or have any other alternative that they think is faster.
Have you tried the telerik MVC extensions. The grid is very easy to use and support all the various paging mechanisms. You may find that will do what you're after, combined with a bit of behind-the-scenes custom paging.
I am a fan of DataTables.net. I've not had any performance issues with it and it's quite straightforward to use.
Ok - I just built a quick and dirty version of the datatables and the jqgrid - loaded 1000 rows of data from an sql database and performed console.time tests in firebug.
The results where surprisingly similar with datatables barely edging out jqgrid in some situations - not enough to choose one over the other purely on performance (imo).
Related
I was wondering what the difference is between ColdFusion's built-in AJAX functionality and using a JS framework like JQuery?
It seems that ColdFusion ships with tags that can do fancy Javascript layouts and controls e.g.<cflayout> and <cfwindow>. If it can already do this then why would one want to look at JQuery?
I'm asking this question because I have been given the task of making an internal CRM application which should have a 'rich' UI. I started investigating JQuery and ExtJS which do the fancy client-side UI work. However I also noticed that CF has similar abilities. Because I am starting from ground zero I was wondering whether to spend (a lot of) time learning JQuery or ExtJS, or cut down on my development time and just use CF's built in AJAX tools.
With some good design skills, would it not be possible to create a 'rich' application with CF's built-in AJAX controls and some fancy CSS styles?
Any advice would be greatly appreciated.
Some things to consider:
Yes, you could use CF's built-in Ajax/UI stuff to build a nice application. The downside is that doing anything outside the box of what CF has baked in is a big headache., Plus, the version of Ext JS which CF has is quite old...so getting all the goodness from the latest version (v.4.2+) is not an option, since CF doesn't have a mechanism for upgrading that library seamlessly (or freely).
As others have mentioned, you should definitely use a non-CF alternative--they are all dead-simple to integrate with CF-backend anyway, so the amount of effort required to do that vs. wrestling with tweaking the internal CF stuff is actually lesser.
Which library to use? Well, you need to seriously consider your options before jumping into one or the other. jQuery (and jQuery UI) and Bootstrap are nice for design...unlike Ext JS, however, they don't come baked in with uber-rich "data-aware" components (grids, trees, etc). They are more libraries than they are frameworks (like Ext JS). On the other hand, Ext JS, for your purposes, will not be free. Unless you plan on open-sourcing your "internal" CRM codebase, you'll likely have to commercially license the software, which is on a per-developer seat basis. I think it's well worth the cost, considering what you get, but that will have to be part of your organization's calculation if you decide to go that route.
Personally, I don't recommend using CF's Ajax functionality. I've build internal tools using ColdFusion's built in javascript and they run very slow to say the least. Your best bet is to go with JQuery and Bootstrap. This could be a bit more difficult at first, but it would open a lot of doors down the road.
Good luck! Al
We are about to commence a redesign of our site and are exploring all options in improving performance. The site is fairly heavy in javascript loaded adverts, therefore we need to be really lean with the javascript we use.
Do any of you have any experience of lighter frameworks or more efficient frameworks that I could explore? Or any resources that you could point me toward? YUI looks like an interesting concept … has the loader being tested in anger? ANy good?
Any thoughts would be appreciated.
Cheers.
edit: Sorry, I wasn't clear. The sites performance currently is pretty good, we are not redesigning due to performance issues, it is due to a rebrand. We just wanted to take the opportunity to review best practices.
jQuery 1.4.2 is lean and mean. You'll be hard pressed finding something faster or more lightweight.
As an example, here is a framework test called slickspeed from mootools. It tests a framework's ability at finding elements in the DOM. The version of jQuery being tested is 1.2.6. Depending on your browser, jQuery performs exceptionally well. In my Chrome browser, jQuery beat all the others with a total time of 20 milliseconds.
And since version 1.2, jQuery has had astounding improvements in optimization and speed, especially with 1.4.
That said, a framework isn't going to make you code better. You can write some seriously slow scripts using any framework, including jQuery.
If, however, you write optimized code, jQuery can be so fast you don't even notice.
Pointy's comment above is spot on. All these guys do all day is worry about how to perform better. So it's pretty optimized.
addendum
This is from jQuery's blog:
While comprehensive benchmarks like Taskspeed can be interesting if deconstructed into individual sub-tests for further study, as a project we tend to stay away from using them as an accurate measure of true, overall, library performance. Considering how many aspects make up a library, not to mention the different techniques that they offer, cumulative results rarely reflect how an actual user may use a library.
So take that as you will.
I prefer YUI3 for larger apps and just about anywhere that 'load on demand' can offer benefits :)
I agree that slowdowns mostly stem from how you implement your app, which is one of the benefits, imho, of YUI, it lends itself naturally towards more modular implementations.
Using the yui loader to bring in page elements widget style allows for good code reuse (and caching) as well letting the user see 'something' quicker.
It won't really solve your JS ad issues though, for that, the best thing you can do is load it as near the bottom of the page as possible, and perhaps look at what loading options the adservers have.
Re: Stephen's comment
Well, raw speed for tight loops are sometimes meaningful, sometimes not. There is also the issue of the implementations used for the comparison, the YUI3 code posted in Ejohns version looks positively gimped compared to the jQuery code, look fx at the first one. Where jQuery adds almost the complete DOM element from a string while YUI3 is going thru all kinds of hoops, relatively speaking.
For a version that is written by someone who knows YUI3 have a look at http://yuilibrary.com/~msweeney/yui-tests/taskspeed/ the newest jquery isn't represented, but it does have YUI3 as ~4 times faster overall than jquery 1.3.2 in my Chrome.
Update
http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/ a jquery users experience of yui3.
Probably the best place to start off is not to ask what frameworks can help but why your current site has bad performance. I would start off with tools like Yahoo's YSlow and also Dynatrace ajax edition. Dynatrace is nice because it will point out javascript/dom manip stuff that make your pages slow. You will want to use more than just two performance tools though since they all pretty much have their own idea's on what makes a page fast. Once you have that down then I would come into a forum and state that your having performance issues with X and what can I do to fix.
vapor.js is the world's smallest and fastest javascript library
http://vaporjs.com/
I think you should have a look at zepto.js
http://zeptojs.com/
this article gives you some advices for porting your jquery code
http://blog.pamelafox.org/2012/03/porting-jquery-plugins-to-zepto-tips.html
jQuery is plenty lightweight if coded properly. It sounds like which framework you are using is not the problem, but either a) why the javascript your writing is performing slowly, or b) why you are using so many slow loading ads to begin with.
But if you really want to look into other frameworks, here's a handy comparison chart: Comparison of JavaScript Frameworks
I just wrote an internal app for our company using jquery and jquery UI (http://jqueryui.com/), mixed in with c#. I found it to be extremely lean and fast - no problems whatsoever.
the jquery ui makes it easy to theme the website...
and by adding other components like blockui, jgrowl, etc you should be able to do anything you want!
Sprint is a tiny, fast alternative.
Check out the repo for benchmarks on a few functions, compared with recent versions of jQuery and Zepto.
I have seen a number of Javascript examples to throw on top of an html table to make them sortable. The issue is that everyone I have seen and tried are insanely slow.
Any suggestions or recommendation for a good performance solution.
I've found (just in casual use, not via any intensive analysis) that the jQuery TableSorter plug-in has a decent performance rate, and is quite advanced compared to any of the other solutions out there.
Of course, it relies on jQuery, but if you were picky about footprint you could analyse the method used by the plug-in and create your own lighter implementation.
Have you tried tablesorter (powered by jQuery)?
Check it out at: http://tablesorter.com/docs/
It's pretty easy to use.
If this is for a web app and you have a lot of data, it may make more sense to do the sorting server-side using SQL or whatever ORM you're using.
The fastest way to sort that I found is to actually just sort the rows in the table. If you move a cell in the DOM the entire row will move, and so be sorted.
Here is a sample of doing this, as I don't remember the article I read about doing this originally.
http://www.eggheadcafe.com/community/aspnet/3/10051794/try-this.aspx
I've spent a lot of time evaluating various advanced table libraries, including the jquery one, the dojo one, the YUI datatable, and GWT's paging scroll table. I was unsatisfied with the performance of any of them for tables with thousands of rows (and I think paging is a poor solution as well).
I concluded that flash is the way to go with this kind of scenario.
A site that gives an example of a flash table with 10000, 100000, and a million rows can be found here.
There is also this site, which allows you to compare the performance of a javascript and flash implementation of an advanced table.
Perhaps Javascript isnt the solution here then - you could do server side sorting or consider a flex/actionscript based solution.
I was using W3 School Sort plugin and it was really slow with a table of 250 rows. Unresponsive for a good 5 seconds.
Switched to tablesorter.com as mentionned in the replies. Works like a charm. Much, much faster. No wait at all now.
I am an avid user of the YUI framework (http://developer.yahoo.com/yui/). It has its' strengths and weaknesses both performance wise and syntax wise. I have seen a bit of JQuery and I have worked a little with prototype as well but I have stuck mainly to YUI. My question is, is it better to stick with one Javascript library per application, or leverage the abilities of multiple javascript frameworks in your application?
I think it is better to use one framework for at least two reasons:
1. Code is easy to maintain because there is no syntax mix.
2. Application loads a little faster and I think should execute little faster.
My guess is that multiple frameworks is better as long as each has its purpose. If I'm building an ASP.Net web application with AJAX functionality, there may be some built-in ASP.Net AJAX Javascript libraries being used automatically that can be combined with JQuery to handle some situations. Alternatively, one could have third-party controls like Telerik's RAD controls that also bring in more Javascript code possibly. The key is to understand what each framework is adding in terms of rolling your own.
Sure less frameworks in the same website will make your life easier, so try as you can to use one framework, and if you are going to use more than one, take care from conflicts and redundancy.
If i am in your place, i will start searching the framework i have for some plugins and updates, if didn't find will add the new framework.
One more point: don't panic from using more than one framework, the big and famous frameworks such as jquery has its implementations to solve conflicts and work side by side with other javascript libraries
Also... if you use 2 diffrent frameworks at the same time, some functions in one framework could override an function in the other framework, and make ugly conflicts.. e.g the $() could be implemented in diffrent ways, and make something crash, if other functions of the framework is using it. (and they sure do!)
I think its better to use 1 framework in your development, for consistency of API and loading speed. the problem sometime is no framework is comprehensive enough to have all of our development needs.
This is just came into mailbox, their advertisement saying it's a comprehensive framework, with plenty of widget: grid with grouping, charts, forms, tab, fields and so. I haven't play it long, but it seems very promising. check here
We are going to be producing a RIA that will also be available using Adobe AIR for database management and manipulation with a php back end.
In an effort to speed up development we have decided on using YUI or EXT JS.
It appears that EXT JS out of the box will produce a better looking application than YUI but being essentially 100% JS I can foresee the application being much slower on any computers that aren't...say...up to date.
I am looking for any benchmarks comparing the two frameworks for UI & AJAX operations or any input about the speed of real world RIA applications using either framework.
Thanks for your help.
EDIT So is the general consensus that for a RIA where speed of use is a primary concern YUI is the better option? Or is it essentially, either will work?
EDIT EDIT We decided to go with YUI2 thanks for your help!
Don't fall into the trap of premature optimization. If only a small percentage of your users will be using "older" browsers, they will just have to deal with the slowness of any modern js framework - whether you choose YUI or Ext JS. Choose based on features and ease of development and applicability to your project.
When it comes to library size and speed of download to the browser - whichever library you choose, it can be customized to only include the components you need. And in production, you'll be minimizing and compressing it, so I think library size is really NOT a good measuring stick for making these types of decisions.
I posted a topic at the Ext JS forum years ago asking why the Ext Js doesn't come in packages and we are forced to use the kitchen-sink (almost). Their answer was "Ext JS is for RIAS".
I don't know what this tells you but in terms of size Ext JS is "big enough". I would recommend it for intranet apps. If you are to use it for public sites use all optimization techniques available to achieve fast loading times, compression, etc.
I also used YUI for intranet applications and i can tell you that it was lighter since not all packages where required.
We used to work with a gwt wrapper for ExtJs (gwt-ext). We developed a lot of modules with that. At some point we experienced some slow performance, specially with grid when the data was huge. In addition some memory leak with IE. But after they changed their licence policy, we started looking to other options. Perhaps some of those problems are fixed now.
Any way, now we are developing with OpenLaszlo.
I hope it helps you
If you're thinking of using Ext JS be aware that the current version (4.0.XX) has been found to be significantly slower than version 3.4, see http://www.sencha.com/forum/showthread.php?140180.
I've used YUI. It's fast. The newest library is highly modularized, so you only load modules you need. Also you can refer libraries from publicly available hosting services provided by Yahoo; it offers CDN for free.
I've worked with YUI data tables (data grids) with over 4,000 records and it still performed at an acceptable level.