Javascript: a right way

Backend developers - including me - tend to underestimate the importance of javascript, or somethimes even say things like:

Who cares about js? It's like two lines anyway.

Some people say javascript is just unmaintainable, forget about it, and learn CoffeeScript... or TypeScript or whatever is the most popular library / language that week. I'm not saying that is the wrong approach, but on the other hand I'm not comfortable with a language that compiles to javascript, the very thing it tries to replace. I guess I'm not a glass half full kind of guy. In my opinion, it is up to us, developers to create good code, not the language itself. So what can we do to get better code, better results?

Do it right

Hurrying is the root of the problem. We pay a lot of attention to the backend part, why should we get lazy when it comes to the frontend? Unfortunately it happens often. Yes, it can be done fast, but those few minutes that can be shaved off will come back to bite us later. Spend some more time for each task that requires js, and do it right.

Limit the number of inline scripts

Inline scripts make maintainance nearly impossible, and there is no real reason to do it. For example, declaring variables is a common usage of inline javascript.

<script> var url = <?php echo $url; ?>; </script> 

Use the HTML custom data attributes instead:

<div id="listContainer" data-url="<?php echo $url; ?>"> 

.js file using jQuery:

var url = $("#listContainer").attr('data-url'); // or .data('url'); 

This way, you have a better picture of the origins of the data, and you know exactly which dom element is going to need that data.

OO

Athough javascript does not have the best OO solution, you have options to create objects and keep your code separated. My favourite is to create object literals, and use them like singletons, like so:

List = {    
goToPage: function(page) {
$.get($("#listContainer").data('url') + '/' + page, function(data) {
    $("#listContainer").html(data);
})
},

...
}

Dependency Injection

10 milligrams of EntityManager, STAT!

  Wait, what? You must think that this guy is a Symfony2 dev gone crazy... well you are right! Don't worry, I'm not suggesting anything serious. Most javascript functions depend on dom elements, or selectors for dom elements. Therefore reusability is limited. The above mentioned List object would fail us, if we had two or more lists on the page. Let's modify our code, and inject the dependency:

List = {    
goToPage: function(page, $container) {
$.get($container.data('url') + '/' + page, function(data) {
    $container.html(data);
})
},

...
}

If you are working with object constructors, and instanciate objects, you can inject the dependencies in the constructor. Note: The $container is not a mistake, it's a common naming convention in jquery, it means the variable is jquery object. (Hungarian notation)

Model-View-View Model (MVVM)

Following the above mentioned rules will get us halfway there. We have a maintainable, scaleable code, but we still have to do a lot of work on the frontend, and in fact we got even slower than before, because of the rules. Clients will not like that. MVVM is a great pattern, it can make the development process much faster. Every serious web application should consider using it. This being a common problem, you don't have to re-invent the wheel, there are many awesome libraries which you can use. My personal favourites are AngularJS and KnockoutJS. They both have great tutorials, including videos, and the learning curve is virtually non-existent: you can start using them after a 20 minute video!