Develop Reference

Getting started working with large projects

This may be a fools errand, asking this question, since it is such a broad subject. But I'm a little overwhelmed as a jr. Developer trying to figure out where to start.
So far in my few month long career, I've been working with smaller projects, small ui modifications to existing projects. Now I'm being tasked with merging, or making 3 different projects compatible with one another, much larger than anything I've even seen, let alone worked with.
The code is complex, and a lot of it is pretty advanced. This is looking like it might be a few month long ordeal. Is there any advice you all have as far as learning other code bases? Understanding their architecture/functionality?
Unfortunately my NDA precludes me from giving out any specifics about the project to perhaps get more information, and I'm the most senior person on this team. Any and all advice you can give me about where to start learning a large code base, with lots of functionality would be helpful.

This question is indeed too generic to be addressed here, maybe https://softwareengineering.stackexchange.com/ could clear some of your issues in tackling new projects or specific technologies.
If you have specific questions regarding issues you find with compatibility between the technologies you have to integrate then we might be able to help.
One generic piece of advice I would give anyone tackling a new task is to take your time to first understand the requirements and the projects you are going to work on.
Another piece of advice would be to ask for a more senior programmer help you with the task, even if he can not actually work on the project he could still guide some of your decisions. It's always good to have a someone to bounce your ideas on.
Also considering that you are the most senior in the team, remember to consult with your colleagues.
Every project is different though and there's no specific solution we could give you to help you complete such a generic task.

Testing and comparing performance of jQuery plugins

There are a tonne of jQuery plugins out there and so I want to ensure that when I find two or more plugins that do the same thing, I choose the best.
I generally go for filesize as a first indicator of peformance, but I was wondering else I can do to test and compare performance of these plugins.
Could I use jsperf.com? Throw those plugins I want to compare in there. Would the results be a good indicator as to the performance?
Any other suggestions?
Thanks.

For measuring performance and so on there's a great free tool in circulation: DynaTrace Ajax 3 Edition ( http://ajax.dynatrace.com/ajax/en/ )
In your case you have to look at the JavaScript part http://ajax.dynatrace.com/ajax/en/content/c-javascript-dom-tracing.aspx
Which gives you the ability of measuring performance of specific methods and so on. I've used it in the past to optimize a huge mega drop down menu running in IE7. It helped a lot!

Filesize is not a good indicator of runtime performance. If you know javascript very well, you could look at the code and form an opinion of how well written it is, but I wouldn't expect filesize to be a good measure of runtime performance.
If performance really matters to you, then the only way to make a meaningful decision is to measure the exact operations that you care about. jsPerf is one very useful tool for setting up a performance comparison between two different ways of accomplishing a task. But, you have to be very careful when designing performance tests so that what you are measuring is really the right thing and jsPerf can only measure some types of things.
More specific advice would depend upon the specific plug-in and what types of operations it does that you care the most about.
For reference, jQuery may sometimes be the fastest and most convenient way to write code, but often isn't the fastest executing code for sections of code where speed really matters. For example, document.getElementById("test").value = "foo" is 5-7x faster than $("#test").val("foo") as illustrated here: http://jsperf.com/jquery-vs-plain-javascript.

Generally the best indicator of performance, aside from looking through the code and testing it yourself, is the number of people using it along with the comments and reviews you read about it. File size is of little consequence unless it's extreme.
Just read what others have said, what the documentation says about known issues and make an educated guess.

Sign up for Sauce Labs, which lets you test the most prominent browser/OS combinations, and see how the plugins perform in every browser you care about.
(A free account gives you 45 minutes of testing per month.)

Testing Graphical Users Interfaces

So I have a fancy GUI in jQuery, which has gotten relatively complex. I would like to write tests for it, e.g. using assert(). However, it seems that writing such tests is difficult because GUIs don't manipulate data or make computations: they are just superficial interfaces to please the user.
So how does one generally write tests for GUIs?

assuming your code is fairly clean (modular and loosely coupled pieces of functionality that work together rather then a few uber functions), the first thing to do is choose a test framework. I recommend jasmine, because it fits the way I like to write tests, but if you are looking for more of an xUnit clone, qunit is also very well made.
If your code is not pulled apart (like 99.99% of javascript in the wild), I would first look at how to make jquery plugins, and extract as much as you can into them. Testing uber-functions that do loads of things is a scary proposition, but when you are talking about a module that does a single thing, testing gets much easier.
Finally, there is a bit of a learning curve with both how to structure complex javascript, and how to test it. Don't give up! Contrary to what some people would have you believe, javascript is very testable nowadays with very solid libraries and there are many people doing it (I just spent all day working on complex functionality, was practicing TDD the entire time, and it never felt clunky or unnatural)
Good luck, and feel free to ask for clarification if something here is unclear :)
EDIT:
By "pull apart" I mean move to a more modular approach rather then gigantic functions. In jQuery, the first step is with plugins, which will take you pretty far. If you are making a javascript "application", where most of your logic is in the front end and the back end is mostly for persistance, I would look at stuff like Backbone.js, which will help manage a very high level of complexity, but is totally overkill if you don't need it.
Going back to extracting plugins, try to find pieces of functionality that are sort of contained. I wrote a quick plugin today to remember the state of checkboxes in a table with paging, where the contents of the table get swapped out programmatically, but if a user checks a box on page one (but doesn't save), goes to page two, then back to page one they should still see that box checked.
If that checkbox code was inline in the paging code, it would make the paging code WAY more complicated. By pulling it into a plugin, it only complicates the paging code a little bit (calling $(table).saveCheckState() when a page unloads, and $(table).loadCheckState() when a new page loads) It also makes the testing very straightforward, all I need is a div with a few checkboxes to test the checkbox code, rather then needing to add more to the paging tests which are already pretty complex.
Not knowing your background or level of experience I would hesitantly recommend reading clean code if you want to learn more about this sort of stuff. Unfortunately is it java oriented rather then javascript, but most of it is universally applicable in any object oriented language (which javascript can be), and is probably the best intro level book into this topic. If you do full stack development (rather then just front end), have at least a working knowledge of java, are a junior/intermediate dev who wants to improve their craft, its one of those books everyone should read. If those things aren't true, it may end up just being confusing, or just not really be much use to you. So take the recommendation with a grain of salt :)

Your answer is in GUI itself - User interface.
GUI's are best tested with people. You should check out http://ux.stackexchange.com which is dedicated entirely to the user experience.
I think this is important, because I'm sure your GUI is to the point where it is solid, as you've done the unit testing on non-graphical elements. Through your own testing you've made it this way - now, you should see how other people interact with it, how they break it, and what they like or don't like about it. Then you make changes and do it all over again.
(Ok, I know this isn't unit testing. But seriously, the options out there for heavy testing of jQuery stuff are not that fun to deal with!)

Resource for Refactoring tips geared towards JavaScript

I'd like to start a discussion on the best resources for refactoring tips, with an eye towards Front-End JavaScript refactoring.
A friend whose opinion I respect suggests this book, though it uses examples in Java. I understand that the principles of OO refactoring should translate to another language.
Let's talk about refactoring in general and JS refactoring specifically.

Check out Martin's Clean Code for some inspiration. The examples are in Java but the ideas should translate to JavaScript as well.
In order to refactor properly, you'll need to test your code well as having proper tests in place is a prerequisite for it. Try finding testing tools that give you code coverage as this will be extremely valuable.
In case your code hasn't been tested yet you can think testing as a method of learning. You write tests to prove or disprove your assumptions about it. Once you are done and covered it adequately you should be able to refactor the code using various patterns provided.
As Ira mentioned having a tool to detect clones may be valuable. That's definitely one way to look at it.
I think that often having proper perspective is half the solution. If you can state your design in clear terms, you'll end up with better results. Try not to over-engineer it too much by applying every possible pattern you find. :)

Not specifically a refactoring tool, but a tool to detect the number one smell in code: our CloneDR automatically finds duplicated code (copy/paste/edit) and shows you the precise locations and a reasonable abstraction of each clone. You have to resolve the clones by hand, but knowing where they are and having been provided that first cut at an abstraction, is a big help.
EDIT: This is directly a resource for refactoring of Java and JavaScript code. CloneDR works for both of them, using langauge-precise parsing to give precise analysis of clones.
You can see sample clone detection results on Google's Javascript Closure package.

Is there a resource to help convert Prototype JavaScript to jQuery?

I have extensively used Prototype before and it helped us add considerable interactivity to our web applications. However we are looking at making the move to use jQuery in order to standardize on something better supported in Visual Studio.
I understand that we can use the jQuery.noConflict to run it alongside Prototype, but we would like to avoid having users need to download both libraries to use our website.
So, is there a good resource that can help us move old scripts from Prototype to jQuery?

I can't really help you too much with your question, other than to say that I haven't heard of any such tool, and that I'd be really surprised if one actually existed.
While I think jQuery is a great library, and that you're right to be wanting to only use one library, just remember that the cost of you changing over all your scripts is going to be many many hours of work. The cost of your users downloading an extra 30kb of scripts is going to be roughly 0.3 seconds. Perhaps try to slowly phase out Prototype and only refactor your existing pages when a) you have to, or b) if you've got nothing better to do.

Falkayn,
There is no automated process available for conversion of JavaScipt code written against one JS library to another one. Moreover there cannot be one. Different libraries implement different proramming models as well as they arrange their APIs in different manner.
So, before you have found a solution to your problem now ask yourself a question: Am I going to convert my jQuery code once another even "cooler" "X-type" JavaScript library became available?
If your answer is no, take your time and convert the code manually no mater how long will it take. In case you answer "yes" don't convert the code at all.
So it goes.

Thanks guys for your input. I was looking for more of a syntax comparison than anything automated, but nickf makes a good point in that the real cost need not be too great. We only used Prototype on a few pages that really needed a high level of interactivity, so as long as mind out Ps and Qs it should not hurt to use jQuery everywhere else.