One thing I forgot to mention picking up over the last year was Coffeescript.
When I first heard about Coffeescript I was interested. After checking it out initally I came away rather unimpressed. It added a more traditional looking class structure for OOP, had some structural changes to loops and conditions but in the end since it compiled down to Javascript and you would be debugging that code, I didn't see the point.
Some time later I decided to give it a shot on a new project and once I started using Coffeescript, I was sold. I now use Coffeescript on pretty much all projects. Why? Once I began to do some real development in Coffeescript I noticed that I was able to work much faster in it than Javascript alone. The class structure I dismissed early on does come with some features that make it easier in many cases to develop faster. Simple inheritance with extends and the fat arrow for context binding allows you to code faster without having to dedicate as much time to boilerplate code.
Classes
Javascript doesn't have classes. It uses a prototypical system for inheritance and everythis is declared using functions.
function A(){
}var a = new A(); console.log(a instanceof A); // true
The above code says that instance a has the constructor of A in it's prototype chain and will contain it's properties and methods.
Too add properties and methods we
A.prototype.info = "On the prototype";
A.prototype.hotMethod = function(){ return "this method is hot"; };
console.log(a.info); // On the prototypeconsole.log(a.hotMethod()); // this method is hot
When we get to inheritance that's where it get's hairy for many people, myself included
function B(){}
B.prototype = new A();
B.prototype.newHotMethod = function(){ return "this method is the new hotness" };
var b = new B(); console.log(b instanceof B); // trueconsole.log(b.hotMethod()); // this method is hotconsole.log(b.newHotMethod()); // this method is the new hotness
There are better more thorough ways of doing inheritance in javascript but that will work.
Here is the same basic class setup in Coffeescript
class A constructor: () -> info: "this is on A" hotMethod: () ->
"this method is hot"
a = new A();console.log(a instanceof A) // true console.log(a.info) // this is on A console.log(a.hotMethod()) // this method is hot
And basic inheritance
class B extends A constructor: () -> newHotMethod: () ->
"this method is the new hotness" b = new B();console.log(b instanceof B) // trueconsole.log(b.info) // this is on A console.log(b.hotMethod()) //this method is hot console.log(b.newHotMethod()) //this method is the new hotness
As you can see the Coffeescript is slightly less verbose and more easily readable, which can make it both faster to code and easier to maintain.
The Fat Arrow
Not simply a gluttonous arrow, fat arrow notation has actually worked it's way into a future version of Javascript. Using this keyword is javascript can lead to some gotchas, such as the following:
function App(){ this.something = "something!" var theClick = function(evt){ console.log(this); // the button that emited the event console.log(this.something); //undefined };
this.notTheClick = function(){ console.log(this.something); // something! }; $("#clickit").on("click", theClick); this.notTheClick(); //something}
run = new App();
That is a totally contrived, non-sense example of scope issues in javascript (featuring jQuery) but it does prove the point. The context for the event handler is different from the enclosing App function but on visual inspection that is difficult to tell. In Coffeescript we have the fat and skinny arrows for context resolution
class App
constructor: () -> $("#clickit").on("click", @fatArrowHotness) fatArrowHotness: () => ##binds it to the instance of App console.log(@) // context is App instance
runApp = new App()
One thing you'll notice here is my use of the @ symbol which is an alias for this in Coffeescript. As promised, using the fat arrow has bound the context of fatArrowHotness to the instance of App, if you use a skinny arrow the context would be the DOM element that emitted the click event.
class App constructor: () -> $("#clickit").on("click", @thinArrowHotness) thinArrowHotness: () -> console.log(@) // the DOM element that was clicked
runApp = new App()
The fat arrow makes scope resolution far easier to see at a glance which again can lead to faster development and easier maintanence.
These are just a couple of reasons I have been using Coffeescript so heavily over the last little bit, I hope to share more of why I enjoy Coffeescript in the next little bit.
