Develop Reference

How to make the javascript code easy to maintenance

All, I am working on a highly interactive web application which will need a lot of jquery or js code, And I'm finding that my code is becoming a little hard to maintain and is not all that readable. Sometimes even the author can't find the specified code.
So far what I had done for the clear code is below.
One js component in one js file .(for example. CustomTab.js is a tab component in my app.)
Using the templete to generate component HTML based on JSON.
Using Jquery UI.
Unobtrusive JavaScript.
Is there any other points I need pay attention? Anyway, Any suggestion or recommend technique for making js library/framework easy to miantanance is appeciated, thanks.

I could suggest you to use module pattern together with RequireJS to organize your JavaScript code. For the production you'll be able to use RequireJS optimizer to build your modules into one JavaScript file.
Also if you're expecting that your client-side application will be huge, consider to use some JavaScript MVC framework like Backbone.js together with the server-side RESTful service.

I use this namespacing pattern for my libraries:
MyLibrary.ListView.js:
var MyLibrary = MyLibrary || {};
MyLibrary.ListView = {
doSomethingOnListView: function() {
...
return this;
},
doSpecialThing: function() {
...
return this;
},
init: function() {
// Additional methods to run for all pages
this.doSomethingOnListView();
return this;
}
};
Whichever page needs this:
<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script>
<script type="text/javascript">
$(function() {
MyLibrary.ListView
.init()
.doSpecialThing();
});
</script>
You can even chain methods if a certain page requires an additional function.

This is exactly the same question which I ask myself each time. I think there are few ways to get easy maintaining code.
Contribute in javascript opensource projects and understand how they solved that problem. I think you can gather some unique solution from each project and common part of projects structure will answer to your question about maintenance.
Use prepared solutions like backbone, knockout, ember or angularjs if I am not mistaken angular doesn't give you structure but provide you powerful tool for creating pages with less code. Also check todomvc for ready-made solutions.
Read books and try to create some structure for your needs. It will be difficult and long but result (maybe few years later :)) will be awesome.

Currently I'm also working on a JS framework for my company. What I'm doing is I use OOP elements for JS. In other words I'm implementing similar code to C# libraries(not that similar, simulating will be the correct word). As an example in C# you use Microsoft.Window.Forms, so I can use JSOOP and use method extending and overriding to create the same scenario. But if you gone to far in your project converting your JS code to JSOOP will be time consuming.
use JSLint, this will validate your code and bring down to a readable, script engine friendly code. Though JSLint is very strict so you can use JSHint also.
using seperate file for each component is a good idea I'm doing it also.
If you like you can download the jQuery developers version and you can have a general idea how they created the framework. I learned lot of thing looking at jQuery framework!

A library to couple with jquery which helps work with classes easily (create/inheritance and so on)

I recently used Ext.JS for a project and I loved it's way to make javascript more "C-like" I may say, with inheritance through keyword "extends" and class definition through Ext.define.
While I love Ext, I don't think it fits well to create a normal website (I like it for management web application), I prefer JQuery for things like that, because usually I have a custom graphic and animation involves a lot of DOM manipulation (with Ext, everything is integrated in their classes).
I would like to couple JQuery with a library that handles only the "class" aspect of javascript. It doesn't need to do anything about jquery, I just need to write my code as something object oriented.
I don't want change my javascript development framework because I already use Ext and JQuery, I think it's enough.
Thanks for suggestion
Edit 1:
Looks like this question is already answering (in part) me.
Because it's a 2009 question, I would like to know if there are other libraries that I should look to.
I'm thinking about using JS.Class, base2 doesn't have (for me) a natural syntax. Joose is doing more than I require and JS.Class is inspired by ruby (which is ok for me). Expecially it looks more natural for me.

I like writing things OOP too. So this is what i do!
(function() {
MySite = {
... some basic functions that involve whatever javascript libraries
}
})();
Then i want make a ui section
MySite.ui = {
uiButton: function($buttons) {
$.each($buttons, function() {
var $this = $(this),
settings = $this.data("settings");
$this.click(function() {
if (settings.type == 0) {
MySite.handleLocationChange(settings.location);
}
});
});
}
}
So thats how i do some stuff, Obviously this is library independent, i just prefer jQuery, for its selector stuff. But i can extend my library with different parts that are easy to implement
So i would have a div
<div class='uiButton'data-settings='{"type":"0"}'>MySweetButton</div>
<script type='text/javascript'>MySite.ui.uiButton($(".uiButton"));(</script>

I solved the problem by myself, it looks like JS.Class works really well coupled with JQuery (obviusly you have to make it work in an OOP way). Here you can find the sources which brought me to this answer:
jquery class inheritance
This expecially:
Has anyone used JS.Class and liked it?

Ajax applications with perl backend - how to?

There are already questions about the Perl+AJAX, like here, here or here and several others. They're more than 2 years old and I was hoping for some new stuff.
The questions are:
What is the most preferred method today making AJAX apps with a Perl backend?
Are there some active and commonly used Perl modules that help build AJAX based applications?
Something, for the usual workflow:
if clicked this button (or changed this field.. etc),
POST these data to the server,
read the JSON answer,
and update this/these DIV(s) in a DOM... etc.
This question is can be classified as vague, but I'm really lost and need help with this: what is the most common way making AJAX apps in the Perl world, TODAY.
Looking for a helper module that help me build the browser-side javascript.
I found these:
https://metacpan.org/pod/OpenThought
https://metacpan.org/pod/HTML::AjaxTags
https://metacpan.org/pod/CGI::Ajax (but this is CGI based and IMHO not the best for Plack world)
These modules have not been updated for several years. Are they stable and in use? Or are they deprecated and is there some better way? (for the modern Perl technologies - like Plack).
UPDATE
As I read answers, I'm thinking that the main problem is probably in my English. I don't know how to express myself right.
I know Perl. Maybe I'm not an expert, but I wrote several thousand lines of code. I know Dancer, and already write some apps in Mojo...::Lite. Know JSON{::XS} and I know how AJAX works.
Now (for some reason) I prefer using Mason2, with Mason::Plugin::RouterSimple and several other CPAN modules and Moose. Catalyst, Jifty are too big for my needs.
Back to the question:
My favorite JS framework is jQuery, I'm using it in several projects for modal windows, or accordions, tabs etc.
BUT
My main problem is exactly in Sismetic's answer. I don't want to write JavaScript. Don't like it. (Don't know it very well, and hate every language where I must write something like: var arr = new Array(); instead of my #arr)
So, looking for a solution, how I can minimize (or in the ideal world - totally eliminate) the need of writing the JavaScript code. Don't want write into my templates
$('.clickableButton').click(function(e) {
.... etc... etc..
)}
but something like:
$ajax->make_button( -onchange=>$url, -updatedom=>'#thisdiv", some_special_button_description_in_perl );
$tohead .= $ajax->gen_libs();
$tohtml .= $ajax->gen_html();
$jsdocready .= $ajax->gen_jsinitcode();
An in my templates will output only $tohead in the head part (so include jQuery), $tohtml will come into body, and $jsdocready will come into the end of body as JavaScript init code.
Offcourse, the above is an very stupid example, but hopefully shows what I mean. Simply: The ideal solution was (probably does not exists) is totally eliminate the need writing JavaScript, only Perl code what will generate the needed JS.
Therefore I mentioned the above modules, especially https://metacpan.org/pod/OpenThought, because these really help minimize writing JavaScript. The problem is - these have not updated for 2 years. ;( And unfortunately - I don't know any others.

The reason you're not getting answers isn't just the vagueness of the question. The problem space is very wide and has a many angles of attack.
Let's clarify that the "x" in Ajax shouldn't be taken to mean XML anymore. JSON is obviously more natural and doesn't suffer from nearly as many problems so all my advice will point toward it.
What hobbs said already is right on. You do not want to mess with the server-side code much at all but adopt a framework. This is not because dealing with Ajax is hard in Perl; it's trivial. It's because the problem space gets messy quickly and you'll end up repeating your code in endless minor variations. So–
Perl/Server-side
Any of these will make you happy eventually. They all have a learning curve. There are other options but these are the Best™.
Catalyst (Catalyst::View::JSON)
Dancer (Dancer::Serializer::JSON)
Mojolicious (prefer Mojolicious for HTML5/Websockets)
Deployment SHOULD be Plack/PSGI based.
Take the time to really learn the core of Perl's Ajax handling: JSON(::XS) so you know what the views in the various frameworks do under the covers.
JavaScript/Client-side
This is essentially an embarrassment of riches at this point.
jQuery
Many Perl hackers like this kit; it seems to hit the same sweet spot Perl does. I adore jQuery.
Dojo
I'm not a fan — they had the worst documentation possible in early versions and broke compatibility while deleting what little docs used to exist — but it's well-liked in its current version.
MochiKit
MooTools
YUI
ExtJS
This, now distant, fork from YUI is the 800lb gorilla of client-side JS. I personally dislike it because of its lack of graceful degradation, et cetera, but it is highly regarded and very sharp looking out of the box.
I personally dislike and can't recommend prototype and though I've never used it I also chose not to put script.aculo.us on the list.
There are plenty of other amazing specialty kits out there too; e.g., Modernizr. When you are looking into JS, consider how important standards compliance and forward-looking features like CSS3, HTML5, extended event handling like multi-touch are to what you'll do. Good luck and have fun.
Update: Possibly of further interest
Jemplate – templating in JavaScript
Catalyst::View::Jemplate
Jifty – YAWF

Looking for "ajax" isn't really what you need. Just use a web framework of your choice that has good facilities for serialization, working with Accept headers, etc. For example Catalyst and Catalyst::Action::REST, or Dancer. Don't write Perl that writes Javascript, it will only make you sad.

I use CGI::Application as my base framework and CGI::Application::Plugin::JSON to return JSON data to jQuery.

If you want to generate HTML code with a Perl module, I would recommend CGI.pm:
...
use strict;
use warnings;
#CGI is shipped along perl, I think
use CGI;
my $CGI = CGI->new();
my $return_string = '';
#From CGI documentation on CPAN
#http://search.cpan.org/~markstos/CGI.pm-3.55/lib/CGI.pm
$return_string .= $CGI->header;
$return_string .= $CGI->start_html('hello world');
$return_string .= $CGI->h1('hello world');
$return_string .= $CGI->button(-name => 'button_name',
-value => 'Click Me!',
#Javascript event if needed
-onClick => "do_something()"
);
$return_string .= $CGI->end_html;
print $return_string;
Or(as I dont like the latter method) you could just write it on perl(generating it yourself manually):
use strict;
use warnings;
#Needed header, otherwise will return error
print "Content-type: text/html\n\n";
#return random number from 0 to 100
my $random_number = int(rand(101));
my $HTML_generated_string = qq|
<html>
<head>
<title>HTML generated manually with perl</title>
</head>
<body>
<h1>Hello world</h1>
Bla bla bla Heres the random number $random_number
</body>
</html>
|;
print $HTML_generated_string;
Other than that, I dont know any extra modules to do it. I normally do it by hand, or write a template(with CGI::Application).

I don't think the thing you are asking for exists. You can't write AJAX apps without using JavaScript. If someone invented a way to do JavaScript without JavaScript it would be a major project and not one person's weekend CPAN module.
I suggest rethinking your view of JavaScript. JavaScript is an excellent language and JQuery is great as well. There is a lot of bad JavaScript code out there, but there is good JavaScript code as well. Just like there are good and bad practices in the Perl community. I'd suggest you keep an open mind and take another look at JavaScript and make sure you really know the foundations well. Sometimes my frustration with a language just means I haven't learned it very well.
There are some very cool things happening in the JavaScript world. I admit its chaotic and decentralized and there is a lot of different stuff to know about and thats exhausting but its also exciting that so much is happening.
You probably already know about these resources, but just in case: FireBug, Mozilla Developer Network JavaScript docs, and JavaScript Garden

See Dancer::Plugin::Ajax on cpan
http://metacpan.org/pod/Dancer::Plugin::Ajax

tips for working on a large javascript project

I have some experience with JavaScript - but mainly with some small stuff, I never did anything really big in Javascript previously.
Right now, however, I'm doing quite a large javascript-related project, a jquery-powered frontend that communicates with the server-side backend by sending/receiving JSON via Ajax.
I'm wondering if you could provide some useful information on how to deal with large javascript projects - are there any helpful tools/libaries/good practices?
Thanks in advance.

My one big tip would modularize
In JavaScript, it is very easy for variables to clobber other variables. In order to avoid this, modularization is a must. There are several ways to take advantage of JavaScripts scope rules to minimize the possibility of variable conflicts.
var myProject = {};
myProject.form = function(p_name, p_method, p_action)
{
var name = p_name,
method = p_method,
action = p_action;
var addInput = function(p_input)
{
// etc...
}
return {
addInput: addInput,
name: name
};
}
myProject.input = function(p_name, p_type, p_value)
{
var name, method, value;
var setValue = function(p_value)
{
value = p_value;
return true;
}
return {
setValue: setValue,
name: name
};
}
// etc...
If you're careful about using var, and keep track of your function scope, then you have only one global variable - myProject.
In order to get a new form Object, you'd simply do the following: var myForm = myProject.form('form1', 'post', 'post.php').

You may want to check out Backbone.js
Backbone supplies structure to
JavaScript-heavy applications by
providing models with key-value
binding and custom events, collections
with a rich API of enumerable
functions, views with declarative
event handling, and connects it all to
your existing application over a
RESTful JSON interface.

Grigory ,
Even i moved from a backend to UI few months back only follow this approach
read all the concepts of jquery
either from google or through some
book or through jquery
documentation.
follow some of the jquery best practices http://psdcollector.blogspot.com/2010/03/77-best-jquery-tips-i-have-ever-read.html
write utitlity functions for all repeated code like getcookie ,subsstrings etc etc
keep getting your code reviewed by experienced person who can guide you
post to stackoverflow if you get stuck anywhere.
as it is big project divide into mutiple files and use proper naming convintion.
please let me know if you need anything else

jQuery and YUI 3: A Tale of Two JavaScript Libraries is a nice comparison of them in the context of a complex application, and gives useful hints for jQuery programmers as well.

The best advice is to keep your code segmented in different files as "classes". I personally hate working in a file that's more than a few hundred lines long.
Then assemble and minify your code with one of the tools on the web, like Shrinksafe or Google Closure Compiler
Note that Dojo, YUI, and Ext are all designed to handle large Ajax applications. You'll struggle a bit with jQuery. But I'm guessing this app isn't all that big and you should be fine.

Have you consider checking out MooTools?
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Dynamic proxies in javascript?

I can proxy a single function in javascript by doing something like this (just jotted down from memory so bear with me)
function addAroundAdvice(target){
var targetFunction = target.aFunction;
target.aFunction = new function(){
invokePreCall();
targetFunction.apply(target, arguments);
invokePostCall();
}
}
Being a java programmer I'd think of this as a dynamic proxy. Every time I write code like this I think that someone must have made a really smart library that does the common proxying operations that is at least 10% better than what I can do in a hurry. I'd be expecting some stuff like correctly intercepting all methods for any given object, which may not be entirely trivial. Then there's different types of advice. So while I'm not expecting something the size of scriptaculous, it's certainly more than 6 lines of code.
So where are these libraries ?

Try jQuery AOP plugin
Looking at the source it seems that only uses jQuery as a namespace, so you could try this plugin even if don't want to use jQuery.

The Dojo Toolkit has a lot of support for AOP constructs like this:
Eugene Lazutkin's Blog Post on Aspect Oriented Programming with Dojo

The fact that you have been able to do it I would think means that there is a library to achieve it in the form of pure JavaScript i.e. your above example. Design Patterns can be applied to JavaScript as you know, so I think the advice I would provide to you is the following by a Google and Yahoo GUI developer :
http://jsdesignpatterns.com/
Chapter 14: The Proxy Pattern. Reference there solution to yours. You may still prefer your approach or you may find tips from their approach.
Cheers,
Andrew

I don't think you can intercept all functions.
The best you can do is iterate over all elements of an object and look for any functions:
for elem in someObject {
if typeof(elem) == "function" {
// replace the function
}
}
Trouble is, that if you add a function later it's not routed through the proxy.