Forum:Wikia is changing javascript frameworks

Hi all,

Over the next few weeks, Wikia will be transitioning from the YUI javascript framework to jQuery. For most everyone, the only thing that this means is that the site should run faster once we're completely done with the process; however, if you have created custom javascript in your MediaWiki:Common.js or MediaWiki:Monaco.js that relies on YUI, you may need to update the code to ensure that it continues to function properly. Here is an email that Christian sent to the wikia-tech-l mailing list regarding the change: Jesús and all,

Sorry for the delay in communicating this change. We've been heads-down on optimization work all week and are just now coming up for air. Here's the full story:

Several months ago, we added jQuery into the mix with YUI, mostly for its more accurate offset function. Some of our YUI features had already been written with $ as an alias for YUI's get function, so we worked jQuery around that fact. Now, it doesn't make a ton of sense to employ two javascript frameworks, so we had to make a choice. After evaluating Dojo Toolkit, MooTools, YUI 3, and jQuery 1.3, we've decided to transition Wikia's frontend to jQuery. We'll do this in a couple of stages.

On May 13, as Jesús noted, the $ variable will an alias for jQuery. We'll still continue to load YUI, so no transition from YUI to jQuery is necessary for now. If you have any scripts that use $ for YUI's get, changing the alias is pretty easy: $("some_element") becomes: YAHOO.util.Dom.get("some_element") In the same release, jQuery will also be updated to 1.3.

On June 3rd, the first phase of the "Lean Monaco" optimization project is scheduled to be released. At that time, YUI will not be loaded on article pages, but will still be loaded on edit pages. All of Wikia's extensions that are used on article pages will have been optimized and transitioned to use jQuery. If any of you use scripts that are dependent on YUI, and you haven't transitioned them to jQuery, you can always include a Yahoo-hosted build of YUI via MediaWiki:Monaco.js. Yahoo-hosted scripts can be configured here: http://developer.yahoo.com/yui/articles/hosting/

After the first phase, the second phase of our front end transition will completely remove YUI from the site, leaving jQuery as the sole javascript framework. We haven't yet met to discuss the timing for the second phase, but we'll keep Wikia-tech-l posted on the plan.

-Christian If your wiki has code that might be affected by this change, please subscribe to the wikia-tech-l mailing list for future updates.

Thanks! --KyleH (talk) 23:03, 11 May 2009 (UTC)


 * KyleH i would suggest the potential benefit of using the wikia talk msg feature to inform this to every body more effectively --


 * It's possible, but to be frank, 99.9% of users and most admins won't care: as changes go, it's irrelevant to most wikis, as they don't use custom JS. We'll likely make more notices as we get closer to the change. 13:55, 12 May 2009 (UTC)


 * How do I know my Common.js code will be compatible or not? -- LordTBT Talk! 22:40, 12 May 2009 (UTC)


 * I think only someone with a decent JS knowledge and experience would know.
 * So, that exclude me.
 * So, i will need help with : c:fr.guildwars:MediaWiki:Common.js, c:fr.guildwars:MediaWiki:Monobook.js and c:fr.guildwars:MediaWiki:Monaco.js. — TulipVorlax 01:53, 13 May 2009 (UTC)


 * Only your MediaWiki:Common.js looks to mention anything to do with Yahoo (however, I don't know enough to say whether that could be an issue). Edit: actually, I notice that code is for LinkSuggest improvements - we've been updating LinkSuggest, so I'm not sure what purpose that code has now. 13:48, 13 May 2009 (UTC)


 * Yes, there's old code that i wasn't able to "extract". But there's also code to make the "auto-sumary" (Résumés prédéfinis) drop down to show above the sumary box. — TulipVorlax 01:27, 14 May 2009 (UTC)


 * As it has appear thats my point little wikis have custom JS and from those many wikis copy their JS or CSS with out knowing how to really make it work, and like always not every body comes to central to be inform and i guess like always we will get most complain when the change is made and people come here to get help and complain they where not told and then e direct to this page... --

Testing and Timing
Hi everyone,

I want to give you a heads-up on updated timing for our transition away from YUI, and some information about how you can test your wiki on the new skin.

Today, we added a new temporary option to user preferences called "Use Awesome / LeanMonaco". You will find it on the skin tab under the Monaco themes. Enabling this option will allow you to browse Wikia using the new skin which will no longer load YUI on article view pages, like Christian mentioned above. If you have created custom javascript for your wiki, I encourage you to select that option and test to ensure that everything on your wiki works properly when viewed with the new skin. You can also test single pages using the new skin by appending "?useskin=awesome" to the end of any page title.

Currently, we plan to migrate to this skin site-wide on Wednesday, June 24th (not June 3rd as originally planned).

If you have any questions about this change, please let me know.

Thanks! --KyleH (talk) 21:38, 16 June 2009 (UTC)


 * Ah ah! It's our (my) National Holiday that day. ;-) — TulipVorlax 03:01, 18 June 2009 (UTC)

Table of content
I'm not completely sure if this has something to do with this change, but the table of contents does not show up properly for anonymous users (like that). The hide/show link does not work (it also takes a while to show up). However, if you log in an account and log off after, it will show up correctly. You need to clear your cookies/cache/etc. to see it. It does not work on all the browsers I have tested (Firefox, Opera, Chrome, IE8). I have asked someone else to see if it was just my computer, but it appears it happens for all users without an account. --D. (talk · contr) 18:15, 19 June 2009 (UTC)
 * I confirm this. It is also happening for IE7. -- ◄mendel► 22:46, 19 June 2009 (UTC)
 * It's only been two days but... I'd like to know if anyone on the staff has noticed this. :X --D. (talk · contr) 19:02, 21 June 2009 (UTC)


 * I've tested on both Firefox 3.5 and IE8 (compatibility mode on and off), with and without the new skin, and it seems to be working okay. We did make a change to make ToCs collapsed by default for anons, but the show/hide link is showing and working correctly here. Any particular wiki you're seeing this on? 13:10, 22 June 2009 (UTC)
 * It's for all wikis. If you log out and just test it, it'll work instantly, so you need to clear your cache/cookies to see the bug. It's not just me, since mendel reported it doesn't work for IE7, and I've asked other people without an account as well. It looks like it works after waiting for a bit, but it doesn't seem to always work. --D. (talk · contr) 14:57, 22 June 2009 (UTC)

Determination?
How does one determine if their wiki may be affected by this? Although I do a lot of work in Javascript, I'm no tech and to me, javascript is javascript is javascript. How do I determine if my specific javascript code may be affected, and how should one go about making changes if it causes problems? ~ Michael von Preußen (voicemail) &bull; (nation)
 * Go to Special:Preferences, select the skin tab. Click on the checkbox wich have Use Awesome / LeanMonaco next to it, then save the prefs. — TulipVorlax 08:43, 20 June 2009 (UTC)

Refresh?
Decided to post under a new comment, but I'm wondering if the change has been implemented, and if so, if it may be responsible for what seems to be a partial page refresh every few seconds? It's really annoying, and seems to be all wiki. ~ Michael von Preußen (voicemail) &bull; (nation)


 * How long have you been seeing this, and is it on every page load? Also, what browser and OS are you using? 15:48, 22 June 2009 (UTC)
 * It's been happening for about a week, and seems to affect all pages (even Editing pages). My browser is Opera 9, and my OS is Vista Premium.  It seems to affect all pages (even Edit pages) but it does not happen all the time.  Furthermore, it is not a full page reload, as my page stays in the same location and (on Edit pages) I don't lose any content I've typed.  It seems to be an iframe or equivelant reloading, though I cannot find anything in the source code to indicate such frames exist.  I can see the reload occuring when on the tab due to the status bar activating, and if I'm not on the tab I can notice it occuring due to Opera changing the color of the tab text to blue when a page reloads. ~ Michael von Preußen (voicemail) &bull; (nation)

How to fix
Er, along with wondering how to tell if our Javascripts are affected, how do we fix them if they are? We have kind of a lot of custom script on Wookieepedia (common, functions, hover, monobook, along with a few that I semi-understand enough to tell they don't import much or aren't used) and two of the people who wrote a lot of it are gone now. I just know enough about JS and CSS to be a danger to myself and others, so we'll need help if this affects us. -- Darth Culator  (Talk) 14:45, 22 June 2009 (UTC)


 * The main change is the migration from YUI to jQuery, so all references to YAHOO should be removed/Changed to jQuery. The onlyreferences I see are YAHOO.util.Event.onDOMReady( ... );, that can be safely replaced by $( ... ) --Ciencia Al Poder (talk) -WikiDex 18:26, 22 June 2009 (UTC)
 * How come all my YAHOO references are still working? Has the switch over not occurred yet?  If not, is there any way I can stay on YUI by simply importing the YUI javasheets in Common.js? ~ Michael von Preußen (voicemail) &bull; (nation)


 * Yes, the switch hasn't been done yet. See this message for the switch plan --Ciencia Al Poder (talk) -WikiDex 19:17, 22 June 2009 (UTC)
 * I have tested it with the LeanMonaco setting, and all the YUI still works. If it's being disabled, why does it work with the test? ~ Michael von Preußen (voicemail) &bull; (nation)