Mapping of jQuery functionality to YUI 3? - javascript

I have a project that is using both jQuery 1.3.2 and YUI 2.6, and it has come time to pick one or the other. I have a lot of developers that love jQuery and can't live without it, but I think some of the features of YUI 3 are a better fit for the project (e.g. the base widget).
I was trying to find a mapping of functionality between jQuery and YUI 3, and found jQuery - YUI3 Rosetta Stone, which compared jQuery 1.4.2 to YUI 3.0.0. I am looking at YUI 3.1.1 or the 3.2.0 preview, and wonder if there were other resources? For a brief moment, I was tempted to write a adapter/shim layer, but think that would just confuse the issue and it is better for developers to work in one paradigm or the other.
Update: I see the above content has been migrated to http://www.jsrosettastone.com/, and "The YUI team has graciously taken over the upkeep." It now compares jQuery 1.4.2 and YUI 3.1.2

Carlos's Rosetta Stone is the best resource I know of comparing the two libraries feature-for-feature. If you find inaccuracies given the evolution of YUI since 3.0.0, Carlos does have the resource up on GitHub and welcomes updates/contributions to it.

I'm slightly confused. If you don't want to rewrite your jquery code: include jquery. If you want to use only one library and that's yui: rewrite the legacy jquery code to yui.
But if you're moving from yui2 to yui3, you'll have to rewrite the yui code as well, they're different enough. I think the first thing you need to do to have think - if there are resources for a refactor, I'd avoid thinking in shims and extra layers.
The personal opinion though is yui3 is still not quite ready for primetime, despite all the cool and very elegant stuff they're doing.

Related

What are some example javascript frameworks that people use?

I am really big fan of jQuery, but I don't see it as a framework for a site, more like a library. I am looking for some sort of framework that will give me the tools to build really structured applications in javaScript. I have found backbone.js, but find it somewhat confusing. Is that a good one, and are there others similar to it? an MVC pattern would be really cool, but I havent found anything.
I use currently RightJS with RequireJS. It has worked out well for my purposes. I used jQuery + jQuery UI previously. The current combo fits my style better (more barebone functionality instead of just DOM wrapper + UI plugins).
I know RightJS isn't that popular. The docs are adequate and the author is responsive. This makes up for that. :)
Some other alternatives:
qooxdoo
MooTools
Prototype
I'm sure there are plenty of more alternatives. It really comes down to your preferences and exact needs.
Personally I have been looking at Sencha's offerings (ExtJS, Sencha Touch) lately. The latter is particularly interesting as it provides simple means to write cross-platform apps for mobile devices. Works great in iPad at least!
The Google Closure Library & Tools is pretty good, and is the framework they use to build Gmail, Google Maps, and so on.
jQuery and YUI 3: A Tale of Two JavaScript Libraries is a story about a jQuery developer that found that YUI3 was more "framework-like" and apt for his project.
I've been using YUI2 for years and it never disappointed me.
If you like dynamic OOP languages like Ruby/Python, you should really check RightJS. It is very compact, fast and simple. RightJS is built fully on OOP paradigm and allows you to implement serious stuff in a serious but not boring way.
As for the dom part, it doesn't exactly uses MVC as is, but RightJS has OOP dom-wrappers, with inheritance and so one. That provides basically the same result, but with much less headache.
And if you're particularly interested in patterns, check this out https://github.com/rightjs/rightjs-patterns :)

Is there a jQuery alternative for building faster web sites

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.

Switching from JQuery to RightJS

I am currently using JQuery and recently heard about RightJS. RightJS seems to be faster, lighter & more object oriented. But I was wondering if RightJS has somethings seriously missing compared to JQuery (Other than the huge plugin base).
Update:
I tried RightJS in a small web project & decided to use it on a few more projects. But I would still stick to JQuery till I am confidant about RightJS. So far RightJS seems to be doing all the things I do with JQuery (mostly ajax & selectors).
Nahar,
Nikolay, the author of RightJS is here. Couple of notes.
1) Mentioned above jQuery size is incorrect because 24k is the size of the gzipped version. Gzipped RightJS weights 14k.
2) I believe the_drow just don't know what he's talking about. RightJS has all the same as jQuery, Moo, Dojo or Prototype. More of that in RightJS you have things like classes, advanced form-features and cookies already packed into those 14k when jQuery has those things as plugins.
Then RightJS also has custom builds http://rightjs.org/build
As for dojo, I tried it on two projects before, and if you would ask me, I would say spare your time, jQuery is better.
The only problem with RightJS is that it's still an underground and we are still growing the critical mass of users, so occasionally you'll have to use your own brain instead of googling answers.
First of all jQuery currently weighs 24KB and rightJS weighs 30KB which means not as lighter as jquery.
Generally, when choosing amongst javascript frameworks, you consider these aspects:
Selectors
DOM traversal
DOM manipulation
Utility functions
Event handling
Ajax
Other than that, one of the most important factors are:
active/continuous development
community support
More Readings:
http://trends.builtwith.com/javascript
SideNote: Thanks for letting me know about RightJS :)
If you want something faster and more object oriented try the dojo toolkit.
RightJS seems nice but it's like any other minimal toolkit. I believe it's very lacking comparing to the big guns like jQuery, Dojo and Mootools.
With Dojo you can plug a datastore just about to any widget and communicate with the server side easily.
It has all of the quering capabilities jQuery has and also has a custom build process to include only what you need.
It it considered faster then jQuery in certain browsers/use cases but both are great.
There's nothing wrong with jQuery.
Both Dojo and jQuery has great community support and are continually developed.
If you are developing webapps Dojo is the right toolkit for you as it has a very comprehensive UI library.
Just check out their website.
See also this wikipedia page.

YUI and/or jQuery for a new project?

If I am starting a new project how should I pick between using YUI 2, YUI 3 and jQuery?
I know there are a bunch of questions/answers already about can you use them together, but I am trying to figure out what criteria I should be thinking about to make my decision.
Are they overlapping?
Is one better at GUI and the other better at internals?
Do they play well together? My understanding from other questions is that they can live in different namespaces, so they can live together, but that doesn't necessarily mean that it is good to use both.
Thanks!
If you are familiar with neither, I personally have found jQuery's documentation and API easier to understand than YUI's, at least for simpler things. It also appears there is more jQuery related information than YUI on stackoverflow.
YUI does have its users and supporters though, so check it out in case you end up finding it suitable for you. It's got a huge library of additional modules you can use for complex web applications.
My usual advice would be to go with whatever you're familiar with, and I say this because I don't think it's worth dropping one to start learning the other from scratch. But if you are familiar with neither, then you should check out how easy the documentation for both is to understand.
PS I would not recommend YUI2 if you're starting anew as it has been superceded by YUI3, which is much better designed.
We need more information about the type and size of the project before a proper library can be suggested.
For example, if you're building a semi-complex/large-ish web app, I would suggest Dojo or ExtJs. Otherwise, for smaller projects, jQuery might be more appropriate. I cannot comment on YUI as I have not used it.
Impossible to say without knowing more details about the project. Use jQuery or Prototype for things like DOM manipulation and making autocomplete, etc. If you need a more powerful Javascript implementation take a look at ExtJS, which is basically a full stack framework for Javascript.
Both are JS frameworks and there to help you. YUI is known to be more natural in them and more closer to the original Javascript while jQuery is known as more easy and you find more jQuery users and support around then YUI. However, as said earlier, it depends on the project, if it is likely that you will be making your own custom widgets, I will suggest you to go with YUI but if it's like a simple e-commerce website in which you just need some fancy galleries and shopping cart, go with jQuery, you will learn and implement that quickly. I am not saying that you can not go more in depth with jQuery but my impression is that jQuery is more of a CakePHP for PHP like of framework which gets you off the grounds quickly.
In my opinion there is no need for you to use them side by side in a single project, that will just produce the over-head as both do whatever you want to do in them i.e creating dialog panels, autocomplete quick searches, event related utilities etc.
I am writing down a series of beginner and mid-level tutorials for YUI users, let me know if you find them useful or if there is anything else where I can help.
http://ciitronian.com/blog/tag/yui/

Is it worth it to use jQuery for Ajax instead of building your own JavaScript?

Aside from the framework, is jQuery worth using rather than creating your own javascript? I've always debated if the framework was better to use than to create your own calls. Are their disadvantages of using it?
Sorry for beginner question, I'm trying to feel out if it would be better to use this and create some of the ajaxish workings of my site rather than develop it from scratch.
Are there other frameworks out there that would be better to use to create an ajaxish website?
Yes, jQuery is worth it. I speak as someone who resisted using any library for a long time, then finally saw the light.
I do recommend that you build some hand-rolled Ajax interactions before you dive into using jQuery for Ajax, so that you understand exactly what is happening with Ajax. Once that's achieved, though, let the library do the dirty work.
jQuery (and most other framework) are for making difficult things simple. It keeps you from having to write cross-browser compatabile code. It keeps you from having to write recursive methods to update multiple dom-elements. It basically cuts your development time down substantially, and saves you a lot of frustration.
Stackoverflow Archive:
Which Javascript framework (jQuery vs Dojo vs … )?
Great discussion (with lots of involvement) over various javascript frameworks. It will benefit you to browse this in depth, or even at a cursory level.
When should I use a javascript framework library?
Which Javascript Framework is the simplest and most powerful?
What JavaScript library would you choose for a new project and why?
Which Javascript Ajax Framework is most powerful and very lightweight?
Which javascript framework can be used for all browsers?
If you like reinventing the wheel, write your own. For me, I prefer to spend my time focusing on solutions rather than lines and lines of javascript code. I'll use JQuery to save resources and frustration
One thing I want to add is for the past couple of months, I was trying to fill a web developer position for my team, and it proved to be a difficult task.
Lots of folks knew how to use a JS framework (JQuery, ExtJS, YUI...), but once outside of the framework, they found themselves in an unfamiliar ground. I had a self-claimed senior JS developer with over 10 years of experience couldn't tell me how to use function.call() or function.apply() or how to implement simple inheritance in JavaScript.
Framework is great and definitely useful, but you will also want to make sure to know how to implement the basic OO concept and DOM manipulation without the framework.
BTW, we use ExtJS and if you are starting to pick a JS framework, you may want to look around to see which one suits you the most.
jQuery is a big project with many users. By that nature, it will be better tested than anything you write by yourself.
It is a great framework for most uses I've come to need.
Is there anything in particular you are trying to do?
jQuery helps you avoid worrying too much about cross-browser JavaScript issues, and helps you get things done quickly. As far as I'm concerned, the key reason for using it vs your own hand-rolled JavaScript probably is the "don't re-invent the wheel" cliché.
Apart from added productivity, JQuery's main plus is that it takes all (most) of the pain out of cross-browser testing.
There is no reason you cannot write your own code and splash in JQuery where needed. JQuery is incredibly lightweight for what it provides and you will quickly find that you can do most takes easier in JQuery (especially once you start using the plugins for it) than by hand. I am a big believer in not reinventing the wheel. The JQuery code is tested by tons of people and there are so many plugins to chose from I could almost guarantee that what I want to do has already been done before.
If you are starting with a clean site, now is the perfect time to take JQuery for a spin though, because if you do get hooked on it your code will be more consistent if you solve similar tasks using the same technique. Go give it a try :)
I would highly recommend using jQuery (or any comparable framework) over straight JavaScript. It just makes common programming tasks easier, most notably cross-browser development.
jquery makes js related work easier and more important standardised/compliant.
If you need re-assurance as to its use:
MS & Nokia are bundling it in their dev platforms.
Its compatible with many of the newest web technologies.
It has a large developer community supporting it.
There are many plug-ins available to aid RAD.
and more...
Give it a go!!
Definutly! Jquery wil save you a lot of time struggling over code and makes your code easier to read to non-experts.

Categories

Resources