Archive

Javascript Framework

Yes, I’m getting very intoxicated with coffescript as I’m writing this yet another blog on coffeescript. It’s because coffeescript has made my life easier while I’m writing javascript whether applications or libraries or RIA. Here, I’m going to share some useful resources that might help everyone who are interested in learning coffeescript.

First, starting with what is coffeescript and an detailed overview blogged by krawaller, the writer has given a very good overview on coffeescript which I’m sure will help beginners. This article has referenced links that any new beginner can treat as a learning resource.

Second, coffeescript site. http://www.coffeescript.org. it has very good tutorials an online compiler and many more useful code snippets.
Third, a conversion tool js2coffee or coffee2js http://www.js2coffee.org

Enjoy! Coffee!

I have been using coffeescript lately a lot to build a javascript library. The experience so far has been great as far as the complex programming I’m doing instead of using javascript. Coffeescript does the conversion for my code. I’m using jquery with coffeescript which is really easy to use nothing complex at all.

Here’s how I do it

$ ->
  $(some_link_id).click () ->
    # do something

which translates to

$(function() {
  return $(some_link_id).click(function() {
    // do something
  });
});

If you are going to use underscore you can just use as you would in your javascript functions i.e

_.map () ->

Yeah it’s that simple.

The coffeescript author has a coffee port of underscore which you can use directly if you are interested.

Mostly I have enjoyed using the loops in coffeescript since I’m more familiar with ruby syntax. It follows kind of the same way as I would do in ruby for ‘for loop’ or if using ‘when’

show = console.log # I like doing this to print in console
for code of codes
  show code

Coffeescript has great deal of resource in it’s website www.coffeescript.org. It’s really simple if you have ruby background and even if you don’t it’s just that simple to understand. I’m enjoying writing 300 lines of coffeescript instead of writing 1000 lines of javascript when coding OO style programming which transforms in javascript prototypical programming.

I hope you’ll like coffeescript as much I do. Enjoy!

I have always appreciated the things you can achieve with javascript. The power of javascript has been shown over the years and there’re very few web sites which doesn’t use Javascript today. Although javascript is powerful and great but the syntax and debugging had never been so easy. Writing a object oriented javascript required skill and discipline and lots of patience. And those who are programming javascript kudos because you are all doing great work!

Javascript is an object oriented but a prototypical language where harnessing the power of prototypal inheritance is a little cumbersome. The jQuery library did help us all by taking care of the DOM but it always lacked the structured programming like OOP, it simply isn’t designed to help you organize your code outside of vanilla JavaScript. Then there is Prototype JS framework which  lets you write OOP style dynamic web applications and Moo4q by Ryan Florence also gives you the ability to write OOP style on top of jQuery.

Then in 2009 came Jeremy Ashkenas released Coffeescript, a programming language that transcompiles to Javascript. Writing applications and managing your code can never been easier because of the simplicity used in Coffeescript.  “The language adds syntactic sugar inspired by Ruby, Python and Haskell to enhance JavaScript’s brevity and readability, as well as adding more sophisticated features like array comprehension and pattern matching. CoffeeScript compiles predictably to JavaScript and programs can be written with less code (typically 1/3 fewer lines) with no effect on runtime performance“- [wikipedia].

Speaking of fewer lines of code and simplicity here’s an example of simple Person class in coffeescript

class Person
  constructor: (name) -> 
  @name = name

Defining constructors (functions that get invoked upon instantiation) is simple, just using function named constructor. This is akin to using Ruby’s initialize or Python’s __init__. Which compiles to javascript as this

var Person;

Person = (function() {

  function Person(name) {
    this.name = name;
  }

  return Person;

})();

By prefixing argument’s with @, CoffeeScript will automatically set the arguments as instance properties in the constructor. You can try playing with Coffeescript here. Coffeescript is website a great resource for learning.

Installing Coffeescript:

You can download and install nodejs and then use npm to install coffeescript in your environment with the following command:

 npm install -g coffeescript

You can then type coffee and it will invoke the interactive coffee. Or you can start writing your script in a *.coffee file and compile to js with following command and require in your html file for testing.

 coffee -c somefile.coffee

Then it will generate a samename.js file to require in your html. You can also direclty use coffee files in your html, I’ll show an example in later post.

I have been developing a web application in Sproutcore framework. It’s a great framework to develop. I have integrated with facebook login, like button and thought may be great idea to add google +1 button.

At first I thought it should be an easy procedure with the straight forward tutorial posted in google. But I had the problem of rendering the button in the page. So I followed the explicit load example in google +1 button in their website.  Below the steps I followed  to show up  google +1 in my sproutcore application:

1. Add the plusone script in the head portion of ‘index.rhtml’

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {"parsetags": "explicit"} /* for explicit loading */
</script>

2. Added <div id=”plusone-div”></div> where I wanted the button to appear.

3.  Added the following javascript function:

createPlusOne: function () {
    gapi.plusone.render("plusone-div",{"size":"medium","count":"true"});
}

first parameter: the div to render
second parameter: button configuration in json format
more configuration settings can be found in here.

4. Called this function in the states wherever I wanted to render the button.

That should be it. Enjoy +1!

Sproutcore is an MVC architecture javscript framework for client-side for developing desktop like rich web applications. It enables building blazingly fast, innovative user experiences on the web. To know more about sproutcore visit here.

Install sproutcore in your windows machine you can download the windows installer from the site. Or you can install using ruby 1.9.2-p180.

gem install sproutcore -pre

if you are working on Windows then you will probably run into this when you install SproutCore:

gem install sproutcore -pre
Fetching: rack-1.2.2.gem (100%)
Fetching: json_pure-1.4.6.gem (100%)
Fetching: extlib-0.9.15.gem (100%)
Fetching: abstract-1.0.0.gem (100%)
Fetching: erubis-2.6.6.gem (100%)
Fetching: thor-0.14.6.gem (100%)
Fetching: eventmachine-0.12.10.gem (100%)
ERROR: Error installing sproutcore:
The ‘eventmachine’ native gem requires installed build tools.

Please update your PATH to include build tools or download the DevKit
from ‘http://rubyinstaller.org/downloads’ and follow the instructions
at ‘http://github.com/oneclick/rubyinstaller/wiki/Development-Kit’

You can find out more about DevKit at https://github.com/oneclick/rubyinstaller/wiki/Development-Kit and you can download DevKit at http://rubyinstaller.org/downloads, which you probably picked up on from the error message above.

Note: the latest version of “eventmachine” is not compatible with DevKit. You have to get the pre-release version by using this command:

gem install eventmachine –pre

Once you successfully install eventmachine run the following command again to install sproutcore.

gem install sproutcore -pre

When you try and install SproutCore again you should see a successful install like this:

gem install sproutcore -pre
Fetching: daemons-1.1.2.gem (100%)
Fetching: thin-1.2.11-x86-mingw32.gem (100%)
Fetching: sproutcore-1.4.5.gem (100%)
Successfully installed daemons-1.1.2
Successfully installed thin-1.2.11-x86-mingw32
Successfully installed sproutcore-1.4.5
3 gems installed
Installing ri documentation for daemons-1.1.2…
Installing ri documentation for thin-1.2.11-x86-mingw32…
Installing ri documentation for sproutcore-1.4.5…
Installing RDoc documentation for daemons-1.1.2…
Installing RDoc documentation for thin-1.2.11-x86-mingw32…
Installing RDoc documentation for sproutcore-1.4.5…

once you get this you should be able to create your first application running the following in command prompt:

sc-init

You should have a project folder created with the required files. Now you cd into the project folder and run the following command to start the server:

sc-server

Sproutcore browser by default listens to port 4020. Once you see the server has started to listening you can browse from browser to http://localhost:4020

That’s it you should see the welcome to sproutcore message in your browser after launching your project application!

%d bloggers like this: